滚动时在视口上正确对齐div

Question

我正在制作一个视差网站，其中，当用户滚动时，滑块将从左侧滑动并在视口内对齐。 问题是我已经多次滚动鼠标滚轮才能使幻灯片对齐。 有没有一种方法可以使幻灯片仅在一个滚动中在视口中对齐。

这是我正在进行的工作。 我正在使用skrollr（ http://prinzhorn.github.io/skrollr/ ）进行视差设计

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}

这是我已经实现的javascript，但问题是当我滚动时它似乎中途停止了。

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

我不确定您是要让它们更快地变换，还是要让它们在滚动更长的时间时留在屏幕上，我不确定。

选项1：转换速度更快：

当前，您已将skrollr的data-属性设置为将幻灯片从100-> 0％滚动到1000px以上。 目前您有：

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

如果您希望它更快地变形，则只需更改这些数字以适应其转换的速度即可。 例：

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

---

选项2：在屏幕上停留更长时间：

如果希望它们在屏幕上停留的时间更长，则只需要增加一张幻灯片变换的结束与下一张幻灯片的开始之间的距离即可。 目前您有：

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

如果您希望他们停留在屏幕上更长的时间，请尝试以下操作：

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

希望这可以帮助