jquery - 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“左”属性设置动画，但是一旦完成，左属性仍然保留在元素上，这会在调整窗口大小时破坏您的布局。

要解决此问题，我建议在动画完成后简单地使用 jQuery 回调来从箭头中删除内联 CSS，这让您的样式表随后在调整窗口大小时控制它们的位置。如果在视口(viewport)大小发生变化时发生动画(我什至不确定如何实现)，那么最坏的情况会产生几乎难以察觉的闪烁，所以我认为你可以继续了。

// 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 取决于您的样式表的工作方式，因此您可能会做一些不同的事情，但这是基本的整体方法。