使用SuperScrollorama从页面顶部删除图像

Question

我使用SuperScrollorama在一个页面(滚动)网站上触发了很多动画。所有从左边或右边滑进来的图像和文本都能完美地工作。问题是，当我试图从屏幕顶部插入图像时，图像在用户滚动的整个过程中都会上下弹跳，直到他们最终到达图像应该“坐”的程度(基本上返回到原来的位置，然后下降到应该停留的位置，然后再次恢复等等).以下是我的相关代码：

HTML:

<div id="about-pin-div">
    <div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div>
</div>

CSS:

#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame img { margin-top: -200px; }

JAVASCRIPT:

$(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween('#about-pin-div', TweenMax.from( $('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600);

        // set duration, in pixels scrolled, for pinned element
            var pinDur = 1000;
            // create animation timeline for pinned element
            var pinAnimations = new TimelineLite();
            pinAnimations
                .append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}}))

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

提前感谢您的帮助！

Answer 1

我认为你在这里有一些问题，我会尝试指出一些问题，我已经用这个插件。

(1)如有疑问，请为您的引脚关闭pushFollowers。

为了不继续重复我自己

Play through pinned elements in superscrollorama

janpaepke写得很好，因为他自己也有同样的问题。

(2)不要用边距来调整位置，IE处理边距时会很糟糕，有时取决于上下文，它的工作方式与你想要的不一样。

When to use margin vs padding in CSS

在解释这件事上做得更好，我就能做到。

(3)我不明白需要触发引脚函数来调整#about- pin -div的高度。您只是一次又一次地重置我看不到的起始值。除非您试图补偿固定元素的自动调整，但是(1)中的工作应该能够解决这个问题。