Sliding Pages

Make content pages slide into view from the proper direction using keyframes with translate. Assign relevant keyframe with jQuery.

by Travis Almand

HTML

<div id='container'>
    
    <div id='screen1' class='screen'>
        <h2>One</h2>
        <button class='button1'>one</button>
        <button class='button2'>two</button>
        <button class='button3'>three</button>
        <button class='button4'>four</button>
    </div>
    <div id='screen2' class='screen'>
        <h2>Two</h2>
        <button class='button1'>one</button>
        <button class='button2'>two</button>
        <button class='button3'>three</button>
        <button class='button4'>four</button>
    </div>
    <div id='screen3' class='screen'>
        <h2>Three</h2>
        <button class='button1'>one</button>
        <button class='button2'>two</button>
        <button class='button3'>three</button>
        <button class='button4'>four</button>
    </div>
    <div id='screen4' class='screen'>
        <h2>Four</h2>
        <button class='button1'>one</button>
        <button class='button2'>two</button>
        <button class='button3'>three</button>
        <button class='button4'>four</button>
    </div>
    
</div>

CSS

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

html, body {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    border: 2px solid black;
    height: 400px;
    left: calc(50% - 200px);
    overflow: hidden;
    position: absolute;
    top: calc(50% - 200px);
    width: 400px;
}

div.screen {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    background: white;
    height: 100%;
    left: 0;
    position: absolute;
    transform: translate(-100%);
    top: 0;
    text-align: center;
    width: 100%;
}

@keyframes slideInFromRight {
    0% {opacity: 0; transform: translate(100%)}
    50% {opacity: 1;}
    100% {transform: translate(0)}
}
@keyframes slideInFromLeft {
    0% {opacity: 0; transform: translate(-100%);}
    50% {opacity: 1;}
    100% {transform: translate(0);}
}
@keyframes slideOutToLeft {
    0% {opacity: 1; transform: translate(0);}
    50% {opacity: 0;}
    100% {transform: translate(-100%);}
}
@keyframes slideOutToRight {
    0% {opacity: 1; transform: translate(0);}
    50% {opacity: 0;}
    100% {transform: translate(100%);}
}

JavaScript

$('#screen1').css('animation-name', 'slideInFromRight');

$('.button1, .button2, .button3, .button4').on('click', function () {
    var $button = $(this);
    var $parent = $button.parent();
    var buttonNum = parseInt($button.attr('class').slice(-1), 10);
    var screenNum = parseInt($parent.attr('id').slice(-1), 10);
    
    if (buttonNum !== screenNum) {
        if (buttonNum > screenNum) {
            $parent.css('animation-name', 'slideOutToLeft');
            $('#screen' + buttonNum).css('animation-name', 'slideInFromRight');
        } else {
            $parent.css('animation-name', 'slideOutToRight');
            $('#screen' + buttonNum).css('animation-name', 'slideInFromLeft');
        }
    }
});