Superscrollorama + 响应式设计 = 不能正确流动答案

【问题标题】：Superscrollorama + responsive design = does not flow correctlySuperscrollorama + 响应式设计 = 不能正确流动
【发布时间】：2013-02-06 04:10:52
【问题描述】：

使用 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'}}));

【问题讨论】：

标签： jquery css responsive-design

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

【讨论】：