0

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

我想在特定时期固定动画元素的父 div，然后取消固定父 div 并为下一段代码设置动画......

请查看此链接以了解我的意思

在这个站点中，我想在站点徽标“原型”向上移动到其固定位置时延迟动画的第一部分，然后第一个 li 孩子开始进入场景，所以我想阻止 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
});
4

1 回答 1

0

您可以先固定主 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 它将动画，如图所示代码。删除销。

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

您可以在http://johnpolacek.github.io/superscrollorama/上查看有关如何使用 pin 的详细信息

于 2014-02-04T12:39:19.870 回答