Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.
Pada tulisan ini akan dibahas seputar sticky video, yang akan dilengkapi dengan skrip kode HTML, CSS dan serta JavaScript dipadukan dengan jQuery sebagai aktivasi.
Fitur sticky video sudah dapat dijumpai pada situs jejaring sosial Facebook dan tidak mau ketinggalan situs YouTube ikut mengadopsi fitur ini.
Dengan menggunakan fitur ini, pengunjung web secara bersamaan dapat melihat isi web dan tanpa ketinggalan streaming video yang sedang dimainkan. Video akan menyusut(mengecil) pada saat halaman digulir (scroll) kebawah, sehingga baik isi konten web dan video secara bersamaan dapat dinikmati.
Berikut ini ada beberapa hal yang harus dipersiapkan untuk membuat efek floating video, diantaranya adalah sebagai berikut:
1) HTML (index.html)
2) CSS (style.css, normalize.css)
3) JavaScript (Library jQuery)
File index.html
<div class="content-main-box"> <div id="videobox"> <!-- <video width="400" controls=""> <source src="assets/rossi.mp4" type="video/mp4"> Your browser doesn't support </video> --> <iframe width="400" height="315" src="https://www.youtube.com/embed/vr0qNXmkUJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="content-box"> <h1>Efek<span>"sticky"</span>Floating <span>video</span> saat <span>scroll</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> </div> </div>
File style.css
*{ padding: 0px; margin: 0px; box-sizing: border-box; } .content-main-box{ width: 90%; height: auto; margin: auto; max-width: 1200px; } #videobox{ width: 50%; height: auto; margin: auto; border: 10px solid #000; transition: 0.5s; } iframe, video{ width: 100%; vertical-align: bottom; } .content-box{ width: 100%; height: auto; margin: auto; display: block; position: static; overflow: hidden; } .content-box h1{ font-family: arial; font-size: 30px; text-align: center; color: #f7403c; padding-top: 20px; text-transform: uppercase; } .content-box h1 span{ color: #fe9b1a; } .content-box p{ font-family: arial; font-size: 18px; text-align: justify; color: #333333; line-height: 26px; padding-top: 20px; } #videobox.in{ animation: ac 1s; } #videobox.out{ position: fixed; bottom: 0; right: 0; width: 300px; z-index: 999; animation: an 0.5s; }
Skrip JavaScript, disini disisipkan pada badan web atau tag HTML BODY
<!-- JavaScript --> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> var ha=($('#videobox').offset().top + $('#videobox').height()); $(window).scroll(function(){ if($(window).scrollTop() > ha + 500) { $('#videobox').css('bottom','0'); } else if($(window).scrollTop() < ha + 200) { $('#videobox').removeClass('out').addClass('in'); } else { $('#videobox').removeClass('in').addClass('out'); $('#videobox').css('bottom','-500px') }; }); </script>
Skrip secara keseluruhan sebagai berikut:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sticky Floating Video | YELLOWWEB.ID</title> <link rel="stylesheet" type="text/css" href="style/normalize.css"> <link rel="stylesheet" type="text/css" href="style/style.css"> </head> <body> <div class="content-main-box"> <div id="videobox"> <!-- <video width="400" controls=""> <source src="assets/rossi.mp4" type="video/mp4"> Your browser doesn't support </video> --> <iframe width="400" height="315" src="https://www.youtube.com/embed/vr0qNXmkUJ8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="content-box"> <h1>Efek<span>"sticky"</span>Floating <span>video</span> saat <span>scroll</span></h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit ipsa laborum fugit eos exercitationem, rerum quaerat illo facere, dicta repellendus nostrum molestias quod voluptate amet placeat incidunt id dignissimos in.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla non obcaecati facilis nam aliquid assumenda, tempore perferendis odit animi. Repellendus nisi in rerum, neque ea esse fugiat rem, cupiditate vitae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit earum debitis reprehenderit molestiae tenetur dicta enim hic. Accusantium praesentium quas architecto, consequatur id quae maiores dignissimos perspiciatis esse tempore.</p> </div> </div> <!-- JavaScript --> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> var ha=($('#videobox').offset().top + $('#videobox').height()); $(window).scroll(function(){ if($(window).scrollTop() > ha + 500) { $('#videobox').css('bottom','0'); } else if($(window).scrollTop() < ha + 200) { $('#videobox').removeClass('out').addClass('in'); } else { $('#videobox').removeClass('in').addClass('out'); $('#videobox').css('bottom','-500px') }; }); </script> </body> </html>
Pada dasarnya tujuan penulisan skrip ini adalah agar teman-teman memahami apa itu konsep float CSS, yang pada dasarnya nanti akan dijadikan point paling penting dalam pembuatan efek sticky video ini.
Catatan:
File pendukung, dapat diambil disini:
1. https://necolas.github.io/normalize.css/8.0.1/normalize.css
2. https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js