Skip to main content

Membuat Animasi Marhaban Ya Ramadhan

Membuat Animasi Marhaban Ya Ramadhan - Marhaban ya Ramadhan, bulan suci penuh berkah telah tiba. Saatnya untuk lebih mendekatkan diri pada-Nya. Menjauhi keburukan dan memperbanyak ibadah pada-Nya. Selamat datang bulan suci Ramadhan 1442 H.

Ada beberapa tutorial yang sudah saya bagikan tentang ucapan "Marhaban ya Ramadhan" atau "Selamat Hari Raya Idul Fitri" yang bisa dipasang di blog untuk pengunjung setianya, di antaranya:

  1. Ucapan Marhaban Ya Ramadhan Dengan CSS Animation
  2. Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek
  3. Membuat Popup Banner Dengan CSS Dan Timeout Javascript

Animasi Marhaban Ya Ramadhan

Dan kali ini, saya buatkan animasi Marhaban Ya Ramadhan dengan tombol animasi ketupan goyang-goyang, hehehe....

Dan saat ini di momen menyambut bulan suci Ramadhan 1442 H. atau lebaran di tahun 2021 ini, saya terapkan juga di blog Kompi Ajaib ini. Jika masih dipasang, ada ketupat bergoyang di pojok kiri ata blog ini.

Jika Anda ingin memasangnya di blog Anda, silahkan copy kode-kodenya berikut ini.

Untuk blog non AMP

Simpan kode CSS berikut di style blog Anda.

