Roket Efektli Yukarı Çık Eklentisi

Share:
blogger-roket-yukarı-çık-düğmesi

 Roket efektli yukarı çık eklentisi - Blog sayfalarında eklenti kullanılacaksa en işe yarayanlardan biri yukarı çık eklentisidir. Çoğu blog sayfasında farklı fikirlerle yukarı çıkma eklentisi kullanıldığını görmüştüm. Bu tür eklentiler hem göze hoş gelir hem de sayfayı ziyaret etmek için kolaylık sağlar. Roket şeklindeki bu eklenti ziyaretçilerin çok hoşuna gidecektir. Eklenti aşağı indikçe ortaya çıkıyor ve siyah beyaz bir görünümde oluyor. Mause ile üzerine geldiğinizde renkleniyor ve tıkladığınızda ateşlenerek yukarı çıkıyor.


 Ziyaretçilerinize sayfanızı kolay gezdirmek adına roket efektli bu eklentiyi nasıl kuracağınıza geçelim. İki yere ekleyeceğiniz kod ile hemen kullanabilirsiniz. Öncelikle ]]></b:skin> kodunun üstüne aşağıdaki kodu ekleyin.

/* Back to Top Roket Efektli */
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Daha sonra ikinci aşamada </body> kodunun üstüne aşağıdaki kodu ekleyin ve kaydedin.

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

✔ Bu içeriği beğendiyseniz lütfen paylaşın ⤵

3 yorum:

  1. Merhaba, yazınız için teşekkürler. Bloggerların buluşma ve sosyal paylaşım noktasına sizi de bekleriz.

    YanıtlaSil
  2. GÜZEL YAZI FAYDALI BENDE YAPTIM SAYENDE

    YanıtlaSil

YORUM YAPARAK KATKIDA BULUNABİLİRSİNİZ...

1) Yaptığınız yorumun, yazıyla alakalı olmasına özen gösterin.
2) Yazım ve dil bilgisi kurallarına mümkün olduğunca dikkat edin.
3) Kullandığınız üslubun sizi yansıttığını unutmayın.
4) Yorum yaparken link eklemeyin.