Scroll activated page slider

by audetwebdesign

HTML

<div class="wrapper">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
</div>

CSS

.wrapper {
    position:absolute;
    background:red;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow: hidden;
}
.slide {
    width:100%;
    height:100%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.slide-1 {
    position: absolute;
    top:0;
    left:0;
    background:blue;
}
.slide-2 {
    position:absolute;
    top:100%;
    left:0;
    background:green;
}
.slide-2.active {
    position:fixed;
    top:0;
    left:0;
}

JavaScript

$(".wrapper").on('mousewheel DOMMouseScroll', function (event) {
    if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
        $('.slide-2').addClass('active');
    } else {
        $('.slide-2').addClass('active');
    }
});