10 niestandardowych fragmentów kodu CSS i JavaScript dla efektów najechania i kliknięcia

Deweloperzy mogą tworzyć szalone efekty za pomocą prostych czynności użytkownika, takich jak najechanie kursorem i kliknięcia myszą. Dotyczą one głównie użytkowników komputerów stacjonarnych, ale sieć mobilna obsługuje również efekty kliknięcia/dotyku w większości przeglądarek.

Jeśli szukasz fajnych pomysłów do powielenia we własnych projektach, ta kolekcja z pewnością ma coś dla Ciebie. Każdy, kto zna trochę JavaScript i CSS, może z łatwością dostosować te efekty, aby działały w dowolnej przeglądarce, na dowolnej stronie internetowej i ulepszyć wygląd układu.

Efekty najechania przyciskiem

Oczywistym punktem wyjścia dla efektów animacji są przyciski CSS. Są one najbardziej praktyczne w codziennym użytkowaniu, ponieważ zapewniają dużą interaktywność. Przyciski CTA praktycznie błagają o uwagę, a dzięki tym efektom najechania możesz przyciągnąć uwagę jeszcze szybciej.

Każdy efekt używa do animacji czystego CSS. Kilka z tych przycisków opiera się na JavaScript dla zdarzeń najechania kursorem myszy, ale wszystkie animacje są nadal kontrolowane bezpośrednio w CSS.

Jeśli projektujesz płaski układ, te animacje będą bardzo łatwe w obsłudze.

Nawigacja

W tym długopisie znajdziesz kilka zdarzeń nawigacyjnych. Opierają się one na czystym CSS, który ponownie kontroluje każde hiperłącze z innym efektem najechania.

Menu nawigacyjne są zazwyczaj bardzo proste i ogólne. Właśnie dlatego wydarzenia typu hover mogą naprawdę urozmaicić projekt i pokazać odwiedzającym, że dbasz o szczegóły.

Większość z tych animacji jest wystarczająco oswojona, aby zmieścić się na dowolnej stronie internetowej, więc świetnie nadają się do łatwego kopiowania/wklejania w dowolnym układzie.

Efekty najechania na zdjęcie

Jak często znajdujesz galerie zdjęć z nudnymi napisami i bez prawdziwego kontekstu? Widzę je zbyt często i po prostu czują się leniwi.

Bardzo podobają mi się te efekty fotograficzne, które opierają się na prostej galerii miniatur. Po najechaniu na obraz zobaczysz tytuł zdjęcia, opis i przycisk „czytaj więcej”.

Każdy element przesuwa się do widoku pod różnymi kątami, co pomaga tej galerii obrazów wyskakiwać bezpośrednio ze strony.

Najechanie etykietki CSS

Każda przeglądarka obsługuje domyślne podpowiedzi, ale zawsze możesz stworzyć własne za pomocą wtyczek lub klonując pióra w ten sposób. Został opracowany przez Ty Strong i pokazuje, jak daleko można posunąć się do czystych podpowiedzi CSS.

Cały ten fragment działa poprzez kierowanie na tag HTML <dfn>. Po najechaniu kursorem na dowolny tekst owinięty w ten tag, automatycznie zniknie on w widoku po najechaniu kursorem jako podpowiedź.

Czyste trójkąty CSS istnieją od lat, więc odtworzenie stylu podpowiedzi jest dość łatwe. Ale jestem pod wrażeniem płynnych stanów animacji kontrolowanych przez CSS3.

Ikony CSS na Hover

Oto kolejny przykład czegoś fajnego, co możesz zrobić za pomocą czystego CSS. Wszystkie te proste przyciski mają ukryte ikony, które pojawiają się tylko wtedy, gdy na nich znajdzie się kursor.

Każda ikona pochodzi z Font Awesome, dzięki czemu możesz powielić ten projekt za pomocą całkowicie darmowych ikon.

Efekty obejmują wsuwanie, rozciąganie i zanikanie ikon, które pojawiają się po najechaniu kursorem i znikają, gdy kursor przesunie się w inne miejsce.

Nieskończona paginacja

Paginacja stron internetowych jest zawsze dość nudna, prawdopodobnie dlatego, że nie jest krzykliwą częścią interfejsu. Ale dzięki temu efektowi paginacji Mariusza Dąbrowskiego możesz przenieść swoją paginację na wyższy poziom.

Jedyną rzeczą w tej animacji jest to, że jest ładowana z jednej strony na drugą. Więc działa najlepiej ze stronami opartymi na Ajax, gdzie cała strona nie jest przeładowywana. W ten sposób cała animacja jest widoczna podczas wczytywania nowej zawartości.

Na pewno ma ograniczoną wartość praktyczną, ale efekt jest znakomity.

Animacja nakładki nawigacyjnej

Pełnoekranowe menu nawigacyjne są bardzo popularne w przypadku responsywnych witryn mobilnych i działają również dla większości użytkowników. Ale nie muszą być nudne ani statyczne, jeśli masz takie efekty nakładki za darmo w CodePen.

Deweloper Ryan Mulligan stworzył tę bestialską animację z czystymi klatkami kluczowymi CSS działającymi na jednej klasie CSS.

Zdarzenie kliknięcia jest wyzwalane przez jQuery, ale ruch jest w całości CSS. Zdecydowanie jedna z fajniejszych animacji, jakie widziałem, a uruchamianie jest zaskakująco płynne.

Czysty efekt kliknięcia CSS

Projekt materiałów Google przedstawia szereg animowanych efektów, a jednym z nich jest efekt ripple click. Jest to najbardziej powszechne w przypadku urządzeń z Androidem, ale wyciekł również do sieci.

Za pomocą tego pióra możesz odtworzyć efekt ripple we własnej pracy, używając wyłącznie kodu CSS.

Ten fragment kodu jest skierowany do ikon, które również świecą się po zaznaczeniu, więc przypomina to trochę więcej kart/wybieranie elementów strony. Ale efekty można przenieść na wszystko, co ułatwia klonowanie.

Przycisk Many

Oto jeden z najbardziej unikalnych efektów przycisków, jakie kiedykolwiek widziałem, używając SVG do kształtów i CSS do animacji.

Coder Dean Hidri zbudował ten efekt przycisku many z zaledwie 80 linijkami CSS i kilkoma tuzinami linijek HTML (wraz z SVG). Po najechaniu na ten przycisk animuje niestandardowy kształt płynu wewnątrz przycisku, aby utworzyć wypełnienie tła, a następnie jest animowany.

Jeśli masz witrynę, która mogłaby używać tego stylu przycisków, zdecydowanie warto się nią bawić.

Efekty kultowego przycisku

Możesz wiele zrobić z czcionkami ikon, a te animowane przyciski Davida Darnesa są świetnym przykładem.

Ikony są animowane w inny sposób po najechaniu kursorem, każda z własnym efektem podpisu. Możesz nie używać wszystkich tych ikon w jednej witrynie, ale niestandardowe style animacji są łatwe do sklonowania. Działają wyłącznie na CSS3 i pasują do dowolnej wybranej czcionki ikony. Naprawdę fajny efekt do sklonowania na prawie każdą stronę internetową!

I to zamyka moją listę efektów UX, ale z pewnością nie jest to ostateczna kolekcja.

Jeśli przeszukasz sieć, możesz znaleźć wiele innych efektów najechania na przyciski/ikony, a wiele z nich ma bezpłatny kod źródłowy. Ale jeśli chcesz dowiedzieć się więcej o niestandardowej animacji internetowej, sprawdź naszą ogromną listę wtyczek i zasobów dla programistów.