Jquery plugins Scrollorama和响应式Web设计

我试着整合斯科罗玛(http://johnpolacek.github.com/scrollorama/ 在这里：）进入一个响应性强的网站，使用Bootstrap 2完成。 现在网页中间有一个带有ScRulLaMa效应的图像。当然，由于响应速度的原因，这张图片在不同的设备上有不同的尺寸。有人建议如何将这些功能结合起来吗

该场地的布局与我的相同： 但它们不使用响应性。我想去

---

非常感谢

我这样做的方式是通过以下方式在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中的block对象；所有值都由相同的名称设置，并在插件中引用以计算滚动事件

这是我在窗口的

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");

var thirdWindowHeight=Math.round（windowObj.height/3），
bannerHeight=$wrapper.find（“.banner img:first”）.height（），
dragDuration=$body.find（#page”）.height（），
headerHeight=$body.find（#masthead”）.height（），
延迟=旗帜灯-头灯，
动画，
动画
for（var i=0，j=this.scrollorama.blocks.length；i

你有没有想过如何将Scrollorama整合到你的引导站点上？我已经试着让我的工作了好几天了，我甚至不能让动画工作。有什么建议吗？试试下面我的解决方案。。。