Dzisiaj jest sobota, 21 października 2017
Andy Design Studio Graficzne w LublinieJAKIE błędy popełniamy w Corelu?Pobierz Alib CyMeS 7.0 za friko
Jak zrobić animowane paralaksowe chmurki

Jak zrobić animowane paralaksowe chmurki

czwartek, 2016-04-141076tutoriale, internet

Efekty paralaksy są od jakiegoś czasu bardzo na topie, bo chociaż to tylko wodotrysk (zresztą bardzo obciążający przeglądarkę), to bardzo uatrakcyjnia strony, zwłaszcza typu one-page. Do obsługi efektu powstało sporo pluginów, ale dzisiaj pokażę Ci, jak zrobić prosty efekt w jeszcze prostszy sposób.

Jeśli nie wiesz, co to jest paralaksa i jak wygląda na stronach internetowych, to chyba przespałeś ostatnie kilka lat. Ale nie będę złym wujkiem, poczytaj sobie trochę teorii na Wikipedii.

Zobacz paralaksowe chmurki

Poruszmy chmurki

Zrobimy to przy pomocy JavaScriptu i biblioteki jQuery, dzięki której odpadnie nam niskopoziomowa obsługa myszy i zdarzeń. Co prawda ona też swoje bierze z zasobów, ale coś za coś. Poza tym chyba nie ma już strony, która jej używa, więc pewnie i tak jest już gdzieś dołączona.

Najpierw zdefiniujmy style dla kontenera na chmurki i samych chmurek

#Clouds {position:absolute; 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;}

Kontener jest pozycjonowany absolutnie względem dokumentu i rozciągnięty na cały ekran. Dzięki właściwości overflow:hidden nie pojawią się paski przewijania gdy chmurki wyjdą poza ekran.
Chmurka jest pozycjonowana absolutnie względem kontenera, ponadto zdefiniowana jest grafika i jej wielkość. W zimie możesz zrobić gwiazdki śniegowe.

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. Najlepiej byłoby przygotować odpowiedni plugin, ale dla uproszczenia zrobię to na zwykłej funkcji, którą nazwałem Clouds i przekazuję jej jeden parametr cMax oznaczający ilość chmurek do wygenerowania.

Mamy tu trzy zmienne:

  • var event; - zmienna zapamiętująca ostatnie zdarzenie myszy (stąd będzie odczytywana pozycja kursora), bo podczas przewijania ekranu niestety jest są generowane zdarzenia
  • var cWdth=$(document).width(); - szerokość dokumentu
  • var cHght=$(document).height(); - wysokość dokumentu (nie myl z wysokością okna)

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

Jest ona iterowana (powtarzana) cMax razy. A w środku mamy:

  • var x=Math.floor(Math.random()*cWdth); - początkowa pozycja X chmurki
  • var y=Math.floor(Math.random()*cHght); - początkowa pozycja Y chmurki
  • var s=Math.floor(Math.random()*8) + 1; - współczynnik szybkości przesuwania chmurki - będzie 8 różnych szybkości

Utwórzmy chmurkę, ustawmy jej atrybuty i style  i dodajmy do głównego kontenera. Przy okazji poprawmy jego wysokość na taką samą jak dokument (height:100%; w CSS ustawia tylko na wysokość widocznego ekranu). 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").height($(document).height()).append(Cloud);

Teraz trzeba dodać zdarzenia, co dzięki jQuery też można zrobić w jednej linii. Zdarzenia ruchu myszy mousemove i przewinięcia ekranu scroll wskazują na funkcję obsługującą ruch.

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

No i wspomniana funkcja, do której przekazujemy parametr e (zdarzenie), którzy w przypadku ruchu myszy zawiera jej położenie. Niestety przy przewijaniu ekranu nic nie przekazuje i nie pomaga nawet sztuczne wywołanie zdarzenia mousemove (jeśli ktoś zna sposób na wymuszenie przekazania tych danych, proszę o opisanie tego w komentarzu).

Najpierw sprawdzimy czy funkcja została wywołana przez ruch myszy i jeśli tak, to zostanie zaktualizowana zmienna event. Następnie odczytujemy położenie widocznej części ekranu względem dokumentu (przewinięcie - nie wiem, jak to fachowo nazwać) oraz pozycje X i Y kursora myszy:

if (e && !isNaN(e.pageX)) event=e;
s=$(window).scrollTop();
x=(event && event.pageX)? event.pageX-$(window).width()/2 : 0;
y=(event && event.pageY)? event.pageY : 0;

Teraz trzeba wykonać obliczenia dla każdej chmurki. Odczytujemy zapamiętane atrybuty każdej chmurki i dokonujemy obliczeń nowej pozycji. Tu masz 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ę:

$("#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-s)*dS)/4 + dY + $("#Clouds").scrollTop();
    $(this).stop().animate({"left":pX+"px" , "top":pY+"px"});
});

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

Clouds(50);

Dobra, tyle teorii, teraz zobacz sobie proste demo i zerknij w kod źródłowy pliku.

Zdaję sobie sprawę, że mam specyficzny sposób programowanie, więc jeśli masz jakieś problemy ze zrozumieniem, pytaj w komentarzu, postaram się rozjaśnić niejasności.

Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na