efekt przybliżenia zdjęcia

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.

2

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)

0

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

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 :/

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.

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.

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/

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

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