Walentynkowe skrypty na Twoją stronę WWW!

Walentynkowe skrypty na stronę www

Już niedługo Walentynki. Oznacza to, że zbliża się doskonała okazja do zaprezentowania siebie, swojej oferty, miejsca lub wydarzenia w nieco innej niż na co dzień perspektywie. Walentynki są wprost idealnym pretekstem, czy to do przypomnienia o sobie starym klientom, czy też do zainteresowania i pozyskania nowych. W tym walentynkowym wpisie zebranych zostało kilka ciekawych pomysłów na "podkręcenie" Twojej strony WWW!

Animowana kartka walentynkowa

Valentines Card, to animowana okolicznościowa kartka z walentynkowym motywem w roli głównej. Zbudowana wyłącznie przy użyciu HTML i CSS. Kartka wygląda schludnie, posiada płynną animację i może zostać wykorzystana na stronie w wielu przypadkach. Pierwszy, który przychodzi na myśl - można zapisać w niej kod rabatowy do sklepu internetowego i wysłać newsletterem do klientów - taki ciekawy akcent.

animowana kartka walentynkowa

Zobacz demo

Animowane tła walentynkowe na stronę internetową

Kolejnym pomysłem na udekorowanie naszej strony internetowej na walentynki będą animowane tła. Niestety w większości przypadków takie tło potrafi poważnie spowolnić działanie strony, ale efekty robią olbrzymie wrażenie.

Corny e-Valentine

Corny e-Valentine to jeden z lepszych skryptów, jakie udało mi się znaleźć w tematyce walentynek i animowanych za pomocą CSS i JavaScript efektów. Trzeba przyznać, że sam efekt wygląda nieźle, a do tego "rozbijanie" serc kursorem dodaje jeszcze więcej uroku i unikalności.

Corny e-Valentine
Zobacz demo

Love heart animation using CSS3 & JavaScript

Ten skrypt generuje świetnie wyglądające tło z pseudo efektem 3d, gdzie wydaje nam się, że serca znajdują się w różnej odległości. Wizualnie efekt jest bardzo atrakcyjny, ale...

Niestety ten skrypt posiada poważną wadę (przynajmniej w FF), serca są generowane nawet wtedy, gdy przeglądarka jest zminimalizowana i cierpliwie czekają aż wrócisz na kartę, a wtedy uwalniana jest wielka chmura serc, która potrafi zawiesić przeglądarkę.

Love heart animation using CSS3 & JavaScript
Zobacz demo

Animowane kursory

Animowany kursor nie jest zbyt powszechnym zjawiskiem w obecnym internecie i wiele przemawia za tym żeby lepiej go nie ruszać. A skoro tak, to znaczy, że dodając jakiś wypasiony efekt do naszego kursora na pewno się wyróżnimy!

Warto tutaj podkreślić, że wszelkie animacje, a zwłaszcza amatorskie i nie do końca przemyślane, mogą znacząco obniżyć wrażenia z użytkowania witryny. Nie mówię tutaj wyłącznie o walorach estetycznych takich rozwiązań ale także wydajnościowych, gdzie źle zaprojektowana animacja może "zjeść" zasoby komputera i w efekcie doprowadzić do "zawiechy" przeglądarki. Dlatego zanim umieścisz wybrany skrypt na stronie docelowej, najpierw sprawdź w bezpiecznym środowisku testowym jego stabilność działania i zasobożerność.

Walentynkowy animowany kursor

Pierwszy skrypt, który proponuję został napisany przeze mnie. Skrypt z serduszkowym kursorem inspirowany jest niektórymi przedstawionymi w tym wpisie skryptami i z całą pewnością wiele jeszcze można w nim poprawić ale działa OK a sam efekt jest moim zdaniem warty uwagi.

Zobacz demo

Love Hearts Cursor JavaScript

Love Hearts Cursor Javascript jest drugim skryptem, dodającym ciekawą tematyczną animację, wartym uwagi. Efekt realizowany przez ten skrypt wygląda ładnie i płynnie, wygląda to tak jakby kolorowe serduszka "uwalniane" były z kursora przy jego poruszeniu i swobodnie unosiły się do góry. Efekt dopełniają losowe nieoczekiwanie "eksplodujące" serduszka.

Zobacz demo

Valentines Day Click Event

Ostatnim skryptem z serduszkami jest Valentines Day Click Event, który znalazłem na CodePen. Podobnie jak poprzednie dwa, tak i ten generuje "wypadające z kursora" serduszka, które następnie lecą do góry i zanikają. Skrypt znalazł się w tym zestawieniu wyłącznie ze względu na kompaktowe wymiary i stosunkowo łatwą do zrozumienia strukturę, która pozwoli na łatwą manipulację i dostosowanie do własnych potrzeb.

Skrypt wyróżnia się metodą wywołania akcji - efekt jest widoczny po kliknięciu.

Zobacz demo

 

Jedna myśl na temat “Walentynkowe skrypty na Twoją stronę WWW!”

Dodaj komentarz

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