Ditulis oleh: Ditulis pada: 2/06/2017
Beberapa hari ngutak-ngatik lazy load untuk image dan video Youtube dengan lazysize.js, saya jadi punya ide untuk memanfaatkan lazysize.js untuk show div onscroll untuk fixed widget.Seperti kita ketahui bahwa lazysize.js menggunakan
class="lazyload" dan kemudian ketika halaman di-scroll dan object akan memasuki above the fold maka class="lazyload" akan berubah menjadi class="lazyloaded" yang menandakan bahwa sumber element sudah dimuat blowser.Dengan begitu kita bisa memanfaatkan perubahan
class="lazyload" menjadi class="lazyloaded" ketika di-scroll untuk show floating/fixed div. Kita menggunakan .lazyloaded untuk memunculkan fixed div, kita tinggal mengatur tempat widget-nya sebelum di-scroll agar tidak langsung menjadi class="lazyloaded" untuk menunda kemunculannya (di sini saya menganggap Anda sudah menggunakan lazysize.js di blog), seperti berikut:Sebelum discroll:
.fixed {
position: relative;
margin-top: 1000px;
width: 300px;
bottom: 0;
left: 0;
z-index: 9999;
}
Widget diletakan di bawah above the fold dengan
position: relative, misalnya di sidebar bawah. Di sini saya menggunakan margin-top: 1000px untuk mengatur ketinggian scroll.Kemudian ketika halaman di-scroll maka
class="lazyload" akan berubah menjadi class="lazyloaded" dan kita gunakan position: fixed agar widget menjadi melayang.
.fixed.lazyloaded {
position: fixed;
}
Kita juga bisa menambahkan animasi ketika widget muncul dengan css animasi. Sebagai contoh, di bawah ini css dan html untuk widget yang saya gunakan di demo.
Kode CSS
.fixed {
position: relative;
margin-top: 1000px;
width: 300px;
bottom: 0;
left: 0;
z-index: 9999;
}
.fixed.lazyloaded {
position: fixed;
animation: totop 1s;
-moz-animation: totop 1s;
-webkit-animation: totop 1s
}
.fixed-content {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #ddd;
border-left: none;
border-bottom: none;
}
.fixed h2 {
font-size: 16px;
font-weight: bold;
margin: 10px 0 10px 10px;
}
.fixed label {
display: block;
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background: #fff;
border: 1px solid #dedede;
cursor: pointer;
z-index: 9999
}
.fixed input {
position: absolute;
right: -999em;
opacity: 0
}
.fixed input[type=checkbox]:checked+div {
position: fixed;
bottom: 0;
left: -500px;
animation: toleft 1s;
-moz-animation: toleft 1s;
-webkit-animation: toleft 1s
}
@keyframes toleft {
from {
left: 0
}
to {
left: -500px;
}
}
@-moz-keyframes toleft {
from {
left: 0
}
to {
left: -500px;
}
}
@-webkit-keyframes toleft {
from {
left: 0
}
to {
left: -500px;
}
}
@keyframes totop {
from {
bottom: -500px
}
to {
bottom: 0;
}
}
@-moz-keyframes totop {
from {
bottom: -500px
}
to {
bottom: 0;
}
}
@-webkit-keyframes totop {
from {
bottom: -500px
}
to {
bottom: 0;
}
}
Kode HTML
<div class="fixed lazyload">
<label for='item-1'>×</label>
<input id='item-1' name='one' type='checkbox' />
<div class="fixed-content">
<h2><span>Widget Fixed</span></h2>
<div>
<img src="https://i.ytimg.com/vi/vUQkLrEjpm0/maxresdefault.jpg" width="300" height="120">
</div>
</div>
</div>