Superscrollorama +响应式设计=流程不正确

Question

在这个特殊的站点上使用Superscrollorama在箭头中设置动画：http://itsuptous.org/new_site

这也是一个响应式的设计。960+、768、480和320。使用媒体查询来触发不同的布局。如果我以任何浏览器大小加载网站，箭头动画效果都是正确的，当我扩展或最小化窗口时，它会移动到错误的位置。不知道这是怎么回事。有谁有什么想法吗？

我有绝对位置的元素，以防止水平滚动条。

下面是jQuery Superscrollorama代码：

    jQuery(document).ready(function() {
        //ACTIVATE BUTTON FOR SMOOTH SCROLLING
        jQuery("#scroll_button").scrollTo('#section_two_outer');

        //MOVE ARROWS ON SCROLL
        var controller = jQuery.superscrollorama();
        //INDIVIDUAL ELEMENT TWEEN
        controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}}));
        controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
        controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}}));

Answer 1

戴夫,

实际上(在我看来)你的站点并没有出现Superscrollerama的问题，看起来你看到的问题是由于内联CSS对页面元素所做的改变造成的。例如，当动画被触发时，它只是随着时间的推移对CSS ' left‘属性进行动画处理，但一旦完成，left属性就会保留在元素上，这会在调整窗口大小时破坏您的布局。

要解决这个问题，我建议只需在动画完成后使用jQuery回调来删除箭头中的内联CSS，这将使您的样式表随后在调整窗口大小时控制它们的位置。最糟糕的情况是，如果动画发生在视区大小改变时(我甚至不确定如何做到这一点)，那么会产生几乎不可察觉的闪烁，所以我认为你可以继续下去了。

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

因此，您可能希望这样做：

jQuery(document).ready(function() {
    //ACTIVATE BUTTON FOR SMOOTH SCROLLING
    jQuery("#scroll_button").scrollTo('#section_two_outer');

    //MOVE ARROWS ON SCROLL
    var controller = jQuery.superscrollorama();
    //INDIVIDUAL ELEMENT TWEEN
    controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}, onComplete:function(){jQuery('.apply_now_arrow_left').css("left","auto")}}));
    controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
    controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}, onComplete:function(){jQuery('.apply_now_arrow_right').css("left","auto")}}));

当然，YMMV取决于样式表的工作方式，因此您可能会做一些不同的事情，但这是基本的总体方法。