Scrollorama和响应式网页设计 [英] Scrollorama and Responsive Webdesign

问题描述

我尝试集成scollorama(http://johnpolacek.github.com/scrollorama/，在这里: https://flinc .org/pendler )进入使用Bootstrap 2完成的响应式网站. 现在，网页中间是带有scrollorama效果的图像.但是由于响应能力，此图像在不同设备上的大小当然会有所不同.有人建议如何将这些与功能结合起来吗?

i try to integrate scollorama (http://johnpolacek.github.com/scrollorama/ and here: https://flinc.org/pendler) into a responsive website done with Bootstrap 2. now in the middle of the webpage is an image with the scrollorama effects. but this image has of course different sizes on different devices thanks to responsiveness. Anybody suggestions how to combine these to features?

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

this site has the same layout as mine: https://flinc.org/pendler but they do not use responsiveness. i would like to.

非常感谢！

推荐答案

我这样做的方法是通过以下方法使scrollorama对象中可用的scrollorama块数组(在scrollorama插件中找到):

The way I did it was to make the scrollorama blocks array (found in the scrollorama plugin) available in the scrollorama object via the following:

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

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

然后，通过一点调查，我遍历了每个块和动画，并以它们的新计算量更改了相关动画.看看console.log中的block对象；所有值都由相同的名称设置，并在插件中引用以进行滚动事件的计算.

Then, with a bit of investigation, I looped through every block and animation and altered the relevant animations by their new calculated amounts. Have a look at the block object in console.log; all the values are set by the same names and are referred to in the plugin for calculations on scroll events.

这是我将在窗口的resize事件中执行的操作的一个示例:

This is an example of what I would then do on the window's resize event:

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和响应式网页设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！