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和響應式網頁設計

回答

相關問題