GoldenLine
Zaloguj się
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: Jak uzyskać taki efekt?

Witam!

Czy ktoś wie, jak uzyskać efekt zmiany tła w zależności od położenia suwaka?
Niektóre elementy przesuwają się szybciej, inne wolniej, czasami wręcz "pod prąd".
Guglałem "efekt paralaksy", ale nie znalazłem nic, co by się wiązało.

Być może to jest banalnie proste, ale nie wiem, jak to ugryźć. Będę wdzięczny za jakąkolwiek wskazówkę.

http://www.ok-studios.de/home/
http://www.mosandbows.com.au/
http://kiskolabs.com/
http://whiteboard.is/
http://www.janploch.de/

A to już jest w ogóle wypas (to już mnie co prawda nie interesuje, ale jest świetnie zrobione) :)
http://www.ianjamescox.com/
Link do wypowiedziLink
Michał Ławicki

Michał Ławicki dostawca zadowolenia

Temat: Jak uzyskać taki efekt?

np. http://www.ianlunn.co.uk/blog/code-tutorials/recreate-...
Link do wypowiedziLink

konto usunięte

Temat: Jak uzyskać taki efekt?

Andy, tylko nie przesadzaj, bo tam oczopląsu można dostać na niektórych przykładach : )
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: Jak uzyskać taki efekt?

Michał - dzięki. Poczytam. Wygląda obiecująco.

Miłosz - spokojnie. Najpierw chcę poznać mechanizm a potem pomyślę gdzie i jak tego użyć. Raczej nieczęsto z tego skorzystam ale dobrze wiedzieć co i jak :)
Link do wypowiedziLink

konto usunięte

Temat: Jak uzyskać taki efekt?

Ja mam w planie podłubać menusy, które przy scrollu zostają u góry okna przeglądarki.
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Jak uzyskać taki efekt?

Miłosz Wojaczek:
Ja mam w planie podłubać menusy, które przy scrollu zostają u góry okna przeglądarki.

To jest akurat tylko kilka linijek w js. Przy zdarzeniu "scroll" sprawdzasz ile jest przeskrolowane i jeśli przeskrolowane jest więcej niż wynosi odległość menu od góry strony to nadajesz mu position: fixed i przyklejasz do góry :) Tu masz przykład w jQuery (akurat dzisiaj pisałem):


var menuOffsetTop = $('#menu').offset().top;

$(window).scroll(function() {

  if ($(window).scrollTop() > menuOffsetTop) $('#menu').css({'position':'fixed','top':'0'});

  else if ($(window).scrollTop() <= menuOffsetTop) $('#menu').css({'position':'','top':''});

});
Marcin Gościcki edytował(a) ten post dnia 10.10.12 o godzinie 14:32
Link do wypowiedziLink

konto usunięte

Temat: Jak uzyskać taki efekt?

Dzięki : ) hehe... no to taka jedna z kwestii.
Tylko jak to po raz któryśtam zobaczyłem w sieci, to zaraz po tym, jak opadły moje emocje, gdzieś tak w środku zastanawiania się na ile ten efekt będzie powszechny i w końcu standardowy, aż się ludziom przeje, doszło do mnie, że może warto po prostu poczekać na projekt, który definitywnie skorzysta na takim podejściu do nawigacji.
Zobaczym ; )
Link do wypowiedziLink
Karol J.

Karol J. Po prostu Ja

Temat: Jak uzyskać taki efekt?

Marcin Gościcki:
Miłosz Wojaczek:
Ja mam w planie podłubać menusy, które przy scrollu zostają u góry okna przeglądarki.

To jest akurat tylko kilka linijek w js. Przy zdarzeniu "scroll" sprawdzasz ile jest przeskrolowane i jeśli przeskrolowane jest więcej niż wynosi odległość menu od góry strony to nadajesz mu position: fixed i przyklejasz do góry :) Tu masz przykład w jQuery (akurat dzisiaj pisałem):


var menuOffsetTop = $('#menu').offset().top;

$(window).scroll(function() {

  if ($(window).scrollTop() > menuOffsetTop) $('#menu').css({'position':'fixed','top':'0'});

  else if ($(window).scrollTop() <= menuOffsetTop) 	[/quote]> $('#menu').css({'position':'','top':''});[quote]});

a nie lepiej samym CSSem to załatwić?Karol J. edytował(a) ten post dnia 17.10.12 o godzinie 12:29
Link do wypowiedziLink
Andrzej Kidaj

Andrzej Kidaj www.ad3.eu

Temat: Jak uzyskać taki efekt?

Ja myślę, że to zależy od zastosowania.
Jeśli menu ma być całkiem niezależne od reszty strony to CSS i pozycjonowanie FIXED jest najlepsze (tak się przykleja zakładki z facebookiem).
Ale jeśli Miłosz chce coś takiego, że póki widoczny jest header to menu jest na swoim miejscu ale jeśli zjedziemy niżej, to menu się odkleja to wtedy już tylko JS i propozycja Marcina. Oczywiście ja bym to zrobił w gołym JS, bez jQuery, ale to już co kto lubi :)
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Jak uzyskać taki efekt?

Karol J.:
Marcin Gościcki:
To jest akurat tylko kilka linijek w js...
a nie lepiej samym CSSem to załatwić?

Tak jak napisał Andrzej. Zależy Co chcesz osiągnąć. Jeśli górny pasek z Facebook'a to jak najbardziej sam CSS. Jeśli chociażby pasek GoldenLine'owy z tytułem tematu i opcjami "obserwuj" i "odpowiedz" (ten który widzisz przyklejony do góry strony teraz :]) to sam CSS Ci już niestety nie wystarczy.Marcin Gościcki edytował(a) ten post dnia 17.10.12 o godzinie 14:21
Link do wypowiedziLink
Karol J.

Karol J. Po prostu Ja

Temat: Jak uzyskać taki efekt?

No można cuda robić :)))) ale chyba chodziło jedynie o "menusy, które przy scrollu zostają u góry okna przeglądarki"
No nic, przy okazji może skorzystam z waszych rad. Potrzeba czegoś takiego, że jest jakiś nagłówek pod nim menu, przy scrollowaniu nagłówek się chowa a menu po dojechaniu do górnej krawędzi zostaje. Macie jakieś gotowe rozwiązania?
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Jak uzyskać taki efekt?

Karol J.:
No nic, przy okazji może skorzystam z waszych rad. Potrzeba czegoś takiego, że jest jakiś nagłówek pod nim menu, przy scrollowaniu nagłówek się chowa a menu po dojechaniu do górnej krawędzi zostaje. Macie jakieś gotowe rozwiązania?

Tak, to które przytoczyłem wcześniej :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Jak oszukać przeglądarkę...




Wyślij zaproszenie do
Anuluj