滾動時在視口上正確對齊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>

希望這可以幫助