jquery - Superscrollorama +响应式设计=不能正确流动

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

最佳答案

戴夫

在我看来，您的网站实际上没有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取决于样式表的工作方式，因此您可以做一些不同的事情，但这是基本的整体方法。

关于jquery - Superscrollorama +响应式设计=不能正确流动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14387295/