Page Slider with keyframe FINAL

by lvo811

HTML

<button id="left">&lt;---</button>
<button id="right">---&gt;</button>
<div class="panels-wrapper">
    <div class="panels">
        <div id="panel1" class="panel slideLeftIn ">
            <div class="content">
                	<h2>Page 1</h2>

                <article>
                    	<h3>Being a Freelance Designer</h3>

                    <p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a>

                    </p>
                </article>
                <article>
                    	<h3>Making use of Icon Fonts</h3>

                    <p>Locavore irony gastropub chillwave, butcher meggings flexitarian pinterest master cleanse godard. Intelligentsia pop-up neutra, williamsburg gastropub godard pinterest swag deep v umami lomo. Butcher next level 90's wolf bushwick, narwhal photo booth YOLO kale chips whatever small batch. Meh viral ethical hella cardigan portland, street art mlkshk meggings mixtape kale chips cliche messenger bag pitchfork... <a href="#">Read more</a>

                    </p>
                </article>
                <article>
                    	<h3>Being a Freelance Designer</h3>

                    <p>Stumptown helvetica cardigan, odd future seitan tattooed flannel. Kale chips direct trade cray beard. 8-bit etsy butcher post-ironic blog lo-fi mcsweeney's, sustainable pickled umami flexitarian DIY ethical plaid trust fund. Wolf cred organic, terry richardson aesthetic four loko occupy vegan chillwave readymade deep... <a href="#">Read more</a>

                    </p>
                </article>
                <article>
                    	<h3>Working with Photoshop</h3>

                    <p>Cosby sweater odd future gluten-free...

CSS

html, body {
    margin:0;
    padding:0;
}
.panel * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.panels {
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.panel {
    width:100%;
    height:100%;
    position:absolute;
    opacity:0;
    top:0;
    left:0;
}
.panel .content {
    position:absolute;
    /* must set the top,  bottom, to have the scroll effect*/
    top:0;
    bottom:0;
    overflow:hidden;
    overflow-y:auto;
}
.slideLeftIn {
    z-index:100;
    opacity:1;
    -webkit-animation: kfSlideLeftIn 1.3s;
}
.slideLeftOut {
    -webkit-animation: kfSlideLeftOut 1.3s;
}
.slideRightIn {
    opacity:1;
    z-index:100;
    -webkit-animation: kfSlideRightIn 1.3s;
}
.slideRightOut {
    -webkit-animation: kfSlideRightOut 1.3s;
}
@-webkit-keyframes kfSlideLeftIn {
    0% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
    100% {
        -webkit-transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}
@-webkit-keyframes kfSlideLeftOut {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity:1;
    }
    99% {
        -webkit-transform: translate3d(-99%, 0, 0);
        opacity:1;
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity:0;
    }
}
@-webkit-keyframes kfSlideRightIn {
    0% {
        -webkit-transform: translate3d(-100%, 0, 0);
        opacity: 1;
    }
    100% {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
    }
}
@-webkit-keyframes kfSlideRightOut {
    0% {
        -webkit-transform: translate3d(0%, 0, 0);
        opacity:1;
    }
    99% {
        -webkit-transform: translate3d(99%, 0, 0);
        opacity:1;
    }
    100% {
        -webkit-transform: translate3d(100%, 0, 0);
        opacity:0;
    }
}
/******************/
 #panel1 {
    background: #F06060;
}
#panel2 {
    background:#FA987D;
}
#panel3 {
    background:#4BBE8E;
}
#left, #right {
    position:absolute;
   ...

JavaScript

function Slider(el) {
    var curr = 0,
        panels = $(el).find('.panel');


    function next(i, total) {
        return (i + 1) % total;
    }

    function prev(i, total) {
        return --i < 0 ? total - 1 : i;
    }

    function slideLeft(ev) {
        $(panels[curr]).removeClass('slideLeftIn slideRightIn').addClass('slideLeftOut');
        $(panels[prev(curr, panels.length)]).removeClass('slideLeftOut');
        curr = next(curr, panels.length);
        $(panels[curr]).removeClass(' slideRightOut').addClass('slideLeftIn');
    }

    function slideRight() {
        $(panels[curr]).removeClass('slideLeftIn slideRightIn').addClass('slideRightOut');
        $(panels[next(curr, panels.length)]).removeClass('slideRightOut');
        curr = prev(curr, panels.length);
        $(panels[curr]).removeClass(' slideLeftOut').addClass('slideRightIn');
    }

    return {
        left: slideLeft,
        right: slideRight
    }

}

var slider = Slider('.panels');
$("#left").click(slider.right);
$("#right").click(slider.left);