animasi css itu mudah

CSS ANIMATION, CSS LOADING ANIMATION
.loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;} .loading::after{content:" ";} lalu kita tambahkan border radiusnya agarmenjadi bulat .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%;} .loading::after{content:" ";} lalu kita akam mencoba memberikan efek agar berputar .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite; ini berfungsi mengatur kecepatan putar dari animasi tersebut pada 2s kita bisa merubah sesuai keinginan kita itu merupakan bahan utama untuk style atau bentuk dar animasi loadingnya; sebelum melanjutkan kita perhatikan pada border-top-color:blue itu sebagau pembeda agara pada saat berputar nanti terlihat bergerak dengan adanya warna border yang berbeda. langkah terakhir adalah kita membuat scrip untuk membuat bergerak. pada script ini kita kita akan memanggil nama animasinya yaitu putar 2s linear infinite putar inilah yang akan kita panggil untuk di jalankan sebenarnya rata rata orang menggunakan nama spin tapi jika kita bisa membuatnya maka bebas apapun namanya asalkan kita bisa menerapkannya. OK lanjut membuat perintah animasinya Yang terakhir adalah @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } ini merupakan perintah untuk memutar putar tadi dengan dimulai dari 0% { transform: rotate(0deg); menuju 100% { transform: rotate(0deg); yang artinya akan berputar dari 0 derajat menuju 360 derajat dalam waktu 2 detik 2s untuk script penuhnya adalah Animasi loading buatanku .loading{width:30px;height:30px;border:3px solid:rgba(100,100,100,0.2); border-top-color:blue;border-radius:50%; -webkit-animation: putar 2s linear infinite;animation: putar 2s linear infinite;} .loading::after{content:" ";} @keyframes putar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } animasi loading lalu save dengan namafile.html lalu jalankan filenya melalui brorser kalian

floating box

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: .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;} nah untuk css sudah kita buat, lalu untuk menerapkannya adalah: INI TITLE BOX ANDA x Disini kontent utama yang akan kita tampilkan di dalam box. 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. setTimeout(function(){ $(".box").animate({bottom:"0vh"},900); },5000); 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: $(".box").find(".close").click(function(){ $(".box").animate({bottom:"-1000vh"},900); }); maka perintahnya kita kembalikan kebawah agar tidak terlihat yaitu dengan angla -100vh. untuk script lengkapnya .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;} INI TITLE BOX ANDA x Disini kontent utama yang akan kita tampilkan di dalam box. setTimeout(function(){ $(".box").animate({bottom:"0vh"},900); },5000); $(".box").find(".close").click(function(){ $(".box").animate({bottom:"-1000vh"},900); }); caranya cukup mudah Semoga bermanfaat

css html lazy load

Banyak yang beranggapan untuk menggunakan lazy load itu harus dengan plugin atau dengan tool yang lainny, mengapa saya bilang seperti itu, sebelum membahas cara membuat dan penerapannya kita harus tau dulu apa fungsi dari lazy load itu sendiri.lazy load berfungsi untuk mengganti sementara tampilan website kita sebelum semua element di dalam website kita terbuka secara sempurna, katalain lazy load adalah tampilan sementara di awal pembukaan halaman website.kenapa demikian, karena dalam audit website kita melihat skor FCP First Contentfull Paint. yang bisa kita simpulkan bahwa pada saat pertama membuka halaman yang terlihat halaman kosong dan tidak terlihat bentuk website kita, lalu fungsi dari lazy load ini di gunakan memberikan layout pada halaman kita meskipun kosong tetapi terlihat bentuk dari susunan halaman kita dengan memberi efek yang membentuk seperti blok blok pada website kita. jika kita melihat website besar seperti disini saya contohkan

MENU WEBSITE, FLOATING MENU CSS HTML
GOOGLE REVIEW BUTTON, GOOGLE REVIEW BUTTON FOR WEBSITE
MENU DESAIGN LAYOUT, MEMBUAT MENU RESPONSIVE DENGAN MUDAH

Galeri