我正在尝试为我的动画创建一个偏移量,所以它们在引脚框架位于顶部之前开始,甚至在新部分进入视口后立即启动动画。
我已经尝试将偏移量放在附加动画的末尾,但这不起作用......
有什么想法吗?
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);
}
});
答案 0 :(得分:0)
确定, 你可以通过在'onPin函数'上添加一个偏移来实现这个目的:
onPin: function() {
$('#heelwrapper').css('height','100%');
},
offset: 800 //negative amount of pixels when the animation should start
答案 1 :(得分:0)
我看到你在控制器中包含了triggerAtCenter:true。有什么特定原因,triggerAtCenter:false不符合您的需求?
triggerAtCenter:当相应元素的原点位于scrollarea的中心时,触发动画(true)。这可以在这里更改为顶部/左边(假) - 默认值:true
另一个答案的问题是,如果你的内容是动态的,如果你有一个响应式网站,你的视口偏移像素高度可能会改变。