Witam, spodobał mi się pewien efekt na stronie. Ale zastanawiam się jak to zrobić. Chodzi mi o efekt ze tło jest nieruchome, a jak się przewija to elementy zakrywają tło. To ta strona: http://www.craftinity.com/
Z góry dziękuje za pomoc.
Witam, spodobał mi się pewien efekt na stronie. Ale zastanawiam się jak to zrobić. Chodzi mi o efekt ze tło jest nieruchome, a jak się przewija to elementy zakrywają tło. To ta strona: http://www.craftinity.com/
Z góry dziękuje za pomoc.
Ok, wielkie dzięki. Nie wiesz może jak można uzyskać podobny efekt bez tego pluginu sam css i js ?
Trochę matematyki, zabawy z interesującymi Cię właściwościami (np. position
, (top/bottom/left/right
), ew. transform
jak wolisz, opacity
, background-position
i co tam sobie wymyślisz), no i badanie pozycji scrolla (scrollTop) w zdarzeniu scroll
(zazwyczaj podpiętym do obiektu window
).
Czyli np.
X
opacity:0
i left: 100%
,(scrollTop-200)/100
(0.0 dla 200, i 1.0 dla 300),100-(scrollTop-200)%
(100% dla 200, 0% dla 300),opacity:1
i left: 0%
,W ten sposób po przesunięciu strony 200px w dół zaczyna się krótka animacja najazdu jakiegoś elementu X (obrazka?) z płynną regulacją przeźroczystości z prawej strony ekranu i trwa to 100px. W kolejnych 100px (300-400) obrazek jest cały czas widoczny, i potem jak zaprogramujesz resztę - to odjeżdża w lewo poza ekran i zanika.
Znacznie prościej jednak użyć pluginu, który powyższą matematykę ogranicza do podania paru regułek.
Dzięki wielkie, bardzo fajnie napisane.