Question

我正在使用SuperScrollorama在单页（滚动）网站上触发大量动画。从左侧或右侧滑入的所有图像和文本都能完美地工作。问题是当我试图让图像从屏幕顶部掉入时，图像会在用户滚动的整个时间内上下跳动，直到它们最终到达图像应该“坐”的位置（It基本上回到它的原始位置，然后下降到它应该留下的地方，然后再次备份等等）...这是我的相关代码：

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）中的工作应该解决这个问题。

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

1 个答案: