Dimasa lalu, menambahkan transisi halaman di halaman web merupakan proses yang sederhana. Ketika Anda mengklik link tersebut akan mengarahkan Anda ke halaman berikutnya sebagai browser load halaman berikutnya. Web telah merasa ketinggalan jaman jika Anda akan berpikir tentang ada banyak ruang untuk memperbaikinya. Bukankah lebih bagus untuk menambahkan beberapa transisi halus untuk menciptakan pengalaman pengguna yang lebih baik dalam meload halaman berikutnya?

Hal baik yang bisa dilakukan. Ada banyak aplikasi rumit dan plugin yang menawarkan jenis efek yang sama dan beberapa mungkin berpikir bahwa sulit untuk memperolehnya. Untungnya hal itu tidak dengan cara ini.

Kita sudah bermain-main dengan jQery dalam mencari tahu cara untuk menggantikan reload dari halaman web dengan animasi yang mengagumkan yang pasti akan merubah pikiran pengguna tanpa menggunakan plugin dan kini kita akan berbagi cara dalam pembuatannya.

Membuat Markup

Struktur HTML hanya akan terdiri dari dua div untuk dua halaman yang berisi id main-page dan  next-page.

<div id="main-page">
    <!--- Main Content Here -->
</div>   
<div id="next-page">
    <!--- Next Page Content Here -->
</div>

Yuk kita menambahkan konten dalam div. Kita akan memberikan setiap halaman link untuk menavigasi dan menghubungkan mereka satu sama lain melalui class mainlink dan nextlink.

<div id="main-page">
    <div class="maincontent">
       <h1>Full Page Transition</h1>
       <a class="mainlink">TRY IT NOW &#10140;</a>               
    </div>
</div>             
<div id="next-page">
    <div class="nextcontent">
       <h1>Great! You're in the 2nd Page!</h1>
       <a class="nextlink"> &#8592 GO BACK</a>
    </div>
</div>

Menambahkan Style

Sekarang mari kita menambahkan beberapa style umum di markup. Kita akan mengatur elemen seluruh tubuh untuk 100% dan mengatur beberapa properti font untuk tag h1 kami.

body {
width: 100%;
}
h1 {
    font-family: 'Raleway';
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    color: #fff;
    margin-top: 120px;
}

Langkah selanjutnya mari kita buat style main-page dan next-page. Keduanya berbagi sifat bawaan yang sama kecuali warna background. Kita mengatur posisi untuk mutlak dan menyembunyikan kedua elemen melalui display : none.

#main-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #27ae60;
    display: none;
}
#next-page {
    height: 25px;
    width: 375px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    background-color: #e74c3c;
    display: none;
}
.maincontent, .nextcontent {
    padding-top: 40px;
    display: none;
}

Kita juga menambahkan style dasar untuk tombol agar membuat mereka lebih menarik. Kami menggunakan border untuk membuat box shape halus pada tombol dan menyelaraskan ke center.

a.back{
    font-family: 'Lato';
    font-size: 20px;
    color: #dfdfdf;
    text-decoration: none;
    text-align: center;
    width: 20%;
    margin: 25px auto 30px auto;
    display: block;
}
a.mainlink, a.nextlink {
    font-family: 'Lato';
    color: #fff;
    border: 3px solid #fff;
    padding: 15px 10px;
    display: block;
    text-align: center;
    margin: 25px auto;
    width: 13%;
    text-decoration: none;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
 
}
a.mainlink:hover, a.nextlink:hover{
    background: #fff;
    color: #575757;
}

Menghidupkan dengan jQuery

Untuk jQuery page load, kita akan mulai dengan fungsi rasional yang akan melakukan animasi kustom dari satu set properti CSS melalui properti, durasi, mengurangi value lengkap.

$(document).ready(function() {
 
    $.fn.animateRotate = function(angle, duration, easing, complete) {
      var args = $.speed(duration, easing, complete);
      var step = args.step;
      return this.each(function(i, e) {
        args.complete = $.proxy(args.complete, e);
        args.step = function(now) {
          $.style(e, 'transform', 'rotate(' + now + 'deg)');
          if (step) return step.apply(e, arguments);
        };
 
        $({deg: 0}).animate({deg: angle}, args);
      });
    };

Selanjutnya, kita akan mengatur ulang semua properti dari halaman utama dan fadenya. Ketika mainlink dan nextlink diklik akan melaksanakan fungsi dia.

Fungsi pertama akan memudarkan teks dalam halaman utama dan membuat objek menyusut. Setelah eksekusi objek berputar menggunakan fungsi untuk transisi rotasi.

$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();
 
$(".mainlink").on("click", function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(90);
    });
     
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);
     
    setTimeout(function() {
        $("#next-page").animateRotate(0, 0);
        $("#next-page").css("height", "25px");
        $("#next-page").css("width", "375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            backgroundColor: "#27ae60"
        }, function() {
            $(this).animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: "100%"
                }, function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    }, 800);
});

Setelah semua langkah ini, fungsi fade out objek yang diklik untuk menunjukan objek baru dan kemudian mengubah warna background dari objek yang cocok dengan objek baru.

Terakhir, kita menghidupkan tinggi dan lebar serta memudar dalam isi objek baru ditampilkan.

$(".nextlink").on("click", function() {
        $(".nextcontent").fadeOut();
        $("#next-page").animate({
            width: "25px",
            height: "375px"
        }, function() {
            $(this).animateRotate(-90);
        });
         
        setTimeout(function() {
            $("#next-page").fadeOut();          
        }, 1500);
         
        setTimeout(function() {
        $("#main-page").animateRotate(0, 0);
        $("#main-page").css("height", "25px");
        $("#main-page").css("width", "375px");
            $("#main-page").fadeIn();
            $("#main-page").animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: "100%"
                }, function() {
                    $(".maincontent").fadeIn(300);
                });
            });
        }, 1400);
    });
     
});

Demo