Emirhan Bülbül
Android Developer
jQuery İle Yazı Efekti Oluşturma
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.
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/