Ditulis oleh: Ditulis pada: 3/12/2021
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:
- Ucapan Marhaban Ya Ramadhan Dengan CSS Animation
- Membuat Ucapan Marhaban Ya Ramadhan Dengan Parallax Efek
- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJwJE98-PM4m0fTb70tEXbn6lyjfjyZ-7pErZVExXp7DyUfTZVN2ZwyEA_b7dfif21WoEPW_Q-xwpNQK3bH2DZTTwHmpZb0RRLw5K6cyaoW_bL94OM-KwLV6G0Mu2cHAh7bpuONVctl9k/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('lebaran').style.display='flex';kupat.style.display='none';'>
<picture>
<source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEh9bZuIVaiB5HquCqWwm2bdI0HUcAgWWokQ2HiZxDWrqjse0uvWK6VYP2hdvT6SYp5ZDY9cf2oNX8Fcb3bZajhQ1uAhj5MW9URphUbemkO0oz_8AfHNZa-fqYZS7B7CEh-Uu5WL2wI0/s80-rw/ramadhan2.png' type='image/webp'></source>
<source srcset='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEh9bZuIVaiB5HquCqWwm2bdI0HUcAgWWokQ2HiZxDWrqjse0uvWK6VYP2hdvT6SYp5ZDY9cf2oNX8Fcb3bZajhQ1uAhj5MW9URphUbemkO0oz_8AfHNZa-fqYZS7B7CEh-Uu5WL2wI0/s80/ramadhan2.png' type='image/png'></source>
<img alt='kupat' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEh9bZuIVaiB5HquCqWwm2bdI0HUcAgWWokQ2HiZxDWrqjse0uvWK6VYP2hdvT6SYp5ZDY9cf2oNX8Fcb3bZajhQ1uAhj5MW9URphUbemkO0oz_8AfHNZa-fqYZS7B7CEh-Uu5WL2wI0/s80/ramadhan2.png' title='Marhaban Ya Ramadhan' width='80'/>
</picture>
</div>
<div class='lebaran muncul' id='lebaran'>
<blockquote>
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.
</blockquote>
<cite>Admin Diksi Fiksi</cite>
<span class='tutup-lebaran' onclick='document.getElementById('lebaran').style.display='none';kupat.style.display='block';'><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>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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJwJE98-PM4m0fTb70tEXbn6lyjfjyZ-7pErZVExXp7DyUfTZVN2ZwyEA_b7dfif21WoEPW_Q-xwpNQK3bH2DZTTwHmpZb0RRLw5K6cyaoW_bL94OM-KwLV6G0Mu2cHAh7bpuONVctl9k/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEh9bZuIVaiB5HquCqWwm2bdI0HUcAgWWokQ2HiZxDWrqjse0uvWK6VYP2hdvT6SYp5ZDY9cf2oNX8Fcb3bZajhQ1uAhj5MW9URphUbemkO0oz_8AfHNZa-fqYZS7B7CEh-Uu5WL2wI0/s80-rw/ramadhan2.png' title='Marhaban Ya Ramadhan' width='80'><amp-img alt='kupat' fallback='' height='80' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEh9bZuIVaiB5HquCqWwm2bdI0HUcAgWWokQ2HiZxDWrqjse0uvWK6VYP2hdvT6SYp5ZDY9cf2oNX8Fcb3bZajhQ1uAhj5MW9URphUbemkO0oz_8AfHNZa-fqYZS7B7CEh-Uu5WL2wI0/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… 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