Cara Membuat Animasi Popup dengan CSS

26/04/2018    Risman Hakim    2438     Website

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

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More