0

我正在尝试为我的动画创建偏移量，因此它们在 pin 帧位于顶部之前开始，甚至在新部分进入视口时立即开始动画。

我已经尝试将偏移量放在附加动画的末尾，但这不起作用......

有任何想法吗？

var controller = $.superscrollorama({
        triggerAtCenter: true
    });
        // set duration, in pixels scrolled, for pinned element
            var pinDur = 6500;

            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append([
                    TweenMax.to($('#logo'), .5, {css:{left:'34%'}}),
                    TweenMax.to($('#left, #left2'), .5, {css:{top:'-1055px'}}),
                    TweenMax.to($('#right, #right2'), .5, {css:{top:'-1327px'}})                        
                    ])
                .append([
                    TweenMax.to($('#flash'), .01, {css:{display: 'none'}})
                    ])
                .append([
                    TweenMax.to($('#flash'), .02, {css:{display: 'block'}}),
                    TweenMax.to($('#logo, #left, #right'), .01, {css:{display:'none'}}),
                    TweenMax.to($('#flash, #frame, #stand, #wrapper'), .02, {css:{backgroundColor:'white'}}),
                    TweenMax.to($('#flash'), .02, {css:{display:'none'}})
                    ])
                .append(TweenMax.to($('#this_pin-frame-unpin'), .5, {css:{top:'100px'}}));

            // pin element, use onPin and onUnpin to adjust the height of the element
            controller.pin($('#wrapper'), pinDur, {
                anim:pinAnimations, 
                onPin: function() {
                    $('#heelwrapper').css('height','100%');
                }, 
                onUnpin: function() {
                    $('#wrapper').stop().animate({height: '900px'}, 10);
                }
            });
4

2 回答 2

0

Ok, you can archieve this by adding an offset to th 'onPin function':

onPin: function() {
     $('#heelwrapper').css('height','100%');
},
offset: 800 //negative amount of pixels when the animation should start
于 2013-10-10T13:11:13.580 回答
0

我看到您在控制器中包含 triggerAtCenter: true 。triggerAtCenter: false 没有满足您的需求的具体原因是什么？

triggerAtCenter：当相应元素的原点位于滚动区域的中心时触发动画（true）。可以在此处将其更改为顶部/左侧边缘 (false) - 默认值：true

另一个答案的问题是，如果您的内容是动态的（例如，如果您有一个响应式网站），您的视口偏移像素高度可能会发生变化。

于 2013-10-15T17:14:30.183 回答