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

使用Superscrollorama箭头动画在这个特定的网站：http://itsuptous.org/new_site Superscrollorama +响应式设计=不流正确

这是一个负责任的设计了。 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'}}));

来源

2013-01-17 Dave Rottino

戴夫，

实际上它并不看（我），你的网站有一个问题与Superscrollerama，它看起来像你的问题看到的原因是内联CSS对页面元素的改变。例如，当动画被触发时，它只是随着时间的推移CSS'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")}}));

当然，因人而异取决于如何样式表的作品，所以你可能会做不同的事情，但是这是最基本的总体方法。

来源

2013-02-05 20:10:52

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

回答

相关问题