Zanurz się w zawodzie front-end developera ze szczególnym uwzględnieniem sztucznej inteligencji
Dowiedz się więcejParallaksa to złudzenie optyczne, które stwarza wrażenie, że obiekt porusza się względem tła, gdy obserwator zmienia swoje położenie. Efekt ten można łatwo zademonstrować, trzymając palec przed twarzą i patrząc na nią najpierw jednym okiem, a potem drugim.
W tym artykule omówimy proces opracowywania Animowane tło i inne komponenty strony internetowej za pomocą JavaScript.
Kod źródłowy jest dostępny na platformie GitHub.
Tło paralaksy: gra głębi i ruchu
Najpierw stwórzmy dwa niezbędne obrazy — jeden na pierwszy plan, a drugi na tło. Jako tło wybrałem zdjęcie kosmosu:
Wyciąłem prosty krajobraz z innego zdjęcia, aby umieścić go na pierwszym planie.
Teraz musimy utworzyć układy dla komponentów, które będą wyświetlać obrazy.
Alternatywnie, możesz ustawić jedno tło dla elementu body i inne dla wrappera. Zaktualizuj kod, aby dopasować go do wymagań projektu. Następnie dodajmy style:
Elementy mają stałe rozmieszczenie na stronie, gdzie jeden element, reprezentujący drzewo, znajduje się na drugim, który przedstawia przestrzeń. Zastosowaliśmy również efekt rozmycia drzewa, który pomaga ukryć jego nierówności i sprawia wrażenie nieostrego.
Musisz utworzyć skrypt:
Zwróćmy uwagę na wynik:
Nie ma ograniczeń co do liczby warstw, których możesz użyć. Pamiętaj jednak, że warstwy położone dalej powinny poruszać się wolniej. Na przykład, jeśli widz zrobi kilka kroków, nie wpłynie to na położenie gwiazd. Z kolei drzewo znajdujące się bliżej obserwatora będzie poruszać się z większą prędkością.
Efekt paralaksy w świecie cząsteczek
Efekt paralaksy można zastosować nie tylko do obrazów tła, ale także do elementów znajdujących się na pierwszym planie. Na przykład podobne techniki są często spotykane w projektowaniu stron docelowych Apple.
Strona będzie integrować elementy, które będą znajdować się na głównej treści i będą się poruszać zgodnie z przewijanie.
Najpierw musisz utworzyć kontener, w którym zostaną umieszczone cząsteczki.
Blok nie jest widoczny dla użytkownika – służy jako kontener. Teraz skonfigurujmy style:
Właściwości cząsteczek są definiowane za pomocą skryptu.
Teraz możesz zobaczyć, jak to działa:
Z pewnością jest w tym zakresie duże pole do poprawy. Można eksperymentować z rozmiarem i kształtem cząsteczek na różnych poziomach, a także pracować nad perspektywą i efektem rozmycia. Optymalne parametry można określić wyłącznie metodą prób i błędów.
Połączenie programowania front-end i sztucznej inteligencji
Dzięki wysiłkom specjalistów od programowania front-end możemy dodawać polubienia, komentarze, produkty do koszyka i łatwo poruszać się po mapach online. Na tym kursie nauczysz się, jak tworzyć interfejsy użytkownika dla usług sieciowych, wykorzystując różne języki programowania i dodatkowe narzędzia. Będziesz potrafił tworzyć aplikacje, takie jak harmonogramy zadań, komunikatory internetowe i sklepy internetowe.
Dowiedz się więcej