efekt przybliżenia zdjęcia

Odpowiedz Nowy wątek
2015-02-10 16:40
0

Cześć

mam taki problem z którym walczę już kilka godzina.
Mianowicie chodzi mi o zrobienie efektu zbliżania zdjęcia przy skrolowaniu.
Na samy początku np. zdjęcie które jest wyświetlane jako cover na pierwszej stronie, ma rozmiar 400%. Przy skrolowaniu zdjęcie się będzie zmniejszało aż do 100%. Jak będzie już na 100%, będzie możliwość skrolowania strony niżej. Niezbyt wiem jak to zrobić, nie mogłem znaleźć strony o podobnym efekcie.

Pozostało 580 znaków

2015-02-10 17:22

zdarzenie mousewheel (polecam plugin: https://github.com/jquery/jquery-mousewheel/ bo każda przeglądarka wyśle Ci inną deltę ("moc" scrollowania) i ten plugin próbuje to normalizować [nienajlepiej, ale chyba lepiej się nie da]) - zmianę rozmiaru to chyba ogarniesz (pobieraj sobie naturalWidth i porównuj z bieżącym) - jeżeli rozmiar Ci wyliczy już na 100% to nie anuluj zdarzenia (anulowanie zablokuje przewijanie strony)


Pozostało 580 znaków

2015-02-10 18:16
0

oki, dzięki :) jeszcze muszę rozgryźć jak tego użyć bo ciągle mi krzaczy błędami na wordpressie :)

Pozostało 580 znaków

2015-02-10 18:39
0

jednak to rozwiązanie będzie złe, wyłapuje tylko zdarzenie skrolowaniu myszką, a jak przewijam paskiem w przeglądarce to już nie działa :/

Pozostało 580 znaków

2015-02-10 21:38
0

ciężko przewidzieć co dokładnie chcesz zrobić.

w takim razie nasłuchuj zdarzenia scroll (na obiekcie window), a po prostu tę treść niżej sporo odsuń od Twojego obrazka, który będzie miał jakieś position:fixed, a na koniec - żeby odjechał do góry - od pewnego momentu - zmieniaj mu wartość top aż zniknie.


Pozostało 580 znaków

2015-02-11 11:33
0

ogólnie chce mieć taki efekt że jak ktoś wchodzi na stronę www i na pierwszy rzut oka wyświetla się obrazek na cały ekran w powiększeniu. Jak schodzimy na dół strony zdjęcie się oddala (ale cały czas zajmuje cały ekran) i jak będzie już całe zdjęcie wyświetlone (nie kawałek na jak początku) wtedy można przewijać stronę niżej.

Pozostało 580 znaków

2015-02-11 12:19
0

tutaj masz pokazane jak takie cos osiagnac, oczywiscie przerob pod siebie, ale baze masz => https://ihatetomatoes.net/how-to-zoom-into-an-image-on-scroll/

Thx za fajną stronkę - dzek69 2015-02-11 13:52

Pozostało 580 znaków

2015-02-11 12:43
0

widziałem ten link juz :) ale trochę przeraził mnie czas wczytywania się tych skryptów. Zamuliło mi całą stronę od razu. Niby jeden efekt a skryptów nawalonych co nie miara :P

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0