Müzik ve Teknolojiyle arası iyi olan bir zat-ı muhterem.

jQuery İle Yazı Efekti Oluşturma
4 sene önce 1.206 okunma HTML/CSS/JS

Merhaba dostlar. Bu dersimde sizlere bloğumun üst kısmında görmüş olduğunuz yazılıp silinen, tıpkı bir yazı yazma editörü gibi olan isim koyamadığım şeyi yapmayı göstereceğim.

Yazılıp Silinen_1

Matt Boldt isimli bir arkadaşımız bunu yapmış ve Typed.js olarak isimlendirmiş. Ben de ondan gördüm ve bloğum da uyguladım.

Öncelikle aşağıdaki kod ile jQuery dosyamızı sayfaya dahil ediyoruz.

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>

Sonra typed.js isimli dosyamızı indiriyoruz ve aşağıdaki şekilde .js dosyasını sayfamıza dahil ediyoruz.

<script src="DOSYA ADRESİNİ YAZIYORUZ"></script>

Dosyayı sayfaya dahil ettikten sonra aşağıdaki kodları <head></head> tagları arasına ekliyoruz.

<script>

$(function(){

$(“#typed”).typed({

strings: [“<b>İLK YAZI</b>”, “<b>İKİNCİ YAZI</b>”,”<b>ÜÇÜNCÜ YAZI</b>”],

typeSpeed: 60,

backDelay: 500,

loop: false,

contentType: ‘html’, // or text

// defaults to false for infinite loop

loopCount: false,

callback: function(){ foo(); },

resetCallback: function() { newTyped(); }

});

$(“.reset”).click(function(){

$(“#typed”).typed(‘reset’);

});

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log(“Callback”); }

</script>

Yukarıdaki kodu kendinize göre düzenleyebilirsiniz. typeSpeed: 60 yazan kısmı düzenleyerek yazının yazılma hızını ayarlayabilirsiniz.

Daha sonra aşağıdaki stil kodlarını da stil dosyanızın içerisine ekliyorsunuz.


.typed-cursor{opacity: 1;font-weight: 100;-webkit-animation: blink 0.7s infinite;-moz-animation: blink 0.7s infinite;-ms-animation: blink 0.7s infinite;-o-animation: blink 0.7s infinite;animation: blink 0.7s infinite;}
@-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-webkit-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-moz-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-ms-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}
@-o-keyframes blink{0% { opacity:1; }50% { opacity:0; }100% { opacity:1; }}

Umarım yardımcı olabilmişimdir. Yorum yapmayı unutmayın.

Unutmadan, bu işlemi uygulamış olan bazı siteler aşağıdaki gibidir;

https://commando.io/
http://tairemadailey.com/
http://patrickelhage.com/

 

Ahali ne demiş ?

Etiketler

, , , , ,
Diğer Projelerim
Pc Webim Tarifimvar Rounded Image Rounded Image
   

Ben Kimim ?

Bilgi Ben Emirhan. Burası da benim kişisel mecram. Epeydir web sitesi işleriyle uğraşıyorum... Her neyse bu kadar bilgi yeter. Devamı için tam da şu yandaki butona tıkla. Devamı...
Bağlantılar: Bahis, Canlı Casino ve Poker Dersleri www.netsporhaber.com gaziantep escort ataşehir escort bedava bahis

Neler Biliyorum ?

WordPress 60% Complete
C/C++ 95% Complete
HTML 80% Complete
CSS 80% Complete

Copyright © 2014 Tüm hakları tarafımca saklanmaktadır.