Question

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

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

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的数据属性设置为在1000px上将幻灯片从100-> 0％滚动。目前你有：

<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>

希望这有帮助

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

1 个答案: