5.00 / 1 oy

Html'de animasyon ile el yazısı yazdırmak

İmza atar gibi el yazısını bir animasyon ile html bir web sitesinde nasıl yazdırabiliriz? Örneğin site açıldıktan birkaç saniye sonra sayfanın logo, header ya da footer gibi bir alanında belirli bir hızda o animasyon oynasın ve tamamlandığında öylece kalsın istiyorum

Not: gif animasyonu istemiyorum

zirzop

03.07.2019 01:09

Bu soru 1 kez yanıtlandı.

  • coderguru
    3 Temmuz 2019 13:16
    29

    Madem bir kere bulaştık, bunu da çözelim :)

    El yazısı animasyonu için svg çizimi yapılabilir. Google fonts'ta temsili bir el yazısı fontu ile örnek bir çıktı şu şekilde:

    html el yazısı animasyonu

    Bilerek Html'de arka planı siyah tutarak yazıyı beyaz olarak yazdırdım. Kodlara bakarak kendiniz de uygulamayı dilediğiniz gibi değiştirebilirsiniz.

    Tüm kullandığım kaynaklar cdn olduğu için download etmenizi gerektirecek bir dosya da yok. Kodlar da zaten anlaşılabilir diye düşünerek ek açıklamalar yazmıyorum, ama sorunuz olursa beklerim.

    Snap.svg isminde bir eklenti kullandım, bunun da alternatifleri var elbette ancak bu kodlar da işinizi görecektir.

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>El yazısı animasyonu deneme</title>
<link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
	<style>
	body {background:black;font-family: 'Pacifico', cursive;}
	</style>

</head>

<body>
 <svg width="800" height="400" style=""></svg>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script>
            $(document).ready(function () {
                $(window).load(function () {
                    var s = Snap('svg');
                    var text = 'isim soyad imza'
                    var len = text.length;
                    var array = [];
                    for (var x = 0; x < len; x++) {
                        var t = text[x]
                        array.push(t);
                    }
                    var txt = s.text(50, 50, array)
                    $('tspan').css({
                        'font-size': 60,
                        'text-transform':'none',
                        'font-family': 'Pacifico',
                        fill: 'none',
                        stroke: '#ffffff',
                        'stroke-dasharray': 230,
                        'stroke-dashoffset': 230
                    })

                    $('tspan').each(function (index) {
                        $(this).stop(true, true).delay(500 * index).animate({
                            'stroke-dashoffset': 5
                        }, 1600);
                    })
                });
            });
           
        </script>
</body>
</html>

     

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Html Javascript JQuery Css Css 3 Gif Animasyonu Svg Web Tasarımı Web Programlama Animasyon Programlama Kodlama

Benzer Sorular

Soru Tarih
Windows Sunucuda IIS Kullanılarak SSL Kurulumu Nasıl Yapılır?

bora34 0

SQL Server versiyonu SQL komutu yazarak nasıl görülebilir?

kaanbey 0

IDENTITY_INSERT ayarı OFF olduğunda xx tablosundaki kimlik sütunu için açıkça değer eklenemez hatası

utku33 1

C# Override Nedir ve Nasıl Kullanılır?

mbologlu 0

JavaScript ile dizi işlemleri (dizi tanımlama-ekleme-güncelleme)

utku33 1

PHP'de Heredoc Nedir ve Nasıl Kullanılır?

PhpCoder 0

Reitix
Html'de animasyon ile el yazısı yazdırmak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.