Membuat Page Transition dengan jQuery and CSS

~ Selamat malam

Hari ini kami ingin berbagi koleksi transisi halaman kreatif dengan Anda. Saya telah membuat beberapa animasi yang bisa diterapkan untuk "halaman". Efek yang saya buat sangat sederhana, yaitu gerakan slide sederhana.

Harap dicatat bahwa ini hanya untuk menampilkan beberapa efek yang menarik dan inspirasi. Ini bukan slider atau sesuatu seperti itu. Saya hanya akan menerapkan ini untuk transisi halaman yang terlihat, tidak untuk sebuah navigasi.

kira - kira seperti ini

DEMO | DOWNLOAD

Pertama - tama mari kita buat struktrur HTML nya terlebih dahulu 

<div class="konten-box">  

            <ul>

                <div class="konten-item">

                    <li>

                     <span>

                        <img src="images/me2.jpg" />

                        </span>

                    </li>

                    

                    <li><h3>Lorem Ipsum</h3></li> // Judul disini

                    <li><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li> // deskripsi

                    

                    <li><p>10 orang menyukai ini</p></li>

                    <div class="read"><a href="#">Read More</a></div>

                  </div>

                

            </ul>

    </div>

<div class="bg-layer"></div> // Background loading bar

<div class="loading-bar"></div> // Loading Bar

<div class="loading-text"><h3>LOADING</h3></div>

selanjutnya CSS

*{
margin:0;
padding:0;
}

ul,li{ list-style:none; }

a{  text-decoration:none; }

body{ font-family:Arial, Helvetica, sans-serif; }

.konten-item{

width:25%;
margin:10% 37%;
box-shadow:0 0px 30px rgba(0,0,0,.30);

}

.konten-item li{

color:#fff;
        padding:10px;
background:#5BB9F0;

}

.konten-item li:nth-child(1){

padding:0;
background:#5BB9F0;

}

.konten-item img{

opacity:1;
        width:100%;
transition:all .30s ease .30s;

}

/*
awal animasi
*/

.konten-item li:nth-child(2),
.konten-item li:nth-child(3){

transform:translateY(0);
transition:all .30s ease .30s;

}

.konten-item:hover li:nth-child(2),
.konten-item:hover li:nth-child(3){

transform:translateY(-25px);
transition:all .30s ease .30s;

}

.konten-item:hover li img{

opacity:.70;
transition:all .30s ease .30s;

}

.konten-item:hover .read{ opacity:100; }

.read{

opacity:0;
width:25%;
height:auto;
position:absolute;
margin-top:-62px;
box-shadow:inset 0px 0 #FFF;
transition:all .20s ease .20s;

}

.read a{

color:#5BB9F0;
font-size:20px;
padding-left:10px;

}

.change .bg-layer{

position:fixed;
width:100%;
height:100%;
top:50%;
left:50%;
bottom:auto;
right:auto;
background:#52B3D9;
transform:translateX(-50%) translateY(-50%);

}

.change .loading-bar{

position:fixed;
top:50%;
left:20%;
width:60%;
height:2px;
background:#FFF;
box-shadow:inset 0 0 0 #000;
animation:normal bar 5s ease-in-out;

}

.change .loading-text{
top:52%;
left:45%;
z-index:10;
position:fixed;
visibility:visible;
}

.loading-text h3{

color:#fff;

visibility:hidden;
}

.change .loading-text h3{
visibility:visible;
}



@keyframes bar{

0%{
box-shadow:inset 0px 0 0 #000;
}

100%{
box-shadow:inset 900px 0 0 #000;
}

}

Jquery

 <script>

$(document).ready(function(){
   
                                 $(".read a").click(function(e){
       $("body").addClass("change");
     
                                       setInterval(function(){
            $("body").removeClass("change");
},4000);
});
 
  });

 </script>

Tada Sudah Siap , Bagaimana ?Mudah Bukan ?

~Terima Kasih