HTML 5 niezależne przewijanie z perspektywy iluzji

Question

Czy istnieje przykładowy kod HTML, który ustanawia następujący efekt:

Istnieje warstwa pierwszego planu, zawierająca tekst i obrazy. Następnie jest warstwa tła, wyświetlająca obraz, kiedy użytkownik przewija stronę, pierwszy plan przewija ze zwykłą prędkością, ale tło z niższą prędkością.

Stworzy to podobną do Flintstonów sztuczną perspektywę.

Answer 1

Ta "fałszywa perspektywa", o której mówisz, nazywa się parallax.

Istnieje szereg pokazów dostępne online

• http://webdev.stephband.info/parallax.html
• http://dev.jonraasch.com/scrolling-parallax/examples/scrolling-parallax

Proponuję za pomocą obrazu tła na body z background-attachment: fixed a następnie ustawić krótki licznik sprawdzić na stronie długość przewijania.

Na każdej aktualizacji timer, wykrywanie długości przewijania i pomnożyć ją przez modyfikator (słownie 0,1), ustawić nową wartość jako background-position:

$body = $('body'); 

function parallax() 
{ 
    var pageOffsetX, pageOffsetY, modifiedOffsetX, modifiedOffsetY; 

    pageOffsetX = ...//get the offset 
    pageOffsetY = ...//get the offset 
    modifiedOffsetX = pageOffsetX * 0.1; 
    modifiedOffsetY = pageOffsetY * 0.1; 

    $body.css('background-position', modifiedOffsetX + 'px ' + modifiedOffsetY + 'px'); 
    setTimeout(parallax, 100); 
} 

parallax(); 

Modyfikator to ile Tło powinno poruszaj się za każdym piksem, który użytkownik przewija. Konieczne może być dostosowanie przesunięć, jeśli tło nie powinno się powtarzać i może być konieczne zanegowanie przesunięcia w zależności od sposobu uzyskania wartości pageOffset.

Ustawienie limitu czasu zmieni responsywność tła. Możliwe, że uda Ci się uchwycić zdarzenie przewijania myszy, ale musisz również sprawdzić, czy użytkownik przeskoczył stronę przez link itp.

Answer 2

To nie są droidy szukasz, ale efekt końcowy jest bardzo podobny: http://webdev.stephband.info/parallax.html

Warstwy te poruszają się w odpowiedzi na myszy i, w zależności od ich wymiarów (i opcji dla warstwy inicjalizacji), poruszają się w różnych ilościach, w sposób paralaksowy.

Możesz bawić się z tym i dostosować go tak, że efekt paralaksy jest tylko poziome (ustawić opcję xparallax:false).

Answer 3

Sposób, w jaki to zrobię, polega najpierw na ustawieniu dla strony background: fixed, a następnie ciągłym odpytywaniu strony w celu ustalenia, czy zmieniła się wartość window.pageYOffset [1]. Jeśli się zmieniło, możesz przesuwać obraz w górę w górę lub w dół o (połowę | jedną trzecią | jedną czwartą | dowolną) tę liczbę, aby naśladować efekt, o którym mówisz.

Nie będę próbować tego kodować, ale byłbym bardzo zainteresowany, aby zobaczyć twój wynik.

[1] Uwaga: NIE rób tego, dołączając wydarzenie do zdarzenia stronicowania, ponieważ może to zrobić seriously screw up most browsers, ponieważ twitter nauczył się na własnej skórze.