Cara Membuat Animasi Sosial Media

Cara Membuat Animasi Sosial Media - Animasi pada halaman website menjadi bagian yang sangat penting untuk menunjang desain website agar terlihat lebih menarik dan lebih hidup. Saat ini ada banyak cara untuk membuat berbagai animasi, salah satu yang populer untuk membuat animasi adalah dengan jQuery, tetapi ada juga animasi yang bisa kita buat dengan CSS. Seperti tutorial berikut yang akan saya bagikan kepada kalian yakni Cara Membuat Animasi Sosial Media. Buat kalian yang ingin membuatnya silahkan ikuti langkah - langkahnya berikut ini.

Untuk membuat animasi sosial media, langkah pertama silahkan buat file index.html kemudian ketikan struktur HTML berikut untuk membuat icon.

<body>
    <div class="container">
        <a href="#">Instagram</a>
        <div class="icon-instagram">
            <i class="fab fa-instagram"></i>
        </div>
    </div>
</body>

Selanjutnya, mengatur layout dan membuat animasi sosial media agar layout pada icon terjadi pergerakan. Untuk membuat animasinya silahkan ketikan sintak CSS berikut ini.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<style>
    * {padding: 0; margin: 0;}
    .container {
        position: relative;
        width: 200px;
        margin: auto;
        height: 250px;
    }
    .container a {
        width: 180px;
        padding: 10px 0;
        background: #222222;
        color: white;
        text-align: center;
        display: block;
        text-decoration: none;
        position: absolute;
        left: 10px;
        bottom: 0;
        border-radius: 5px;
    }
    .icon-instagram {
        position: absolute;
        left: 5px;
        top: 50px;
        width: 190px;
        height: 200px;
        background: #eaeaea;
        text-align: center;
        border-radius: 5px;
        transition: all 1s cubic-bezier(.79,.14,.15,.86);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .container:hover > .icon-instagram {
        top: 15px;
        transition: all 1s cubic-bezier(.79,.14,.15,.86);
    }
    .icon-instagram .fa-instagram {
        line-height: 200px;
        font-size: 50px;
        color: #222222;
    }
</style>

Pada kasus ini icon sosial media saya memanfaatkan icon dari fontawesome, untuk itu jangan lupa untul meload library dari fontawesome seperti diatas. Setelah semua sintak HTML dan CSS telah diketikan. Langkah terakhir simpan kembali filenya kemudian silahkan buka pada browser masing - masing untuk melihat hasil akhirnya.

Baiklah, itu diatas adalah tutorial sederhana bagaimana Cara Membuat Animasi Sosial Media semoga tutorial diatas bermanfaat, selamat mencoba dan sampai jumpa ditutorial selanjutnya.

10 Desember 2019

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