/*Ramadhan*/
.kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{right:0;width:80px;height:80px;cursor:pointer}.lebaran{width:100%;height:100%;left:0;background-color:rgba(9,100,13,.8);background-image:url(https://1.bp.blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAABQMk/CssDna5Zst4FIXesvj9nd1N_xVCusNvwQCLcBGAsYHQ/s400-rw/ketupat-lebaran.png);background-position:10% 50%;background-repeat:no-repeat;background-size:auto;display:none;flex-direction:column;align-items:center;justify-content:center}.lebaran blockquote{font-weight:700;font-size:1.6rem;font-family:Arial;color:#fff;width:60%;max-width:800px;line-height:1.4;margin:0;padding:.5rem;position:relative;text-align:center}.lebaran blockquote:after,.lebaran blockquote:before{position:absolute;color:#f1efe6;font-size:8rem;width:4rem;height:4rem;opacity:.5}.lebaran blockquote:before{content:'“';left:-3rem;top:-2rem}.lebaran blockquote:after{content:'”';right:-3rem;bottom:1rem}.lebaran cite{line-height:3;text-align:left;color:#fff}.tutup-lebaran{position:absolute;top:20px;right:20px;cursor:pointer}.goyang{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;animation:goyang 1s linear infinite}@-webkit-keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.muncul{-webkit-animation-name:muncul;animation-name:muncul;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@media screen and (max-width:425px){.lebaran blockquote{font-size:1rem}.lebaran blockquote:after,.lebaran blockquote:before{font-size:6rem;width:2rem;height:2rem}}

Jika tombolnya ingin di sebelah kiri, ubah right menjadi left di CSS yang ditandai di atas.

Lalu simpan kode berikut di atas kode </body>, Anda juga bisa menyesuaikan/mengganti kalimatnya.

<div class='kupat goyang' id='kupat' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;flex&#39;;kupat.style.display=&#39;none&#39;;'>
<picture>
<source srcset='https://1.bp.blogspot.com/-sAExCOpy9rw/YEilNutd_yI/AAAAAAABQMc/OAAiO5e_0-gaUzkWzWOQB53WpjjKZE_AwCLcBGAsYHQ/s80-rw/ramadhan2.png' type='image/webp'></source>
<source srcset='https://1.bp.blogspot.com/-sAExCOpy9rw/YEilNutd_yI/AAAAAAABQMc/OAAiO5e_0-gaUzkWzWOQB53WpjjKZE_AwCLcBGAsYHQ/s80/ramadhan2.png' type='image/png'></source>
<img alt='kupat' height='80' src='https://1.bp.blogspot.com/-sAExCOpy9rw/YEilNutd_yI/AAAAAAABQMc/OAAiO5e_0-gaUzkWzWOQB53WpjjKZE_AwCLcBGAsYHQ/s80/ramadhan2.png' title='Marhaban Ya Ramadhan' width='80'/>
</picture>
</div>
<div class='lebaran muncul' id='lebaran'>
<blockquote>
Marhaban ya Ramadhan&#8230; Bulan suci penuh berkah telah tiba. Saatnya untuk lebih mendekatkan diri pada-Nya. Menjauhi keburukan dan memperbanyak ibadah pada-Nya. Selamat datang bulan suci Ramadhan 1442 H.
</blockquote>
<cite>Admin Diksi Fiksi</cite>
<span class='tutup-lebaran' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;none&#39;;kupat.style.display=&#39;block&#39;;'><svg height='24px' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#ffffff'></path></svg></span>
</div>

Demo on Blog

Untuk blog AMP

Simpan kode CSS berikut di style AMP blog Anda.

/*Ramadhan*/
.kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{right:0;cursor:pointer;width:80px;height:80px}.lebaran{width:100%;height:100%;left:0;background-color:rgba(9,100,13,.8);background-image:url(https://1.bp.blogspot.com/-KvReOHIhjzA/YEitCVq3quI/AAAAAAABQMk/CssDna5Zst4FIXesvj9nd1N_xVCusNvwQCLcBGAsYHQ/s400-rw/ketupat-lebaran.png);background-position:10% 50%;background-repeat:no-repeat;background-size:auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.lebaran blockquote{font-weight:700;font-size:1.6rem;font-family:Arial;color:#fff;width:60%;max-width:800px;line-height:1.4;margin:0;padding:.5rem;position:relative;text-align:center}.lebaran blockquote:after,.lebaran blockquote:before{position:absolute;color:#f1efe6;font-size:8rem;width:4rem;height:4rem;opacity:.5}.lebaran blockquote:before{content:'“';left:-3rem;top:-2rem}.lebaran blockquote:after{content:'”';right:-3rem;bottom:1rem}.lebaran cite{line-height:3;text-align:left;color:#fff}.tutup-lebaran{position:absolute;top:20px;right:20px;cursor:pointer}.goyang{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;animation:goyang 1s linear infinite}@-webkit-keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.muncul{-webkit-animation-name:muncul;animation-name:muncul;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@media screen and (max-width:425px){.lebaran blockquote{font-size:1rem}.lebaran blockquote:after,.lebaran blockquote:before{font-size:6rem;width:2rem;height:2rem}}

Jika tombolnya ingin di sebelah kiri, ubah right menjadi left di CSS yang ditandai di atas.

Lalu simpan kode berikut di atas kode </body>, Anda juga bisa menyesuaikan/mengganti kalimatnya.

<div class='kupat goyang' id='kupat' on='tap:lebaran.show,kupat.hide' role='button' tabindex='0'>
<amp-img alt='kupat' height='80' src='https://1.bp.blogspot.com/-sAExCOpy9rw/YEilNutd_yI/AAAAAAABQMc/OAAiO5e_0-gaUzkWzWOQB53WpjjKZE_AwCLcBGAsYHQ/s80-rw/ramadhan2.png' title='Marhaban Ya Ramadhan' width='80'><amp-img alt='kupat' fallback='' height='80' src='https://1.bp.blogspot.com/-sAExCOpy9rw/YEilNutd_yI/AAAAAAABQMc/OAAiO5e_0-gaUzkWzWOQB53WpjjKZE_AwCLcBGAsYHQ/s80/ramadhan2.png' title='Marhaban Ya Ramadhan' width='80'></amp-img></amp-img>
</div>
<div class='lebaran muncul' hidden='' id='lebaran'>
<blockquote>
Marhaban ya Ramadhan&#8230; Bulan suci penuh berkah telah tiba. Saatnya untuk lebih mendekatkan diri pada-Nya. Menjauhi keburukan dan memperbanyak ibadah pada-Nya. Selamat datang bulan suci Ramadhan 1442 H.
</blockquote>
<cite>Admin Kompi Ajaib</cite>
<span class='tutup-lebaran' on='tap:lebaran.hide,kupat.show' role='button' tabindex='0'><svg height='24px' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#ffffff'></path></svg></span>
</div>

Semoga bermanfaat.

Gambar tombol ketupat dari Giphy.com dan gambar background ketupat dari Cleanpng.com.

Gambar di widget ini menggunakan format Webp dan ikon close menggunakan svg, jadi cukup ringan untuk loading blog.

Gambar gif dari Bilikata.com

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Playlist tutorial Blogger
Playlist tutorial AMP HTML
Playlist Serba-serbi
Jangan lupa SUBSCRIBE
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB