html - Page Transition with CSS and jQuery -

i need help. creating page transition one: http://goo.gl/74k2rq

but following animation own design: http://goo.gl/nvjcz2

so far here's have experimented: https://jsfiddle.net/f7xpe0fo/1/

and doesn't follow design yet. see actual jsfiddle check here: https://jsfiddle.net/8y801eqh/11/

what html contains created 2 divs id's main-page , next-page. first page color red , next page color green. default hide next-page div. check out html:

<div id="main-page">  <div>      <h1>page transition</h1>        <a href="#"> click here</a> </div>  </div>   <div id="next-page">  <div>      <h1>this 2nd page</h1>        <a href="#"> click here</a> </div>  </div> 

now css fix design match whole page:

#main-page {   height: 50vh;   width: 100%;   position: fixed;   left: 0;   background-color: #e74c3c;  padding: 40px 0 40px 0; }  h1{    font-family: helvetica;    color: #fff;     font-weight: normal;     text-align: center;  }  #next-page{       height: 50vh;   width: 100%;   position: fixed;   left: 0;   background-color: #27ae60;  padding: 40px 0 40px 0;     display: none; }    a{  font-family: helvetica;   color: #fff;     border: 2px solid #fff;     padding: 10px 15px;     display: block;     text-align: center;     margin: 0 auto;     width: 20%;     text-decoration: none; } 

based on experiment here: https://jsfiddle.net/f7xpe0fo/1/

when click on word click here link must wrap page next page , follow design: http://goo.gl/nvjcz2

i tried transitioned first phase of animation don't know how proceed next one. understand need use jquery on 1 how can i? can help.

here's jsfiddle of own: https://jsfiddle.net/8y801eqh/11/

so found solution, check out here: http://transitiontest.comeze.com/

test1 = half page, test2 = full page, test3 = single page

in example, there 2 main objects: #main-page , #next-page, both share same default properties except background color:`

height: 25px; width: 375px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: #27ae60; display: none; 

i use position: absolute; , margins center object. hide set display none;.

on page load, first reset properties of main object , fade in can see below.

when .linkmain or .linknext gets clicked on, both execute same function different object (main or next).

the function first fades out text in main object , makes object shrink. after both of these finished, object rotates using function transition rotation.

after of finished, function fades out object click on, show new object.

next step, showing new object:

again, first reset properties of object , make fade in.

next, change background color of object matching 1 of new object.

after finished, animate height, afther width, , @ last fade in content of new object.

js

// function used transition rotation $.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(' + + 'deg)');       if (step) return step.apply(e, arguments);     };      $({deg: 0}).animate({deg: angle}, args);   }); };  // set properties of main object default , fade in $("#main-page").css("background-color", "#e74c3c"); $("#main-page").css("height", "100vh"); $("#main-page").css("width", "100%"); $("#main-page").fadein(); $(".maincontent").fadein();  // gets activated once clicked on object .linkmain $(".linkmain").on("click", function() {     $(".maincontent").fadeout();     $("#main-page").animate({         width: "25px",         height: "375px"     }, function() {         $(this).animaterotate(90);     });      // hide main object after animations above finished     settimeout(function() {         $("#main-page").fadeout();            }, 1500);      // fade in new page after animations above finished     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: $("body").width()                 }, function() {                     $(".nextcontent").fadein(300);                 });             });         });     }, 800); });  // gets activated once clicked on object .linknext  $(".linknext").on("click", function() {     $(".nextcontent").fadeout();     $("#next-page").animate({         width: "25px",         height: "375px"     }, function() {         $(this).animaterotate(-90);     });      // hide next object after animations above finished     settimeout(function() {         $("#next-page").fadeout();               }, 1500);      // fade in main page after animations above finished     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: $("body").width()             }, function() {                 $(".maincontent").fadein(300);             });         });     }, 1400); });