Браузерная прокрутка медленная скорость изображения - PullRequest
Новая
       8

Браузерная прокрутка медленная скорость изображения

0 голосов
/ 06 ноября 2011

Я пытаюсь создать страницу, где я могу иметь 3 "слоя".1 - фон, 2 - изображения и 3 - изображения.

Я уже добился этого с помощью функции animate jQuery, и она отлично работает, когда я работаю с меню навигации.Однако я хотел бы иметь тот же эффект, когда пользователи прокручивают консоль / окно браузера (Internet Explorer, Chrome, Firefox ...).Я не знаю, проясняюсь ли я, так что это страница, которую я нашел с похожим эффектом: http://johanreinhold.com/

Я ищу некоторое время, но пока не получил.Как я могу решить эту проблему?

Мой код для animate - 

function goto(id)
{
    $('html,body').animate({scrollTop: $("#"+id).offset().top},2000);
    $('html,body').clearQueue();
}

Ответы [ 2 ]

3 голосов
/ 06 ноября 2011

Ваш вопрос сложен для понимания.На странице, на которую вы ссылаетесь, я не вижу переопределения поведения прокрутки, но я думаю, что вы хотите, чтобы каждый тик колеса прокрутки отправлял вас в следующий раздел.

Вам нужно будет украстьпрокрутите событие и предотвратите поведение по умолчанию.Затем выясните, как вы хотите прокручивать вещи.

http://jsfiddle.net/VTEt8/1/

HTML 

<div id="a" class="section active">a</div>
<div id="b" class="section">b</div>
<div id="c" class="section">c</div>
<div id="d" class="section">d</div>
<div id="e" class="section">e</div>
<div id="f" class="section">f</div>

jQuery 

//Capture mousewheel event for document window.
//we have to use two events because Firefox uses DOMMouseScroll.
$(document).bind('mousewheel', function(e) {
    HandleScrollEvent(e, -1 * e.wheelDelta);
}).bind('DOMMouseScroll', function(e) {
    HandleScrollEvent(e, e.detail);
});

function HandleScrollEvent(e, wheelDir) {
    //Cancel the scroll event so the page doesn't scroll.
    e.preventDefault();

    //Find current and next sections.
    var curElement = $('.active');
    var nextElement
    if (wheelDir > 0) 
        nextElement = $(curElement).next('.section');
    else {
        nextElement = $(curElement).prev('.section');
    }

    //If we have a another section then go to it.
    if ($(nextElement).length > 0) {
        //set class of active section
        $(curElement).removeClass('active');
        $(nextElement).addClass('active');

        //Scroll to next section through animation.
        goto($(nextElement).attr('id'));
    }
}

function goto(id) {
    console.log(id);
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 500);
    $('html,body').clearQueue();
}
2 голосов
/ 06 ноября 2011

Я тоже не совсем уверен, что вы имеете в виду (так что я извиняюсь перед вами и @ mrtsherman , если его ответ тот, который вы хотите), но я думаю, что вы спрашиваете, как получить параллаксэффект прокрутки.Сайт, на который вы ссылаетесь, использует MooTools 

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {
        item.store('top', parseInt(item.getStyle('top')));
        item.store('y', item.getPosition().y);
        item.store('friction', parseFloat(item.get("data-friction")));
    });

    this.addEvent('scroll', verticalParallax);

function verticalParallax(e) {

    var windowScrollY = window.getScroll().y;

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {

        if ((windowScrollY) >= item.getPosition().y)
            item.setStyle("top", item.retrieve('top') + (windowScrollY - item.retrieve('y')) * item.retrieve('friction'));
    });
};

jQuery

Я переместил его в jQuery (грубым и готовым способом) и воткнул егов JSFiddle здесь http://jsfiddle.net/meloncholy/FhxZ3/1/

    $(function ()
    {
        $(".float").each(function ()
        {
            var $this = $(this);

            $this.data("startTop", $this.offset().top);
        });

        $(window).scroll(function ()
        {
            var documentScrollTop = $(document).scrollTop();

            $(".float").each(function ()
            {
                var $this = $(this);

                $this.offset({ top: $this.data("startTop") + documentScrollTop * $this.data("friction"), left: $this.offset().left });
            });
        });
    });

CSS 

    .float { display: block; left: 100px; position: fixed; }

        #float-1 { top: 50px; }

        #float-2 { top: 400px; }

        #float-3 { top: 850px; }

    .content { font-size: 48px; position: relative; z-index: 2; }

Код подключается к событию scroll и корректирует позиции изображений при его запуске,Объем прокрутки контролируется свойством трения, поэтому, установив его на 0.5, как в примере, они должны двигаться с половиной скорости текста.Оказывается (хотя я думаю, что это очевидно в ретроспективе), важно установить для элементов параллакса значение position: fixed, иначе вы получите несколько неприятных прыжков.

Как я уже сказал, это немного грубо и готово (в частности, другие сайты часто запускают эффект параллакса только в определенном вертикальном окне), поэтому вы можете захотеть нажать Google для jralery прокрутки параллакса или что-то еще и посмотрите, как кто-то еще сделал это правильно.:)

...