Скроллорама и отзывчивый веб-дизайн - PullRequest
Новая
       12

Скроллорама и отзывчивый веб-дизайн

1 голос
/ 29 марта 2012

Я пытаюсь интегрировать scollorama (http://johnpolacek.github.com/scrollorama/ и здесь: https://flinc.org/pendler) в адаптивный сайт, созданный с помощью Bootstrap 2. Теперь в центре веб-страницы находится изображение с эффектами скроллорамы. но это изображение имеет разный размер на разных устройствах благодаря отзывчивости. Кто-нибудь предлагает, как объединить эти функции?

этот сайт имеет тот же макет, что и мой: https://flinc.org/pendler но они не используют отзывчивость. я бы хотел.

спасибо большое !!

1 Ответ

0 голосов
/ 12 августа 2013

То, как я это сделал, было сделать массив блоков скроллорамы (найденный в плагине 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");
...