Scrollorama and Responsive Webdesign

问题

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?

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

thanks a lot!!

回答1:

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;

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.

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

来源：https://stackoverflow.com/questions/9925174/scrollorama-and-responsive-webdesign