Animation Exploration

webkit only

by levchenko_d

HTML

<div class="_parent">
    <ul class="_nav">
        <li id="0" class="__this">One</li>
        <li id="1">Two</li>
        <li id="2">Three</li>
    </ul>
    <div class="wrap">
        <ul class="_block">
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
        </ul>
        <ul class="_block">
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
        </ul>
        <ul class="_block">
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
            </li>
            <li>
                <span></span>
                <p>
                    We've got that covered. Use our optimized, secure servers to run your crowdfunding site.
                </p>
     ...

CSS

body{
    margin: 20px;
    font-family: sans-serif;
}

body, ul{
    padding: 0;
}

._parent{
    width: 100%;
    overflow: hidden;
}

._nav li{
    display:inline-block;
    cursor: pointer;
    margin-right: 10px;
}

._nav li.__this{
    color: #26a713;
}


._block span{
    display: block;
    width: 100%;
    height: 200px;
    background: url('http://vignette3.wikia.nocookie.net/simpsons/images/a/aa/Hugo_Simpson2.png/revision/latest?cb=20141209024428') no-repeat center center;
    background-size: 100px;
    
    -webkit-transform-origin-y: 200px;
    transform-origin-y: 200px;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.__slide ._block span{
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}

.__slide.__right ._block span{
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

.wrap {
  height: 350px;
  white-space: nowrap;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

ul._block {
  display: inline-block;
  width: 100%;
}
._block li{
    list-style-type: none;
    width: 30%;
    float: left;
}

._block li:nth-of-type(2){
    margin: 0 5%;
}

._block p{
    white-space: normal;
    font-size: 11pt;
}

JavaScript

var Slider = (function(){
    
    var slideId = 0;
    
    function slide(id){
        var wrap = document.querySelector('.wrap'),
            dir = id > slideId ? '__left' : '__right', 
            val = id * (-100) + '%';
        if(slideId != id){
            slideId = id;
            
            document.querySelector('.__this').className = '';
            document.getElementById(slideId+'').className = '__this';
            
            wrap.style.webkitTransform = 'translate('+val+')';
            wrap.style.transform = 'translate('+val+')';
            
            wrap.className = 'wrap __slide ' + dir;
            
            
            setTimeout(function(){
                wrap.className = 'wrap';
            }, 250)
        }
    }
    
    return {
        slide: slide
    }
    
}());

document.getElementById('0').onclick = function(){
Slider.slide(0);
}

document.getElementById('1').onclick = function(){
Slider.slide(1);
}

document.getElementById('2').onclick = function(){
Slider.slide(2);
}