Trik Komputer: Make Attractive Back to Top Cacing Theme

Koben akan kembali membahas tutorial bertemakan back to top Ada juga yang bilang scroll to top Sebuah link yg jika di klik akan menuju konten paling atas! Cara tercepat membuat hal itu bisa terjadi, carilah unik id pada template kalian yg mana letaknya paling atas. Biasanya terdapat di dalam tag header, wrapper, outer-wrapper etc. Pokoknya setelah tagging <body> disitulah dia berada ;)) Pada postingan sebelumnya gue sudah sharing mengenai make attractive back to top button use jQuery.
Sekarang AA akan buat versi umpan cacing, yakni ketika melakukan scroll halaman ke bawah, maka gambar tali beserta cacingnya akan merosot kelihatan minta dibalikin ke atas. Seperti itu kira-kira gambaran :D

Bahan-bahan yg mesti tersedia, sudah jelas 1 gambar cacing. Silahkan Save Page As and hostingkan sendiri² gambar cacingnya (click to full look image)jQuery script inti harus sudah terpasang pada template anda!<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

.cacing {
background-image: url(LINK-GAMBAR/cacing.png);
background-repeat: no-repeat;
position: relative;
}
#cacing {
cursor: pointer;
width: 30px;
height: 455px;
background-size: 41px;
position: fixed;
top: -455px;
left: 7%;
transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
z-index: 21;
}
#cacing-bubble {
background: #fff;
border-radius: 50px;
color: #06f;
display: block;
font-size: 12px;
line-height: 14px;
opacity: 0;
overflow: visible;
padding: 5px;
position: absolute;
top: 365px;
left: 20px;
text-align: center;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: hidden;
width: 60px;
height: auto;
z-index: 99;
}
#cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after {
opacity: 1;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
visibility: visible;
}
#cacing-bubble:after {
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
border-left: 5px solid #fff;
content: "";
display: block;
position: absolute;
top: 96%;
left: 10px;
width: 0;
height: 0;
z-index: 98;
}

<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>

<div id="cacingTOP"></div>

<div class="cacing" id="cacing">
<div id="cacing-bubble">Get me outta here!</div>
</div>

Letakan syntax tersebut setelah tag <body> Ganti kata² sesuai selera.<div id="cacingTOP"></div>Unik id cacingTOP bisa sobat sisipkan ke dalam tag apapun, asal bagian paling atas dari template kalian. Hal ini akan erat sekali dengan snippet jQuery!

<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function($) {
 $(window).on('scroll', false, function() {
  var windowTop = $(window).scrollTop();
  if (windowTop > 300) {
   $('#cacing').css('top', '0');
  } else {
   $('#cacing').css('top', windowTop - 465 + 'px');
  }
 });
 $('#cacing').unbind('click').click(function() {
  $('html,body').animate({
   scrollTop: $("#cacingTOP").offset().top
  }, 'slow');
 });
});
//]]></script>

DONE.

Demo n source code by: myblogsharingpost.wordpress.com

Happy back to top \m/

Trik Komputer

Jumat, 11 April 2014

Make Attractive Back to Top Cacing Theme

Tidak ada komentar:

Posting Komentar