Efekt Parallax na stronie WWW
Witajcie, UWAGA! Warsztat o Parallax na żywo, za darmo w najbliższą środę o 20:00 na http://www.eduweb.pl/warsztaty/ Ostatnio częstym pytaniem wśród osób, które korzystają z naszych…
Witajcie,
UWAGA! Warsztat o Parallax na żywo, za darmo w najbliższą środę o 20:00 na http://www.eduweb.pl/warsztaty/
Ostatnio częstym pytaniem wśród osób, które korzystają z naszych kursów i Warsztatów jest to o tak zwany efekt Parallax, który polega na płynnym przewijaniu elementów strony WWW z różną prędkością, w rezultacie symulujący perspektywę. Strony WWW przygotowane z efektem Parallax to na przykład:
Wbrew pozorom, przygotowanie serwisu w oparciu o Parallax jest bardzo proste. Możemy tutaj, co do zasady posłużyć się rozwiązaniami opartymi o JavaScript (jQuery) lub CSS3. Najczęściej do stworzenia tego efektu wykorzystuje się absolutnie pozycjonowany kontener div, który następnie jest animowany w zależności od położenia myszki, ewentualnie scrollowania strony w przeglądarce. Dzięki nadawaniu różnym animacjom innych prędkości, jesteśmy w stanie uzyskać ciekawą perspektywę.
Parallax z Adobe Muse CC
Jednym z najprostszych sposobów stworzenia serwisu z wykorzystaniem Parallax jest użycie aplikacji Adobe Muse CC. Pozwala ona na tworzenie animacji Parallax bezpośrednio w interfejsie graficznym, z pomocą intuicyjnego panelu, co sprawia, że nie musisz nawet znać CSS czy jQuery aby dodać taki efekt do Twojej strony WWW.
Tak się składa, że zaprezentowane przykłady stron WWW zostały właśnie stworzone z pomocą Muse CC a osiągnięcie tych efektów, mimo, że wyglądają one na bardzo skomplikowane, jest możliwe dosłownie w kilka minut. Jeśli chcesz dowiedzieć się, jak można pracować z efektem Parallax w Muse CC, zapraszam do obejrzenia Warsztatu Eduweb Live:
http://eduweb.pl/live/adobe-muse-cc—nowosci
Znajdziesz w nim szczegółowe informacje oraz praktyczny przykład stworzenia i zastosowania Parallax na stronie.
Parallax z użyciem jQuery Parallax
Jeśli ten efekt chcesz wdrożyć do swojej strony z wykorzystaniem jQuery, jednym z najbardziej popularnych pluginów jest jParallax, który możesz pobrać tutaj: http://stephband.info/jparallax/
Użycie jParallax na stronie jest bardzo proste, wystarczy po jego zainstalowaniu, do tagu html przypisać specyficzną klasę, np:
<div class="parallax-layer"></div>
A następnie wywołać jParallax skryptem jQ:
jQuery( '.parallax-layer' ).parallax( options );
W ten sposób zaczynamy tworzyć w naszym dokumencie specyficzne warstwy, które będą poruszały się zgodnie ze zmianą pozycji kursora myszy i wybraną opcją. Ich lista dostępna jest na stronie: http://stephband.info/jparallax/, natomiast przykłady zastosowania biblioteki znajdziesz na http://stephband.info/jparallax/demos/remotecontrol.html
Warsztat – dowiedz się wszystkiego o efekcie Parallax na Eduweb Live w środę o 20:00!
UWAGA! Jeśli chcesz dowiedzieć się wszystkiego o efekcie Parallax na praktycznych przykładach stron WWW, które będziemy tworzyć krok po kroku, zarówno z wykorzystaniem CSS3, jak i JavaScript oraz pluginów jQuery, zapraszamy na najbliższy Warsztat Eduweb Live na żywo, który odbędzie się w środę 16.10 punktualnie o 20:00. Warsztat na żywo dostępny jest dla wszystkich za darmo i będzie można w nim uczestniczyć wybierając link po zakończeniu odliczania na stronie http://www.eduweb.pl/warsztaty/
Warsztat jak zwykle zostanie dodany do naszej Bazy Wiedzy, więc jeśli nie uda Ci się dotrzeć na spotkanie w środę – nie martw się! Będziesz mógł go obejrzeć razem z ponad 150 godzinami innych, ciekawych Warsztatów na stronie http://www.eduweb.pl/warsztaty/
Opis Warsztatu znajdziecie na http://eduweb.pl/live/efekt-parallax-na-stronie-www
Do zobaczenia!
Grzegorz Róg