Walentynkowy kursor – wczesny projekt

W tym wpisie zamieszczam wczesne stadia ewolucji animowanego kursora z serduszkami, który dość niedawno został powołany do życia w związku ze zbliżającymi się Walentynkami.

Zanim zaczniesz przeglądać zamieszczone tutaj archiwum demówek wspomnę, że powstało ono przy ulepszaniu kolejnych wersji serduszkowego kursora, o którym wspominałem już we wpisie Walentynkowe skrypty na Twoją stronę WWW, oraz że nie są to żadne projekty najwyższych lotów. Osobiście traktuję zamieszczone tutaj projekty jako zapis osobistych notatek, w których niektóre rozwiązania mogą się jeszcze kiedyś przydać.

Inspiracja i demo 1

Mój animowany kursor z serduszkami został zainspirowany i oparty o tutorial wideo opublikowany na YouTube tutaj: https://www.youtube.com/watch?v=AaowWmq28CY.

Demo 01, to właściwie punkt wyjściowy, z którym kończymy po przerobieniu wspomnianego filmiku. Pod linkiem demo-01 można zobaczyć efekt końcowy. Ostateczny kod w tym demie posiada jedynie drobne zmiany względem oryginału ale zamieszczam dla ciekawskich - całkiem fajna zabawka. Tylko uwaga na pamięć, bo skrypt nie potrafi usuwać starych obiektów, które z czasem potrafią skonsumować sporo pamięci.

animowany kursor 01

Animacja CSS i demo 2

walentynkowy kursor 02W tej wersji skorzystałem z nieco innego podejścia - animacja miała zostać załatwiona przez CSS, przynajmniej ta część z wyskakującymi serduszkami, a jako że miał to być kursor, to użyłem fragmentów kodu z poprzedniego dema do przemieszczania animacji za kursorem. W mojej stronie demonstracyjnej oparłem się na kodzie animacji opublikowanej na CodePen, tutaj.

Efekt tego połączenia to demo-02.

Demo 3 i powrót do JS

Mimo, że demo 2, to praktycznie działający już animowany kursor, to efekt nie jest dla mnie zadowalający. Postanowiłem wrócić do zabawy z JavaScript i wcześniejszej wersji kodu. W demie 3 właściwie tylko zastąpiłem kształt kursora - zamiast prostokątów są już serduszka.

Zobacz tutaj demo-03.

walentynkowy kursor 03

Więcej kolorowych serduszek! Demo 4

Serduszka w demie 3, to jednak trochę za mało, no  i dlatego w tej wersji tych serduszek jest znacznie więcej! Największy tweak tej wersji to usuwanie "niepotrzebnych" serduszek. Dzięki temu oszczędzamy pamięć komputera. Poza tym zmieniła się nieco animacja, oraz ponownie mamy losowe kolory - tutaj serduszek. Zobacz demo-04.

walentynkowy kursor 03

Coś poszło nie tak, ale efekt ciekawy. Demo 5

Efekt z tego przykładu oczywiście nie był zamierzony i jest wynikiem mojego błędu, jednak tak fajnie to wyszło, że uznałem, że nadaje się to świetnie do tego podsumowania. Efekt przypomina wodę lecącą z węża strażackiego w miejsce, gdzie znajduje się kursor. Tylko, że zamiast wody mamy serduszka i nigdzie nie ma pożaru. 🙂

Tutaj link do demo-05.

walentynkowy kursor 05

Walentynkowy kursor. Demo 6

Ostatnie już demo, to przed-finalna wersja kursora, który przygotowałem w poprzednim wpisie. Oczywiście pisząc "finalna" mam na myśli wersję zdatną do użytku, bo z pewnością coś tam jeszcze można poprawić.

Zmiany względem ostatniej wersji, to:

  • animacja i serduszka pojawia się w pobliżu kursora myszy.
  • sama animacja - serduszka opadają w losowym kierunku i prędkości, na koniec zanikają.
  • serduszka mają losowe kształty, kolory i rozmiary.
  • ograniczenie ilości serduszek.

Ostatnie demo-06.

walentynkowy kursor 06

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *