Align div correctly on viewport when scrolling

Question

I'm doing a parallax website wherein when the user scrolls the sliders will slide from the left and align within the viewport. The issue is that I have scroll the mousewheel many times in order for the slide to align. Is there a way to make the slide align within the viewport with just one scroll.

Here is my work in progress. I'm using skrollr( http://prinzhorn.github.io/skrollr/ ) for my parallax designs

http://creativekidsstudio.com/ck/

HTML

<section  class="slide slide_1">
    <div class="slide_content"  >
        <h2>You see a blank canvas,<br/> we see potential</h2>
        <img src="<?php bloginfo('template_url'); ?>/images/canvas.png" alt="Canvas" />
    </div>
 </section>

<section data-0="transform:translateX(100%); " data-1500="transform:translateX(0%) " class="slide slide_2">
    <div class="slide_content"  >
        <h2>You see a brush,<br/> we see a dream</h2>
        <img src="<?php bloginfo('template_url'); ?>/images/brush.png" alt="brush" />
    </div>
</section>

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)" class="slide slide_3">
    <div class="slide_content"  >
        <h2>You see a ball of clay,<br/> we see a world of creativity</h2>
        <img src="<?php bloginfo('template_url'); ?>/images/clay.png" alt="clay" />
    </div>
</section>

<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)" class="slide slide_4">
    <div class="slide_content">
        <h1>Every child is a creative kid.</h1>
        <img src="<?php bloginfo('template_url'); ?>/images/kid.png" alt="kid" />
    </div>
</section>

CSS

.slide{width:100%; height:100%; position:fixed}


.slide_1{background-image:url('images/patternfinal1.jpg'); z-index:1}
.slide_2{background-image:url('images/patternfinal2.jpg');  z-index:2}
.slide_3{background-image:url('images/patternfinal3.jpg');  z-index:3}
.slide_4{background-image:url('images/patternfinal4.jpg'); z-index:4}
.creative_content{ z-index: 10; position: relative; background-color: white; padding:20px 0; top:5%}

.slide_content{
    text-align:center; 
    height:100%; 
    position:absolute; 
    top:15%; 
    margin:0 auto;
    left:0; 
    right:0; 
    z-index:1; 
    font-family: 'anarchisticno_leaders..', sans-serif; 
    font-size:70px;
    color:#333
}

.slide_1 img, 
.slide_2 ing, 
.slide_3 img, 
.slide_4 img{display:block; margin:0 auto}

Here is the javascript that i have implemented but the problem is it seems to stop midway when i scroll.

JAVASCRIPT

<script>
    var tempScrollTop = 0;
    var currentScrollTop = 0;
    var scrollHeight = $(window).height();
    var newHeight = 0;


    function scrollIt() {

    $(window).off('scroll', scrollIt);

    currentScrollTop = $(window).scrollTop();


    if (tempScrollTop < currentScrollTop) {
        newHeight = newHeight + scrollHeight;
        $('html').animate({scrollTop: newHeight}, 500, function(){
            var setScroll = setTimeout(function(){
            console.log('Animation Complete');
            tempScrollTop = $(window).scrollTop();
            $(window).on('scroll', scrollIt);
            }, 10);
        }); 

    } else if (tempScrollTop > currentScrollTop){
       newHeight = newHeight - scrollHeight;
       $('html').animate({scrollTop: newHeight}, 500, function(){
            var setScroll = setTimeout(function(){
            console.log('Animation Complete');
            tempScrollTop = $(window).scrollTop();
            $(window).on('scroll', scrollIt);
            }, 10);
        }); 
    }


}

$(window).on('scroll', scrollIt);
</script>

Answer 1

Im not sure if you mean you want them to transform faster, or if you want them to stay on screen while you scroll longer.

Option 1: transform faster:

Currently you have your data- attributes for skrollr set to scroll your slide from 100->0% over 1000px. Currently you have:

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">

If you'd like it to tansform faster, you just need to changes these numbers to accommodate the speed at which you'd like it to transform. Example:

<section data-1500="transform:translateX(100%); " data-1600="transform:translateX(0%)">

---

Option 2: stay on screen longer:

If you want them to stay on screen longer you just need to increase the distance between the finish of one slide's transform and the beginning of the next. Currently you have:

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-2500="transform:translateX(100%); " data-3500="transform:translateX(0%)">
</section>

If you'd like them to stay on screen longer try something like this:

<section data-1500="transform:translateX(100%); " data-2500="transform:translateX(0%)">
</section>
<section data-3500="transform:translateX(100%); " data-4500="transform:translateX(0%)">
</section>

Hope this helps