0

我正在使用 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%');
                }
            });
});

提前感谢您的帮助！

4

1 回答 1

0

我认为您在这里遇到了许多问题，我将尝试指出我在使用此插件时遇到的一些问题。

(1) 如有疑问，请关闭您的 pin 的 pushFollowers。

为了不继续重复自己

在 superscrollorama 中播放固定元素

janpaepke 在编写这项工作方面做得非常出色，因为他自己也有同样的问题。

(2) 永远不要使用边距来调整位置，IE 有时会根据上下文处理不好的边距，这不会按照您想要的方式工作。

何时在 CSS 中使用边距与内边距

然后我可以更好地解释它。

（3）我不明白需要触发pin函数来调整#about-pin-div的高度。您只是一遍又一遍地重置起始值，我看不到它会改变。除非您试图补偿固定元素的自动调整，但 (1) 中的解决方法应该可以解决这个问题。

于 2013-10-15T17:03:19.167 回答