10 bibliotek CSS dla efektów „Lepszego obrazu”
Wypuszczanie użytkowników łatwo i wyraźnie wiedzieć, która część strony jest klikalna jest ważną częścią projektu UX. Starym, ale złotym sposobem było zmienienie koloru tekstu i podkreślenie go. Obecnie dzięki CSS istnieje wiele innych sposobów dostarczania efektów najechania, szczególnie na obrazy.
Deweloperzy mogą teraz dodaj efekty przejścia lub animację, gdy zostanie wywołane zdarzenie najechania. Patrzymy na slajdy kierunkowe, powiększamy przy różnych prędkościach, zanikach i zanikach, efektach zawiasów, reflektorach ujawniają, wychylają się, odbijają i nie tylko.
W tej kompilacji są ponad 250 efektów najechania inspirować cię. Możesz także odebrać kod u źródła.
Efekty najechania obrazem (16 efektów)
Na tej stronie znajdziesz ładną kolekcję 16 efektów najeżdżających z napisami. Chwyć kod HTML i CSS dla każdego efektu, umieszczając kursor nad obrazami, a następnie klikając Pokaż kod.
Animacja najeżdżania na napisy (4 efekty)
Oto 4 fajne animacje napisów, które działają, gdy najedziesz kursorem na obraz. Efekty są budowane z czystymi przejściami i transformacjami CSS3, a bez JavaScript, aby zwiększyć kompatybilność w przeglądarce.
iHover (35 efektów)
iHover to zbiór efektów najechania obsługiwanych przez CSS3. Jest 20 efektów najechania na koło i 15 efektów najechania kwadratem. Aby użyć efektów, musisz napisać znaczniki HTML i dołączyć pliki CSS.
Unieś obraz (44 efekty)
Ta biblioteka zawiera 44 efekty wykonane za pomocą czystego CSS. Niektóre efekty obejmują zanikanie, popychanie, przesuwanie, zawiasy, odsłanianie, powiększanie, rozmywanie, przesuwanie, fałdy i okiennice w wielu kierunkach. Istnieje rozszerzona wersja 216 efektów, które można kupić za 14 €.
Hover Effect Ideas (30 efektów)
Ta wersja demonstracyjna na obrazie wykonana przez Codrop daje inspirację podczas płynnych przejść między obrazami i ich podpisami. W dwóch zestawach jest 30 efektów z samouczkami i kodem źródłowym.
Najedź CSS (108 efektów)
Hover CSS umożliwia dodawanie efektów najechania do dowolnego elementu, takiego jak przycisk, link lub obraz. Efekty obejmują przejścia 2D, przejścia w tle, obramowanie, przejścia Cień i Blask i wiele innych. Biblioteka jest dostępna w CSS, Sass i LESS.
Animatyzm (100+ efektów)
Istnieje ponad 100 animacji najechania obrazkiem na przyciski, nakładki, szczegóły, podpisy, obrazy i przyciski mediów społecznościowych. Wszystkie efekty są zasilane przez CSS3.
Efekt zawisu podpisu (7 efektów)
W tej kolekcji jest 7 różnych efektów. Wszystkie przejścia wyglądają naprawdę ładnie i gładko. Przejdź do sekcji samouczka, aby dowiedzieć się, jak zastosować te efekty w projekcie.
Efekty Cover Image Cover (15 efektów)
Zbiór prostych efektów najechania, takich jak powiększanie, przesuwanie, obracanie, skala szarości, rozmycie, krycie i inne podstawowe efekty. Możesz użyć tych efektów, dodając klasę CSS przed swoją postać etykietka.
Zorientowany na kierunkowy efekt 3D
Jest to super fajny efekt najechania, który wykryje twój ostatni ruch myszy. Podpisy obrazów zostaną otwarte z jednego z czterech kierunków w oparciu o ostatnią pozycję kursora.
Najedź animacją
Oto animacja na zawiasach granicznych inspirowana UNIQLO. Po zdarzeniu, obramowanie obrazu zostanie animowane.
Płytki z animowanym zawisłaniem
Jeden z nich do projektowania płytek, ten ma między innymi powolne powiększanie, slajdy, pop-ins, przyciemnioną nakładkę.
SVG clip-Path Hover Effect
Niesamowity efekt przesuwania obrazu reflektorów rentgenowskich dzięki SVG ścieżka klipu i przejścia CSS. Działa dobrze w Chrome, Operze i Safari.
