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.

Cara Membuat Animasi Popup dengan CSS Cara Membuat Animasi Popup dengan CSS

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.

<body>
    <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.

@import url('https://fonts.googleapis.com/css?family=Sevillana');
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.

Cara Membuat Animasi Popup dengan CSS

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 :)

26 April 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat