1

我正在使用 Scrollorama 进行滚动动画，并且在固定容器下方的元素存在垂直间距问题

http://patrick.tbfdev.com/about-tahiti.php

当您向下滚动时，您会注意到一旦第一个容器固定，下方的元素（蓝天图像）就会下降到页面下方。这不是期望的行为。所需的行为是固定对象下方的元素保持耦合。

这是我的 JS：

$(document).ready(function() {
var controller = $.superscrollorama({
    triggerAtCenter: false,
    playoutAnimations: true
});


// set duration, in pixels scrolled, for pinned element
var pinDur = 900;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();


    pinAnimations
        .append([
            TweenMax.to($('#slide-a1'), 1.5, {css:{right:'+=2200px', ease:Bounce.easeOut}, delay:0.2}),
            TweenMax.to($('#slide-a2'), 1.2, {css:{right:'+=2400px', ease:Bounce.easeOut}, delay:0}),
            TweenMax.to($('#slide-a3'), 1.3, {css:{right:'+=3800px', ease:Bounce.easeOut}, delay:.2}),
            TweenMax.to($('#slide-a4'), 1.5, {css:{right:'+=5400px', ease:Bounce.easeOut}, delay:.4}),
            TweenMax.to($('#slide-a5'), 1.6, {css:{right:'+=6250px', ease:Bounce.easeOut}, delay:.6})
            ]
        , -1)
        .append([
            TweenMax.to($('#info-a1'), 1.2, {css:{right:'+=2200px', ease:Bounce.easeOut}, delay:0.1}),
            TweenMax.to($('#info-a2'), 1.1, {css:{right:'+=2400px', ease:Bounce.easeOut}, delay:0.5}),
            TweenMax.to($('#info-a3'), 1.0, {css:{right:'+=2800px', ease:Bounce.easeOut}, delay:1.1}),
            TweenMax.to($('#info-a4'), 1.3, {css:{right:'+=2400px', ease:Bounce.easeOut}, delay:1.4})

            ]
        , -2.4)

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

0 回答 0