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
Jquery ile important CSS kuralı eklemek

Kati3kat 0

PHP'de baştaki ve sondaki boşlukları silmek (trim)

PhpCoder 0

CMD ile Silinemeyen Dosyaları ve Klasörleri Silmek (Windows)

utku33 2

C# karakterleri ASCII koduna dönüştürmek

mbologlu 0

PHP'de for döngüsü kullanımı ve örnekleri

PhpCoder 0

Rust programlama dili öğrenmeye değer mi?

utku33 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.