Jak zanikać obrazki po najechaniu myszą w WordPress (proste i łatwe)

Czy chcesz wygaszać obrazki po najechaniu myszką w WordPress?

Prosta animacja fade-in lub fade-out, gdy użytkownik przesuwa myszką nad obrazkiem, może sprawić, że twoja witryna będzie bardziej wciągająca. Zachęca również odwiedzających do interakcji z twoją treścią, co może zatrzymać ich na twojej witrynie na dłużej.

W tym artykule pokażemy, jak dodać efekt zanikania obrazka po najechaniu myszką w WordPress.

Po co wygaszać obrazki po najechaniu myszą w WordPressie?

Animacje są łatwym sposobem na uczynienie witryny internetowej bardziej interesującą, a nawet mogą przyciągnąć uwagę odwiedzającego do najważniejszych treści twojej strony, takich jak logo witryny lub wezwanie do działania.

Istnieje wiele różnych sposobów korzystania z animacji CSS w WordPress, ale dodanie efektu najechania kursorem do obrazków jest szczególnie skuteczne. Animacja zanikania oznacza, że twoje obrazki będą powoli pojawiać się lub znikać po najechaniu na nie przez odwiedzających.

Zachęca to ludzi do interakcji z twoimi obrazkami, a nawet może dodać element opowiadania historii do strony. Na przykład, różne obrazki mogą się pojawiać i znikać, gdy użytkownik porusza się po stronie.

W przeciwieństwie do niektórych innych animacji, efekt zanikania obrazu po najechaniu myszą jest subtelny, więc nie wpłynie negatywnie na wrażenia z czytania ani na optymalizację obrazka.

Powiedziawszy to, pokażmy, jak dodać zanikanie do twoich obrazków po najechaniu myszką w WordPress. Wystarczy skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Dodanie zaniku obrazu po najechaniu myszą do wszystkich obrazków WordPressa

Najprostszym sposobem na dodanie efektu zanikania do wszystkich twoich obrazków jest użycie WPCode. Ta darmowa wtyczka umożliwia łatwe dodawanie własnego kodu w WordPressie bez konieczności edytowania plików twojego motywu.

Dzięki WPCode nawet początkujący mogą edytować kod swojej witryny internetowej bez ryzyka błędów i literówek, które mogą powodować wiele typowych błędów WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć darmową wtyczkę WPCode. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu udaj się do Code Snippets ” Add Snippet.

Tutaj zobaczysz wszystkie gotowe fragmenty kodu WPCode, które możesz dodać do swojej witryny. Obejmują one fragment kodu, który pozwala całkowicie wyłączyć komentarze, przesyłać rodzaje plików, których WordPress zwykle nie pomaga technicznie, wyłączać strony załączników i wiele więcej.

Po prostu najedź kursorem myszy na „Dodaj swój własny kod”, a następnie kliknij „Użyj fragmentu kodu”, gdy się pojawi.

Na początek wpisz tytuł własnego fragmentu kodu. Może to być cokolwiek, co pomoże zidentyfikować fragment kodu w kokpicie WordPress.

Aby dodać własny CSS do WordPressa, otwórz menu rozwijane „Rodzaj kodu” i wybierz „Fragment kodu CSS”.

W edytorze kodu dodaj następujący fragment kodu:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Ten fragment kodu wygasza każdy obrazek na 2 sekundy, gdy użytkownik najedzie na niego myszką. Aby obrazek zanikał wolniej, wystarczy zastąpić „2s ease” wyższą liczbą. Jeśli chcesz, aby obraz zanikał szybciej, użyj wartości „1s ease” lub mniejszej.

Możesz także zwiększyć lub zmniejszyć krycie, zmieniając linię krycia:0.6.

Jeśli zmienisz którąkolwiek z tych liczb, upewnij się, że zmienisz je we wszystkich właściwościach (webkit, moz, ms i o), aby efekt zanikania wyglądał tak samo w każdej przeglądarce.

Gdy będziesz zadowolony z fragmentu kodu, przewiń do sekcji „Wstaw”. WPCode może dodać twój kod do różnych miejsc, takich jak po każdym wpisie, tylko frontend lub tylko administrator.

Aby dodać efekt zanikania do wszystkich twoich obrazków, kliknij opcję „Auto Insert”, jeśli nie jest jeszcze wybrana. Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.

Następnie możesz przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywne”, aby zmienił się na „Aktywne”.

Na koniec kliknij przycisk „Zapisz fragment”, aby uruchomić fragment kodu CSS.

Teraz, jeśli najedziesz myszką na dowolny obrazek na twojej witrynie internetowej WordPress, zobaczysz efekt zanikania w działaniu.

Metoda 2: Dodawanie animacji zanikania obrazków do poszczególnych stron

