W Prima Aprilis ogłosiłem powstanie poligonu- miejsca na moje eksperymenty i ciekawe projekty. Pokazałem wtedy animację kurczaka wykonane w HTMl i CSS. Dziś do boju zaprzęgnę jeszcze… Javascript. Oto kolejny projekt- oczy kosmity!
Przy okazji, gdy już przykułem Twoja uwagę- pamiętaj, by w międzyczasie zajrzeć na mojego Facebooka gdzie znajdziesz branżowe newsy, tutoriale i będziesz poinformowany o nowościach na mojej stronie.
Tak czy owak- jakiś czas temu w mojej pracy napotkałem jeden z pierwszych projektów typu landing page, gdzie Klient zażyczył sobie by na stronie był zafiksowany blok z numerem telefonu oraz by była na stronie strzałka, która gdy scrollowało się stronę lub animowało się element, miała się obracać tak by wskazywać cały czas ten numer telefonu. Zadanie ciekawe, ale ile ja się nad tym namęczyłem… To były moje początki z Javascript, więc nie lada wyzwanie.
Jakiś czas temu przypomniałem sobie o tym projekcie i w moim umyśle pojawiła się myśl- a co gdyby stworzyć skrypt oka, które śledzi moją myszkę? To się zapowiadało na jeszcze ciekawsze i trochę cięższe od tamtego zadanie- tam był div, który zawsze był w jednym miejscu na dobrą sprawę (+/-50px w górę/dół), tu z mamy mysz i nieprzewidywalność- kursor może być wszędzie.
Niedługo potem odezwała się we mnie dusza odkrywcy-masochisty: “a co gdyby to jeszcze bardziej skomplikować?” Niech oczy można dodawać kliknięciem. I niech każde mnie śledzi niezależnie. I żeby można było je dodawać tylko na wydzielonym obszarze… I jeszcze niech mrugają, każde osobno.
I tak powstał mój projekt dynamicznego tworzenia obiektów śledzących kursor, zwanych potocznie oczami ;)
Jeśli ktoś woli- link do projektu na Codepen.io
Wykorzystane technologie to standardowo HTML i CSS, do obslugi zdarzeń związanych z oczami (śledzenie i generowanie) wykorzystany jest czysty Javascript.
P.S Tak, kosmita jest rysowany w HTML/CSS i jedynie jego usta to Photoshop.