Page Transition with CSS and jQuery

Question

I really need your help. I am creating a page transition like this one: http://goo.gl/74K2rQ

But I am following this animation to my OWN design: http://goo.gl/NVjcZ2

So far what here's what I have experimented: https://jsfiddle.net/f7xpe0fo/1/

And it doesn't follow my design yet. To see my actual JSFIDDLE check it here: https://jsfiddle.net/8y801eqh/11/

What my HTML contains is that I created two divs with ID's main-page and next-page. The first page is color red and the next page is color green. By default i hide the next-page div. Check out my HTML:

<div id="main-page">
 <div>
     <h1>Page Transition</h1>
       <a href="#"> Click Here</a>
</div>

</div>


<div id="next-page">
 <div>
     <h1>This is the 2nd page</h1>
       <a href="#"> Click Here</a>
</div>

</div>

Now for my CSS I fix their design to match up the 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 my experiment here: https://jsfiddle.net/f7xpe0fo/1/

When I click on the word click here which is a link it must wrap the page to the next page and follow exactly this design: http://goo.gl/NVjcZ2

I tried to transitioned the first phase of the animation however I don't know how to proceed to the next one. I understand that I need to use jQuery on this one but how can I? Can anyone help.

Here's the JSFIDDLE of my own: https://jsfiddle.net/8y801eqh/11/

Answer 1

jsBin demo

• Use CSS3 animation with keyframes.
• Use a HTML overlay element that covers the screen
• Use jQuery to trigger a CSS class that is bound to the mentioned CSS3 animation.
• While CSS3 animates the fancy overlay, fadeToggle your pages!

HTML:

<div class="page" id="page1">
    <h1>PAGE 1</h1>
    <a href="#">Click here</a>
</div>

<div class="page" id="page2">
    <h1>PAGE 2</h1>
    <a href="#">Click here</a>
</div>


<div id="overlay"></div> <!-- we'll animate this guy here -->

CSS:

h1{   
  font: 60px/2 Helvetica;
  color: #fff;
  font-weight: normal;
  text-align: center;
}
.page{
  position: absolute;
  overflow: hidden;
  width:  90vw;
  height: 90vh;
  top:  5vh;
  left: 5vw;
  color: white;
}
#page1{
  background: #008562;
}
#page2{
  display: none;
  background: #ff8600;
}
.page 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;
}

#overlay{
  visibility: hidden;
  position: fixed;
  z-index:999;
  width:  100vw;
  height: 100vh;
  box-shadow: 0 0 0 2000px #fff;
}

#overlay.overlayAnimation{
  visibility: visible;
  animation: overlayAnimation 4s forwards;
}
@keyframes overlayAnimation {
  0% {
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0);
    background: transparent;
  }
  25%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0);
  }
  50%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0) rotate(90deg);
  }
  50.1%{
    width:  200px;
    height: 10px;
    transform: translate3d(calc(50vw - 100px), calc(50vh - 5px), 0) rotate(0deg);
  }
  75%{
    width:  200px;
    height: 100vh;
    transform: translate3d(calc(50vw - 100px), 0px, 0) rotate(0deg);
  }
  100%{
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0) rotate(0deg);
    visibility:hidden;
  }
}

And a bit of jQuery to trigger the CSS3 overlayAnimation class:

var $pages = $(".page");
var $overlay = $("#overlay");

$('.page a').on("click", function(){
  if($overlay.hasClass("overlayAnimation")) return;
  $pages.fadeToggle(4000);
  $overlay.addClass("overlayAnimation").on("animationend", function(){
    $(this).removeClass("overlayAnimation");
  });
});

Answer 2

So found your solution, check it out here: http://transitiontest.comeze.com/

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

In this example, there are two main objects: #main-page and #next-page, both share the same default properties except for their 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; and the margins to center the object. To hide it I set display to none;.

On page load, I first reset all the properties of the main object and fade it in as you can see below.

When .linkmain or .linknext gets clicked on, they both execute the same function but for a different object (main or next).

The function first fades out the text in the main object and makes this object shrink. After both of these are finished, the object rotates using a function to transition rotation.

After all of this is finished, the function fades out the object click on, to show the new object.

Next step, showing the new object:

Again, first I reset all the properties of the object and make it fade in.

Next, I change the background color of the object matching the one of the new object.

After this is finished, I animate the height, afther that the width, and at last fade in the content of the new object.

JS

// This function is used to 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(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

// Set all properties of main object to default and fade it in
$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();

// This 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 the main object after all the animations above are finished
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);

    // Fade in the new page after all the animations above are 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);
});

// This 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 the next object after all the animations above are finished
    setTimeout(function() {
        $("#next-page").fadeOut();          
    }, 1500);

    // Fade in the main page after all the animations above are 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);
});

Answer 3

This is not actual answer, but may be this code will helpful for you:

$('.clickbutton').click(function(){
    $('.mainWrap').addClass('animate');
     setTimeout(function() {
         /* Code to show the page , now this is dummy code*/
        $('#main-page, #next-page').toggle();
    }, 500);
    setTimeout(function() {
        $('.mainWrap').removeClass('animate');
    }, 1000);
});

#main-page {
    height: 100%;
    width: 100%;
    background-color: #e74c3c;
    padding: 40px 0 40px 0;
}

h1{
    font-family: Helvetica;
    color: #fff;
    font-weight: normal;
    text-align: center;
}

#next-page{
    height: 100%;
    width: 100%;
    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;
    
    
    
}

.mainWrap:before, .mainWrap:after {
    background-color:yellow;
    display: block;
    
    content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s;
}

.animate.mainWrap:before, .animate.mainWrap:after
{
   -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;   
}

.mainWrap::before {
  top: -2px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.mainWrap::after {
  bottom: -2px;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

*, *::after, *::before {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainWrap">
    <div id="main-page">
        <div>
            <h1>Page Transition</h1>
            <a class="clickbutton" href="javascript:void(0)"> Click Here</a>
        </div>
    </div>
    
    <div id="next-page">
        <div>
            <h1>This is the 2nd page</h1>
            <a class="clickbutton" href="javascript:void(0)"> Click Here</a>
        </div>
    </div>
</div>

Added in fiddle : Demo

Answer 4

Basic concept:

1. Play the first animation and use $.get function to get the content of the requested page.
2. When the animation has ended and you got response from the server in .done function, extract the content of the main div from the response, replace it with the current content and play the second animation.
3. Modify the url, headers and history.

You can play your animation by setting up properties of a class and then adding it to the div by addclass function.

There may be a problem when different pages uses different js scripts, though.

There are also scripts that can automate this things, but im not familiar with any, sadly.