Używanie efektu zanikania dla każdego pojedynczego obrazka może rozpraszać uwagę, zwłaszcza jeśli prowadzisz witrynę internetową z fotografiami, sklep ze zdjęciami stockowymi lub jakąkolwiek inną witrynę zawierającą wiele obrazków.

Mając to na uwadze, możesz chcieć użyć efektów zanikania tylko na określonej stronie lub wpisie.

Dobrą wiadomością jest to, że WPCode umożliwia tworzenie własnych krótkich kodów. Możesz umieścić ten krótki kod na dowolnej stronie, a WordPress pokaże efekty zanikania tylko na tej stronie.

Aby to zrobić, wystarczy utworzyć własny fragment kodu i dodać kod animacji zanikania zgodnie z tym samym procesem opisanym powyżej. Następnie kliknij przycisk „Zapisz fragment kodu”.

Następnie przewiń do sekcji „Wstaw”, ale tym razem wybierz „Krótki kod”.

Tworzy to krótki kod, który można dodać do dowolnej strony, wpisu lub obszaru gotowego na widżet.

Następnie przejdź dalej i uruchom fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Możesz teraz przejść do dowolnej strony, wpisu lub obszaru gotowego na widżet i utworzyć nowy blok „Krótki kod”. Następnie wystarczy wkleić krótki kod WPCode do tego bloku.

Więcej informacji na temat umieszczania krótkiego kodu można znaleźć w naszym przewodniku na temat dodawania krótkiego kodu w WordPress.

Po zakończeniu kliknij przycisk „Aktualizuj” lub „Opublikuj”, aby uruchomić krótki kod. Następnie możesz przejść na tę stronę, podstronę lub obszar gotowy na widżet, aby zobaczyć efekt fade-on mouseover.

Metoda 3: Dodawanie animacji zanikania obrazu do wyróżniających się obrazków

Inną opcją jest dodanie animacji wygaszania do twoich wyróżniających się obrazków lub miniaturek wpisów. Są to główne obrazki wpisów i często pojawiają się obok nagłówka na twojej stronie głównej, stronach archiwum i innych ważnych obszarach witryny internetowej.

Dzięki wygaszaniu wyróżniających się obrazków po najechaniu myszą, możesz sprawić, że twoja witryna będzie bardziej przyciągająca wzrok i angażująca bez konieczności animowania każdego pojedynczego obrazka na twoim blogu lub witrynie internetowej WordPress.

Aby dodać animację zanikania do twojej miniaturki, po prostu utwórz nowy własny fragment kodu, postępując zgodnie z tym samym procesem opisanym powyżej.

Tym razem jednak dodaj następujący kod do edytora:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Następnie przewiń do pola „Wstaw” i wybierz opcję „Wstaw automatycznie”.

Następnie otwórz menu rozwijane „Położenie” i wybierz „Nagłówek całej witryny”.

Następnie można przejść dalej i uruchomić fragment kodu, korzystając z tego samego procesu opisanego powyżej.

Teraz możesz najechać kursorem myszy na dowolny wyróżniający się obrazek, aby zobaczyć animację zanikania w działaniu.

Jeśli chcesz dodać jeszcze więcej efektów najechania na obrazek, zapoznaj się z naszym przewodnikiem na temat dodawania efektów najechania na obrazek w WordPress.

Bonus: Animowanie dowolnego obrazka, tekstu, przycisku i nie tylko za pomocą SeedProd

Efekty zanikania to zabawny sposób na uatrakcyjnienie obrazków, ale istnieje wiele innych sposobów wykorzystania animacji w WordPress. Na przykład, możesz użyć animacji flipbox, aby odsłonić tekst, gdy odwiedzający najedzie kursorem na obrazek lub efekty zoomu, aby użytkownicy mogli zbadać obrazek bardziej szczegółowo.

Jeśli chcesz wypróbować różne efekty, SeedProd oferuje ponad 40 animacji, które możesz dodawać do obrazków, tekstu, przycisków, filmów i nie tylko. Możesz nawet animować całe sekcje i kolumny za pomocą zaledwie kilku kliknięć.

W edytorze SeedProd wystarczy kliknąć treść, którą chcemy animować, a następnie wybrać kartę „Zaawansowane” w menu po lewej stronie.

Następnie możesz przejść dalej i kliknąć, aby rozwinąć sekcję „Efekty animacji”.

Następnie wystarczy wybrać animację z listy rozwijanej „Animacja wejścia”, w tym szeroką gamę różnych efektów zanikania.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tworzenia strony docelowej za pomocą WordPressa.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wygaszać obrazki po najechaniu myszką w WordPress. Zachęcamy również do zapoznania się z naszym przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania stron internetowych oraz z naszą ekspercką listą najlepszych wtyczek WordPress do tworzenia wyskakujących o kienek.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.