Jak zrobić animowane paralaksowe chmurki

czwartek, 2021-02-18858Alib CyMeS, Tutoriale, Internet, Programowanie

Efekty paralaksy już od dawna są bardzo popularne. Chociaż to tylko wodotrysk, to bardzo uatrakcyjniają stronę zwłaszcza typu one-page. Do ich obsługi powstało sporo pluginów, ale wiele z nich można uzyskać ręcznie wklepując kilkadziesiąt linijek kodu. Pokażę Wam, jak to zrobić.

Zobacz demo paralaksowych chmurek razem z pełnym kodem źródłowym

Co to jest paralaska?

Paralaska - efekt niezgodności różnych obrazów tego samego obiektu obserwowanych z różnych kierunków. W szczególności paralaksa odnosi się do jednoczesnego obserwowania obiektów leżących w różnych odległościach od obserwatora i objawia się tym, że obiekty te nachodzą na siebie w odmiennym stopniu.

W praktyce doświadczamy dwóch rodzajów paralaksy. Jeden wynika z przesunięcia obiektów względem naszych oczu. Jeśli raz zamkniemy jedno, raz drugie, zauważymy, że obraz nieco się różni. Mózg składa to w obraz 3D, w którym jesteśmy w stanie oszacować odległość obiektów. Wykorzystywane jest to w fotografii i filmach 3D, które oglądamy w kinie lub na urządzeniach typu Oculus.

Drugiego rodzaju doświadczamy, kiedy przesuwamy się względem obiektów (np. jadąc samochodem lub pociągiem). Dalsze obiekty wydają się przesuwać wolniej niż bliższe. Coś takiego widzimy nawet na zwykłych filmach.

Paralaska na stronie internetowej?

Tutaj oczywiście doświadczamy drugiego rodzaju paralaksy. Najczęściej podczas przewijania strony, część elementów (np. tło) przesuwa się wolniej niż inne, co daje złudzenie większej odległości od nas. Można też ruszać elementami względem kursora myszy, na przykład chmurkami. I ten właśnie efekt zaraz omówię. Efekt nie wyrywa z butów, ale przecież to tylko tutorial i nic nie stoi na przeszkodzie, żeby to rozbudować do czegoś naprawdę wypasionego.

Poruszmy chmurki

Zrobimy to przy pomocy JavaScriptu i biblioteki jQuery, dzięki której odpadnie nam konieczność samodzielnej obsługi myszy i zdarzeń.

Najpierw zdefiniujmy style dla kontenera na chmurki i samych chmurek

#Clouds {position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden;} #Clouds .Cloud {position:absolute; left:0; top:0; background:transparent url(cloud.png) no-repeat; width:118px; height:80px;}

Główny kontener na chmurki jest pozycjonowany absolutnie względem ekranu (zawsze widocznej części strony). Dzięki właściwości overflow:hidden nie pojawią się paski przewijania gdy chmurki wyjdą poza ekran. Sama chmurka jest pozycjonowana absolutnie względem kontenera, zdefiniowana jest też grafika i jej wielkość. W zimie można zrobić gwiazdki śniegu.

Zanim przejdziemy do pisania funkcji wstawmy w BODY kontener na chmurki:

<div id="Clouds"></div>

Czas na programowanie w JavaScript

Można to zrobić na kilka sposobów. Można przygotować odpowiedni jQuerowy plugin, ale tutaj wystarczy zwykła funkcja Clouds, której przekazuję jeden parametr cMax oznaczający ilość chmurek do wygenerowania. W przykładzie jest ich 100, ale ilość jest ograniczona wyłącznie możliwościami przeglądarki. Przy kilku milionach może się po prostu zawiesić.

Mamy tu dwie zmienne:

var cWdth=$(document).width(); // szerokość okna var cHght=$(window).height(); // wysokość okna (poza ekranem chmurki nie są potrzebne)

Zróbmy pętlę generującą chmurki

Jest ona powtarzana cMax razy. A co w środku?

var x=Math.floor(Math.random()*cWdth*2 - cWdth); // początkowa losowa pozycja X chmurki var y=Math.floor(Math.random()*cHght*2 - cHght); // początkowa losowa pozycja Y chmurki var s=Math.floor(Math.random()*8) + 1; // współczynnik szybkości przesuwania chmurki - będzie 8 różnych szybkości, różniące się także przezroczystością

Tworzymy chmurkę, ustawiamy jej atrybuty i style i dodajemy do głównego kontenera. Przezroczystość opacity zależy od współczynnika szybkości i musi się zmieścić w zakresie 0-1. Dzięki jQuery wiele rzeczy można zrobić w jednej linii, co na pierwszy rzut oka może się wydawać zaciemnione, ale na dłuższą metę zyskujemy bardziej kompaktowy kod:

var Cloud=document.createElement("DIV"); $(Cloud).addClass("Cloud").css({"left":x+"px" , "top":y+"px" , "opacity":s/8}).attr({"x":x , "y":y , "s":s}); $("#Clouds").append(Cloud);

Teraz trzeba dodać obsługę poruszania kursorem, co dzięki jQuery też można zrobić w jednej linii. Zdarzenia ruchu myszy mousemove wskazuje na funkcję obsługującą ruch chmurek.

$(window).mousemove(function(e) { this.CloudMove(e); });

Do funkcji przekazujemy parametr e (zdarzenie), którzy w przypadku ruchu myszy zawiera jej położenie. Najpierw trzeba odczytać położenie kursowa względem ekranu.

x=e.pageX-$(window).width()/2; y=e.pageY-$(window).scrollTop();

Teraz trzeba wykonać obliczenia dla każdej chmurki. Odczytujemy zapamiętane atrybuty każdej chmurki i dokonujemy obliczeń nowej pozycji. Tu macie pole do popisu na opracowanie własnego algorytmu, mój jest dosyć siermiężny.

Na końcu włączamy animowaną zmianę pozycji. Funkcja stop() ma na celu przerwanie wcześniejszej animacji, bo jeśli zaczniesz szybko poruszać myszą, to możesz szybko zawiesić stronę: Sama animacja włączy się po 10ms od chwili zatrzymania kursora.

$("#Clouds").children(".Cloud").each(function() { dX=parseInt($(this).attr("x")); dY=parseInt($(this).attr("y")); dS=parseInt($(this).attr("s")); pX=(x*dS)/4 + dX; pY=(y*dS)/4 + dY; $(this).stop().animate({"left":pX+"px" , "top":pY+"px"},10); });

Pozostaje już tylko uruchomienie całości wywołując Clouds() z ilością chmurek jako parametr. Można to opakować w funkcję ready(), dzięki czemu mamy pewność, że uruchomi się dopiero po załadowaniu całej strony:

$(document).ready(function () { Clouds(100); });