CSS3 ve jQuery Eklentisi ile Kayan Yazı Oluşturma

Bu yazımızda CSS3, jQuery eklentisi ve HTML etiketler ile (bilgi, haber ve duyuru gibi) statik bir metin mesajının yatay, sağdan sola, soldan sağa, yukarıdan aşağıya ve aşağıdan yukarıya kayan animasyonlu yazı oluşturma ile ilgili bilgileri paylaşacağım.

Bknz: Blogger Yapışkan Sosyal Paylaşım Butonları

Blogger ve WordPress bloglarında istediğiniz alanda kullanabilirsiniz. Eklentiyi blogunuza uygulamak için aşağıdaki adımları takip edin.

CSS3 ve jQuery Eklentisi ile Kayan Yazı Nasıl Oluşturulur?

Aşağıdaki CSS kodları blogunuzda bulunan </head> kodunun bir satır üzerine ekleyin.

<style type='text/css'>
/*<![CDATA[*/
#awning {background:#fff;padding:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:2px 2px 3px rgba(0,0,0,.05);-o-box-shadow:2px 2px 3px rgba(0,0,0,.05);-ms-box-shadow:2px 2px 3px rgba(0,0,0,.05);box-shadow:2px 2px 3px rgba(0,0,0,.05);}
.awning {width:100%;overflow: hidden;background:#fff}
.ver {height:50px;width:100%;}
/*]]>*/
</style>

Aşağıdaki jQuery kodunu blogunuzda bulunan </body> kodunun bir satır üzerine ekleyin.

<script src='//rawgit.com/jquerycods/jquery/master/awning.js'></script>

Yukarıdaki kodları ekledikten sonra şablonu kaydedin.

Bloga Kayan Yazı Ekleme

Aşağıdaki HTML kodları kullanarak blogunuzda istediğiniz yere menü, sabit sayfa veya yayınlar içerisine kayan bir yazı metni ekleyebilirsiniz.

Sola (Left) varsayılan

<div id="awning">
<div class="awning" data-pauseOnHover="true" data-duration='10000'>Yazıyı buraya ekleyin</div>
</div>

Sağa (Right)

<div id="awning">
<div class="awning" data-direction='right' data-pauseOnHover="true" data-duration='10000'>Yazıyı buraya ekleyin</div>
</div>

Yukarı (Up)

<div id="awning">
<div class="awning ver" data-direction='up' data-duration='1500' data-pauseOnHover="true">Yazıyı buraya ekleyin</div>
</div>

Aşağı (Down)

<div id="awning">
<div class="awning ver" data-direction='down' data-pauseOnHover="true" data-duration='1500'>Yazıyı buraya ekleyin</div>
</div>

Açıklamalar;

Yukarıdaki HTML kodlar içerisinde bulunan data-pauseOnHover="true" kod yazı üzerine gelindiğinde (duraklatma efekti) yazının duraklamasını sağlamaktadır. HTML kodlar içerisinde bulunan data-duration='1500' kayan yazı manüsünün hızını ayarlamaktadır. Eklenti ile ilgili daha fazla bilgi için yorum formunu kullanabilirsiniz.

Ön İzleme