Sam Norton Sam Norton - 7 months ago 27
HTML Question

Page Transition with CSS and jQuery

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

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);
});