Efek Animasi Flying Menggunakan CSS jQuery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan membuat Efek Animasi Flying Menggunakan CSS Jquery. Langkah pertama untuk dapat membuat Efek Animasi Flying Menggunakan CSS Jquery teman-teman buat struktur html seperti di bawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Efek Animasi Flying Menggunakan CSS Jquery</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
    <section class="page">
    <section>
        <ul class="tabs-controls">
            <li class="tabs-controlsitem">
                <a href="#" class="tabs-controls-link tabs-controls-link-active" data-id="1">
                    IMAGE 1
                </a>
            </li>
            <li class="tabs-controls-item">
                <a href="#" class="tabs-controls-link" data-id="2">
                    IMAGE 2
              </a>
            </li>
            <li class="tabs-controls-item">
                <a href="#" class="tabs-controls-link" data-id="3">
                    IMAGE 3
                </a>
            </li>
            <li class="tabs-controls-item">
                <a href="#" class="tabs-controls-link" data-id="4">
                    IMAGE 4
                </a>
            </li>
            <li class="tabs-controls-item">
                <a href="#" class="tabs-controls-link" data-id="5">
                    IMAGE 5
                </a>
            </li>
        </ul>
    </section>
    <section class="cards-container">
        <div class="card card-current" id="1">
            <h1>IMAGE 1</h1>
            <img src="img/img1.jpg">
        </div>
        <div class="card" id="2">
            <h1>IMAGE 2</h1>
            <img src="img/img2.png">
        </div>
        <div class="card" id="3">
            <h1>IMAGE 3</h1>
            <img src="img/img3.png">
        </div>
        <div class="card" id="4">
            <h1>IMAGE 4</h1>
            <img src="img/img4.jpg">
        </div>
        <div class="card" id="5">
            <h1>IMAGE 5</h1>
            <img src="img/img5.jpg">
        </div>
    </section>
</section>
</body>
</html>

Jika sudah maka kita akan membuat style css masih didalam file yang sama dengan struktur htmlnya.

<style>     
    body {
      background: salmon;
      background-size: cover;
      font-family: 'Roboto Condensed', sans-serif;
      overflow: hidden;
    }
    h1 {
      margin: 0;
      font-size: 22px;
      line-height: 1;
      color: #423e37;
    }
    .page {
      width: 100vw;
      height: 100vh;
      min-height: 700px;
      overflow: hidden;
        margin-left: -25px;
        margin-top: 45px;
    }
    .tabs-controls {
      position: relative;
      z-index: 10;
      display: flex;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      box-sizing: border-box;
      padding: 50px 0 100px;
      list-style-type: none;
    }
    .tabs-controls-link {
      position: relative;
      display: block;
      padding: 16px 32px;
      font-size: 18px;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      text-decoration: none;
    }
    .tabs-controls-link:after {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      width: 0;
      height: 4px;
      background-color: white;
      border-radius: 2px;
      margin: auto;
      content: '';
      transition: width 0.4s;
    }
    .tabs-controls-link-active:after {
      width: 100%;
    }
    .cards-container {
      position: relative;
      z-index: 1;
      width: 500px;
      height: calc(100vh - 205px);
      margin: 0 auto;
    }
    .card {
      position: absolute;
      width: 500px;
      height: 300px;
      background-color: #edebd7;
      border: 1px solid #423e37;
      box-shadow: 9px 11px 3px 0px rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      padding: 40px;
      transition: transform 0.3s, opacity 0.2s;
    }
    .card.hidden {
      z-index: 100;
      background-color: #fff;
      color: #fff;
      opacity: 0;
      transition: color 0.5s, background-color 0.5s, transform 1s, opacity 0.2s 0.4s;
    }
    .card.hidden h1 {
      color: #fff;
      transition: color 0.5s;
    }
    .card.hidden:nth-of-type(1) {
      transform: rotate(-61deg) translateX(101%) translateY(-42%) scale(0.7) skewX(3deg) skewY(5deg);
    }
    .card.hidden:nth-of-type(2) {
      transform: rotate(-20deg) translateX(101%) translateY(-30%) scale(0.6) skewX(6deg) skewY(12deg);
    }
    .card.hidden:nth-of-type(3) {
      transform: rotate(-89deg) translateX(101%) translateY(-41%) scale(1) skewX(4deg) skewY(1deg);
    }
    .card.hidden:nth-of-type(4) {
      transform: rotate(-88deg) translateX(101%) translateY(-26%) scale(0.5) skewX(9deg) skewY(11deg);
    }
    .card.hidden:nth-of-type(5) {
      transform: rotate(-80deg) translateX(101%) translateY(-40%) scale(0.6) skewX(12deg) skewY(5deg);
    }
    .card.hidden:nth-of-type(6) {
      transform: rotate(-85deg) translateX(101%) translateY(-21%) scale(0.3) skewX(12deg) skewY(7deg);
    }
    .card:nth-of-type(1) {
      z-index: 5;
      transform: translateX(0px) translateY(0px);
    }
    .card:nth-of-type(2) {
      z-index: 4;
      transform: translateX(10px) translateY(10px);
    }
    .card:nth-of-type(3) {
      z-index: 3;
      transform: translateX(20px) translateY(20px);
    }
    .card:nth-of-type(4) {
      z-index: 2;
      transform: translateX(30px) translateY(30px);
    }
    .card:nth-of-type(5) {
      z-index: 1;
      transform: translateX(40px) translateY(40px);
    }
    .card:nth-of-type(6) {
      z-index: 0;
      transform: translateX(50px) translateY(50px);
    }

    .social .fa{
       background-image: url(photo1.jpg);
        background-size: cover;
        width: 35px;
        height: 35px;
        color: white;
        text-align: center;
        line-height: 35px;
        margin-top: 20px;
    }
    .cards-container img{
        width: 100%;
        height: 100%;
    }
    </style>

Dan langkah terakhir teman-teman buat script jquery untuk dapat menjalankan animasi flying.

<script>
   $(document).ready(function() {
    var oldId = null;

    $('.tabs-controls-link').click(function(e) {
        e.preventDefault();

        if ($(this).hasClass('tabs-controls-link-active')) {
            return false;
        }

        var currentId = parseInt($(this).data('id'), 10);
        $('.tabs-controls-link-active').removeClass('tabs-controls-link-active');
        $(this).addClass('tabs-controls-link-active');

        if (currentId < oldId) { // item is hidden
            var timing = $('.card.hidden').length * 100;
            $('.card').each(function(index) {
                if (index > (currentId - 1 ) || index == (currentId - 1)) {
                    window.setTimeout(function() {
                        $('.card').eq(index).removeClass('hidden');
                    }, timing - (index * 100));
                }
            });
        } else {
            $('.card').each(function(index) {
                if (index < (currentId - 1)) {
                    window.setTimeout(function() {
                        $('.card').eq(index).addClass('hidden');
                    }, index * 100);
                }
            });
        }

        oldId = currentId;
    });
});
    
</script>

Jika di tampilkan di halaman browser maka akan tampil seperti pada script di bawah ini.

Efek Animasi Flying Menggunakan CSS jQuery

Demikian artikel tentang Efek Animasi Flying Menggunakan CSS Jquery

13 November 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