Question

我正在使用“ scrollorama ”插件来实现视差网站

我希望将动画元素的父div固定一段特定的时间段，然后取消固定父div并为下一段代码设置动画....

请参阅此link以了解我的意思

在这个网站上我想延迟动画的第一部分，而网站标识“原型”移动到其固定位置，然后第一个孩子开始进入场景所以我想防止li开始向上移动，下一部分进入场景

我知道此操作被称为“ pin ”，但我不知道如何使用它...

<body>
<a class="fixed" href="prototype.html"><img src="images/logo.png"/></a>
<ul class="curtains">
    <li>
        <div class="cont clearfix">
            <ul>
                <li class="img_1"><img src="images/01.jpg"/></li>
                <li class="img_2"><img src="images/02.jpg"/></li>
                <li class="img_3"><img src="images/03.jpg"/></li>
                <li class="img_4"><img src="images/04.jpg"/></li>
                <li class="img_5"><img src="images/05.jpg"/></li>
                <li class="img_6"><img src="images/06.jpg"/></li>
            </ul>
        </div>
    </li>
</ul>

$('.curtains > li').css({position: 'fixed',height:'100%'});

$('.curtains').curtain();

var scrollorama = $.scrollorama({
    blocks:'.curtains'
});

$( window ).scroll(function(){
    if(parseInt($('.fixed').css('top'),"10") > '27'){
        $('.fixed').css('top',screen_H*0.5 - $(document).scrollTop()+'px');
    }
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_1',{
    delay:400, duration:150, property:'left', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_2',{
    delay:400, duration:200, property:'top', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_3',{
    delay:400, duration:190, property:'right', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_4',{
    delay:400, duration:140, property:'left', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_5',{
    delay:400, duration:180, property:'bottom', start:-600, end:0
}); 

scrollorama.animate('.curtains > li:nth-child(1) .img_6',{
    delay:400, duration:120, property:'opacity', start:0, end:1
});

Answer 1

你可以先固定主div并在其chid div上运行动画。固定

    controller.pin($('#examples-2'), 3000, {
  anim: (new TimelineLite())
    .append(
      TweenMax.fromTo($('#move-it'), .5, 
        {css:{left: -200, top: 500}, immediateRender:true}, 
        {css:{top: -400}})
    )
    .append(
      TweenMax.to($('#move-it'), .5, 
        {css:{left: 0}})
    )
});

在这个代码示例中 - 2是主div，它将在它到达页面中心时固定，3000是像素（整个动画将在3000像素中完成）。然后移动它 - 它将设置动画的子div如代码所示。删除pin。

controller.removePin('#examples-2', false);

您可以在http://johnpolacek.github.io/superscrollorama/

上查看有关如何使用图钉的详细信息

如何使用scrollorama插件固定特定时期的父div

1 个答案: