Question

我尝试将scollorama（http://johnpolacek.github.com/scrollorama/和此处：https://flinc.org/pendler）整合到使用Bootstrap 2完成的响应式网站中。现在在网页中间是带有scrolllorama效果的图像。但是由于响应性，这个图像在不同的设备上当然有不同的尺寸。有人建议如何将这些功能结合起来？

此网站的布局与我的相同：https://flinc.org/pendler 但他们没有使用响应能力。我想。

非常感谢!!

Answer 1

我这样做的方法是通过以下方法在scrollorama对象中使用scrollorama blocks数组（在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");

Scrollorama和响应式网页设计

1 个答案: