CodePen Content Slider

Question

I am trying to create something similar.

Does anyone know what kind of jQuery plugin has been used in it.

It seems pretty straight forward and I can't seem to figure it out. Right now I'm using this for plugin

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

and the given js code in addition to that. My problem is that I can't seem to make it animate to the other page.

Thanks for the response.

no plugin is used just a simple script. – ProllyGeek May 01 '14 at 03:43 — ProllyGeek, May 01 '14 at 03:43

score 0 · Answer 1 · answered May 01 '14 at 03:45

The animation is done via css translate , and little script controls behaviour during animation that is all , no plugins are used !

css:

html {
  overflow-y: hidden;
}

html, body, #wrapper {
  height: 100%;
    width: 100%;
    margin: 0;
}

nav {
    position: fixed;
    z-index: 100;
}

.main-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#wrapper {
    position: absolute;
    top: 0;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.8,0,.2,1);
}

.slide0 {-webkit-transform: translateY(0%);}
.slide1 {-webkit-transform: translateY(-100%);}
.slide2 {-webkit-transform: translateY(-200%);}
.slide3 {-webkit-transform: translateY(-300%);}
.slide4 {-webkit-transform: translateY(-400%);}

JS:

var slider = $('.slider'),
    wrapper = $('#wrapper'),
    animating = false,
    current = 0,
    lengthDiv = slider.length,
    delay = 1500;

slider.on('click', function(e){
    var anchor = $(this);
    if(!animating){
        animating = true;
        current = anchor.parent().index();
        wrapper.removeClass().addClass('slide'+current);
        setTimeout(function(){
            animating = false;
        }, delay);
        e.preventDefault();
    }
});

$(document).keydown(function(e){var key = e.keyCode;if(key == 38 || key == 40)e.preventDefault();});
$(document).keyup(function(e){
    if(!animating){
        var key = e.keyCode;
        if(key == 38 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(key == 40 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
});
$(document).mousewheel(function(e, deltaY){
    if(!animating){
        if(deltaY > 0 && current > 0){
            $(slider[current - 1]).trigger('click');
        }else if(deltaY < 0 && current < lengthDiv - 1){
            $(slider[current + 1]).trigger('click');
        }
    }
    return false;
});

That's what I thought, I used the JS file and I still can't seem to animate it. Would you know where the problem could potentially lies? It doesn't work at all — Nabeel M, May 01 '14 at 18:21

CodePen Content Slider

1 Answers1