galery

FLOATING BOX, MEMBUAT FLOATING BOX PADA WEBSITE

FLOATING BOX, MEMBUAT FLOATING BOX PADA WEBSITE
Sering kali kita menemukan pesan yang muncul tiba - tiba pada website yang kita kunjungi, dan pesan itu muncul dengan sendirinya setelah kita membuka halaman website untuk beberapa waktu atau beberapa detik.
lalu kita timbul pertanyaan, bagaimana cara membuat animasi pesan tersebut?
sebenarnya cara membuatnya cukup mudah, tidak perlu plugin ataupun tools yang membuat kita harus berurusan dengan pihak lain, dan ini bisa kita buat sendiri menggunakan css dan javascript.
yang kita butuhkan yaitu:

css untuk membuat bentuk box yang akan kita tampilkan pada website kita

javascript kita gunakan untuk mengatur delay munculnya box tersebut pada halaman website kita

untuk membuat cssnya adalah: <style> .box{width:400px;height:300px;position:fixed;bottom:-100vh;left:0;border:1px solid blue;} .box >.title-box{padding:10px;background:blue;color:white;} .box>.title-box>.close{float:right;color:red;} .box > .content{padding:10px;} </style>
nah untuk css sudah kita buat, lalu untuk menerapkannya adalah: <div class="box"> <div class="title-box"> INI TITLE BOX ANDA <button class="close">x</button> </div> <div class="content"> Disini kontent utama yang akan kita tampilkan di dalam box. </div> </div>
untuk box sudah siap kita gunakan tetapi jika di pasang tidak akan muncul karena posisinya ada di bawah dengan pengaturanbottom:-100vh; pada css di atas, untuk dapat memunculkannya maka kita gunakan javascript untuk memanggil box tersebut. <script> setTimeout(function(){ $(".box").animate({bottom:"0vh"},900); },5000); </script> dalam javascript di atas kita akan mendelay box muncul setelah 5 detik dengan anka 5000 setelah halaman terbuka.
lalu untuk membuat closenya kita gubakan javascript juga yaitu: <script> $(".box").find(".close").click(function(){ $(".box").animate({bottom:"-1000vh"},900); }); </script> maka perintahnya kita kembalikan kebawah agar tidak terlihat yaitu dengan angla -100vh.
untuk script lengkapnya <style> .box{width:400px;height:300px;position:fixed;bottom:-100vh;left:0;border:1px solid blue;} .box >.title-box{padding:10px;background:blue;color:white;} .box>.title-box>.close{float:right;color:red;} .box > .content{padding:10px;} </style> <div class="box"> <div class="title-box"> INI TITLE BOX ANDA <button class="close">x</button> </div> <div class="content"> Disini kontent utama yang akan kita tampilkan di dalam box. </div> </div> <script> setTimeout(function(){ $(".box").animate({bottom:"0vh"},900); },5000); $(".box").find(".close").click(function(){ $(".box").animate({bottom:"-1000vh"},900); }); </script> caranya cukup mudah Semoga bermanfaat
Ditulis oleh: Admin

Tanggal: 06-05-2022 Pembaruan : 4 bulan lalu

 

Beri nilai


 
BAGIKAN :

Tinggalkan komentar