Scrollorama和响应式网页设计

我尝试将scollorama（http://johnpolacek.github.com/scrollorama/和here：https://flinc.org/pendler）集成到使用Bootstrap 2完成的响应式网站中。现在在网页中间是一个图像与scrollorama影响。但是由于响应速度的原因，此图片在不同设备上的尺寸当然不同。有人建议如何将这些功能结合起来？Scrollorama和响应式网页设计

本网站与我的布局相同：https://flinc.org/pendler 但他们不使用响应。我想要。

非常感谢！

来源

2012-03-29 Max

你有没有弄清楚如何把Scrollorama您引导网站？我一直试图让我的工作好几天，我甚至无法让动画工作。有什么建议？ – Brian 2013-01-26 00:11:25

试试我的解决方案，下面... – marksyzm 2013-08-13 08:48:40

我做的方式，它是通过以下使scrollorama块阵列（在scrollorama插件中找到）可供scrollorama对象：

//ignore this, just a line example for where to put it... 
scrollorama.destroy = function(){ 
//... 
} 

//add the following: 
scrollorama.blocks = blocks;

然后，带着几分的调查，我通过循环每个块和动画，并通过新的计算量更改相关动画。查看console.log中的块对象;所有的值都由相同的名字设置，并在插件中被引用来计算滚动事件。

这是什么，我会然后在窗口的resize事件做一个例子：

var thirdWindowHeight = Math.round(windowObj.height/3), 
    bannerHeight = $wrapper.find(".banner img:first").height(), 
    dragDuration = $body.find("#page").height(), 
    headerHeight = $body.find("#masthead").height(), 
    delay = bannerHeight - headerHeight, 
    animations, 
    animation; 

for (var i = 0, j = this.scrollorama.blocks.length; i < j; i++) { 

    animations = this.scrollorama.blocks[i].animations; 

    for (var k = 0, l = animations.length; k < l; k++) { 
     animation = animations[k]; 

     $wrapper.find(animation["element"].selector).removeAttr("style"); 

     switch (animation["element"].selector) { 
      case ".banner img": 
       animation.endVal = thirdWindowHeight; 
       animation.duration = bannerHeight; 
       break; 

      case ".drag": 
       animation.delay = delay; 
       animation.duration = dragDuration; 
       animation.endVal = dragDuration; 
       break; 
     } 
    } 
} 

$(window).triggerHandler("scroll");

来源

2013-08-12 15:25:38 marksyzm

Scrollorama和响应式网页设计

回答

相关问题