Witam!
Czy ktos ma pomysl jak stworzyc efekt oddalajacego sie i w koncu chowajacego tla (obrazku) podczas scrollowania ?
Przyklad: http://www.starwars.com/databank <-- w gornej czesci mamy obrazek ktory podczas scrollowania w dol zaczyna sie 'oddalac', sciemniac, az w koncu znika. Ogolnie sprawia wrazenie osobnego elementu, dodaje tez stronie fajnego poczucia trojwymiarowosci.
Kto ma pomysl/wie jak osiagnac taki efekt ?
Timer + prosta funkcja matematyczna która bierze pod uwagę pozycję scrollbara i przelicza to na przeźroczystość i ewentualne przesunięcie i rozmiar. Przelicz sobie matematycznie co się ma kiedy dziać a potem znajdź odpowiednie funkcje (ustawianie przeźroczystości itp) żeby osiągnąć efekt.
(zamiast timera można/trzeba wykorzystać event od scrollbara jeśli taki istnieje, ale musisz poszukac)
Generalnie idea: napisz funkcję f(pozycja_scrollbara, max_pozycja_scrollbara, wysokosc_widoku, wysokosc_strony) która zwraca parametry które chcesz.
Jest szansa, że jak poszukasz to znajdziesz gotowca.
Przykladowe zasady:
zalozmy ze x to pozycja scrollbara gdzie 0 oznacza sama gore strony a 1 sam dol strony
przykladowy pseudo kod (pisane z palca moga byc bugi):
zalozenia:
wysokosc_strony >= wysokosc_widoku
wysokosc_widoku > 0
gdy strona jest na samej gorze to alpha obiektu = 1
gdy przewijamy w dol obrazek/obiekt zaczyna znikac az osiagnie wartosc alpha = 0 na ktorej sie zatrzyma (niewidoczny)
gdy przewiniemy o dokladnie jedna wysokosc ekranu to obrazek ma zniknac
efekt dziala w dwie strony: dla przewijania w dol i gore
Pseudo kod:
granica_widocznosci = wysokosc_widoku / wysokosc_strony
jesli x < granica_widocznosci
zwroc alpha : 1 - x / granica_widocznosci // alpha: 0 -> nie widoczny; 1 -> widoczny
jesli x >= granica_widocznosci
zwroc 0