Question

I’ve been trying to understand how to implement a full page ease… How do you call or tell the script the order of tags I want to ease into the page? Do I need to use a body load function?

Many thanks.

Erik

Answer 1

Here is a tutorial for fading in and out when you change pages: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

If you want to have the pages “bounce” in and out, you can setup your website to be contained in div tags on the same page and simply “ease” them in and out like a slideshow.

CSS —

.panel{
    float: left;
    position: absolute;
    width: 100%;
    height: 100%;
    display: inline-block;
}

HTML —

<div id='div1' class='panel'>Page 1</div>
<div id='div2' class='panel'>Page 2</div>
<div id='div3' class='panel'>Page 3</div>
<div id='div4' class='panel'>Page 4</div>
<div id='div5' class='panel'>Page 5</div>

JavaScript —

$(document).ready(function () {
    var left = 0;
    var width = $(window).width();
    var easing_type = 'easeOutBack';

    $(window).resize(function() {
        initialize_all();
    });

    initialize_all();

    function initialize_all() {
        left = 0;
        width = $(window).width();
        $("#div1").css({
            left: 0 + "px"
        });
        $("#div2").css({
            left: width + "px"
        });
        $("#div3").css({
            left: 2 * width + "px"
        });
        $("#div4").css({
            left: 3 * width + "px"
        });
        $("#div5").css({
            left: 4 * width + "px"
        });
    }

    function move_forward() {
        left -= width;
        if (left  0) {
            left = -4 * width;
        }
        $("#div1").animate({
            left: left + "px"
        }, transition_time, easing_type);
        $("#div2").animate({
            left: left + width + "px"
        }, transition_time, easing_type);
        $("#div3").animate({
            left: left +2 * width + "px"
        }, transition_time, easing_type);
        $("#div4").animate({
            left: left +3 * width + "px"
        }, transition_time, easing_type);
        $("#div5").animate({
            left: left +4 * width + "px"
        }, transition_time, easing_type);
    }
});

This was a simple attempt at a slideshow I had tried, you will need to include the jquery easing plugin but then you can choose from like 30 different easing types.