Koben akan kembali membahas tutorial bertemakan
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 :DcacingTOP bisa sobat sisipkan ke dalam tag apapun, asal bagian paling atas dari template kalian. Hal ini akan erat sekali dengan snippet jQuery!
back to topAda juga yang bilang
scroll to topSebuah 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;
}
background-image: url(
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> <div id="cacingTOP"></div> <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> Demo n source code by: myblogsharingpost.wordpress.com
Happy back to top \m/
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...