Scorrimento del browser a bassa velocità delle immagini: jquery, browser, scroll, jquery-animate

Sto cercando di costruire una pagina in cui posso avere 3 "livelli": 1 - sfondo, 2 - immagini e 3 - immagini.

Lo ottengo già usando il animate jQuery e funziona perfettamente quando "mlavorando con il menu di navigazione. Tuttavia mi piacerebbe avere lo stesso effetto quando gli utenti scorrono la console / finestra del browser (Internet Explorer, Chrome, Firefox ...). Non so se sono chiaro quindi questa è una pagina che ho trovato con un effetto simile: http://johanreinhold.com/

Sto cercando da un po 'e non l'ho ancora capito. Come risolvo questo problema?

Il mio codice per animate è

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

risposte:

2 per risposta № 1

Neanche io sono del tutto sicuro di cosa intendi (quindi le mie scuse a te e @mrtsherman se la sua risposta è quella che desideri), ma penso che tu stia chiedendo come ottenere un effetto di scorrimento parallasse. Il sito a cui ti sei collegato utilizza 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

L'ho spostato su jQuery (in modo approssimativo e pronto) e l'ho inserito in un JSFiddle qui 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; }

Il codice si aggancia al file scroll evento e regola le posizioni delle immagini quando si attiva. La quantità di scorrimento è controllata dalla proprietà di attrito, quindi impostandola su 0.5 come nell'esempio significa che dovrebbero muoversi alla metà della velocità del testo. Risulta (anche se penso sia ovvio in retrospettiva) che è importante impostare gli elementi di parallasse per avere position: fixed o farai dei brutti salti.

Come ho detto, questo è un po 'approssimativo e pronto (in particolare altri siti spesso eseguono solo l'effetto di parallasse in una certa finestra verticale), quindi potresti voler colpire Google per jquery di scorrimento di parallasse o qualcosa del genere e dai un'occhiata a come qualcun altro lo ha fatto correttamente. :)

---

3 per risposta № 2

La tua domanda è difficile da capire. Nella pagina che hai collegato, non vedo alcun override del comportamento di scorrimento, ma penso che tu voglia che ogni segno di spunta della rotella di scorrimento ti rimandi alla sezione successiva.

Dovrai rubare l'evento di scorrimento e impedire il comportamento predefinito. Quindi scopri come vuoi che le cose scorrano.

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();
}

---