Show Div Onscroll With Lazysize.Js

Beberapa hari ngutak-ngatik lazy load untuk image dan video Youtube dengan lazysize.js, aku jadi punya ilham untuk memanfaatkan lazysize.js untuk show div onscroll untuk fixed widget.

Seperti kita ketahui bahwa lazysize.js memakai class="lazyload" dan lalu saat halaman di-scroll dan object akan memasuki above the fold maka class="lazyload" akan berkembang menjadi class="lazyloaded" yang menunjukan bahwa sumber element sudah dimuat blowser.

Dengan begitu kita dapat memanfaatkan perubahan class="lazyload" menjadi class="lazyloaded" saat di-scroll untuk show floating/fixed div. Kita memakai .lazyloaded untuk memunculkan fixed div, kita tinggal mengatur daerah widget-nya sebelum di-scroll biar tidak eksklusif menjadi class="lazyloaded" untuk menunda kemunculannya (di sini aku menganggap Anda sudah memakai lazysize.js di blog), menyerupai 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, contohnya di sidebar bawah. Di sini aku memakai margin-top: 1000px untuk mengatur ketinggian scroll.

Kemudian saat halaman di-scroll maka class="lazyload" akan berkembang menjadi class="lazyloaded" dan kita gunakan position: fixed biar widget menjadi melayang.

 .fixed.lazyloaded {
   position: fixed;
 }

DEMO

Kita juga dapat menambahkan animasi saat widget muncul dengan css animasi. Sebagai contoh, di bawah ini css dan html untuk widget yang aku 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'>&times;</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>

Sumber https://www.kompiajaib.com/

Share this post