Cara Membuat Animasi Popup dengan CSS
Cara Membuat Animasi Popup dengan CSS - Popup didalam website merupakan sebuah pesan dialog untuk memberikan suatu informasi kepada pengguna, saat ini popup banyak sekali kita temukan pada tampilan website hanya saja desain tampilan popup berbeda - beda. Pada kesempatan kali ini saya akan berbagi tutorial mengenai animasi popup yang akan diterapkan pada objek gambar kartun, jadi seolah - olah objek kartun sedang menampilkan pesan dialog, penasaran seperti apa ? Berikut tutorial dan praktek Cara Membuat Animasi Popup dengan CSS.
Langkah 1 : Cara Membuat Animasi Popup dengan CSS
Sebelum memulai praktek membuat animasi popup, silahkan kalian persiapkan bahan untuk objek nya, yaitu berupa gambar tokoh kartun, kalian bisa menggunakan gambarnya dibawah ini.
Setelah itu, barulah kita memulai untuk mengetikan sintak - sintak untuk membuat animasi popupnya, silahkan buat file dengan nama index.html, kemudian ketikan struktur HTML sederhana untuk memasukan gambar sebagai objek yang akan dijadikan animasi popup.
<div id="wrapper">
<div class="character">
<img src="Pony.png">
</div>
<div class="popUp">
<img src="say.png" width="200">
<div class="text">
<p>Hello... <br> My name is <br> Popy..</p>
</div>
</div>
</div>
</body>
Langkah 2 : Cara Membuat Animasi Popup dengan CSS
Langkah berikutnya, buat file dengan nama style.css, kemudian ketikan sintak CSS3 berikut untuk menata layout dan tentunya animasi popup pada objek gambar.
body {
font-family: 'Sevillana', cursive;
}
#wrapper {
width: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popUp {
margin-left: -80px;
top: -115px;
position: fixed;
opacity: 0;
transition: all 1s;
-webkit-transition: all 1s;
}
.text {
position: absolute;
top: 20px;
left: 70px;
}
.text p { text-align: center; }
.character img {
width: 200px;
cursor: pointer;
}
.popUp img { width: 200px; }
.character:hover ~.popUp {
margin-top:0px;
opacity:1;
}
Setelah semua sintak HTML dan CSS telah diketikan, pastikan file style.css telah terhubung dengan file index.html, kemudian simpan dan silahkan buka pada browser masing - masing dan lihat hasilnya. Maka akan tempil objek gambarnya, ketika kalian mengarahkan kursor terhadap gambar akan tampil popup yang meberikan pesan dialog.
Bagaimana, menarik bukan animasi yang ditampilkan ? Cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Animasi Popup dengan CSS, semoga bermanfaat dan bisa menambah referensi dalam membuat animasi dengan CSS, selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
