Jak stworzyć efekt rollover?

Aby stworzyć efekt rollover, nie powinieneś posiadać żadnych specjalnych umiejętności w zakresie web designu. Pokażę Ci 3 sposoby z pomocą których można szybko osiągnąć tego efektu na zdjęciach.

Przede wszystkim potrzebujesz dwóch zdjęć o tym samym rozmiarze. Skorzystaj z Photoshopa lub innego edytora graficznego aby dopasować zdjęcia. Zwróć uwagę, że rozmiar zdjęć powinien być zoptymalizowany, jeśli chcesz aby strona www szybko się ładowała.

Metody tworzenia efektu rollover

Istnieje kilka sposobów, aby stworzyć efekt rollover: z pomocą JavaScript, CSS lub HTML.

Metoda oparta o techologię HTML

Jeśli wybierzesz technologię HTML, nie będzie mógł dodać efektu przejścia. Ale jmożna skorzystać z kodu HTML z rolowaniem:

See the Pen Image rollover HTML only by Helen (@CF-251) on CodePen.See the Pen Image rollover HTML only by Helen (@CF-251) on CodePen.

• 'src' atrybut posiada oryginalne zdjęcie
• 'onmouseover' wskazuje które zdjęcie zostanie wyświetlone po najechaniu kursorem na oryginalne zdjęcie
• 'onmouseout' wskazuje które zdjęcie zostanie wyświetlone po dezaktywacji wyświetlanego zdjęcia (tj. Po usunięciu wskaźnika)

Jak widzisz, ten sposób jest dość łatwy, ale mimo to z jego pomocą nie można sprawić, by efekt rollover był płynny.

Metoda oparta o techologię CSS

Drugi sposób opisuje stworzenie efektu rollover za pomocą stylów:

See the Pen Image rollover using CSS by Helen (@CF-251) on CodePen.See the Pen Image rollover using CSS by Helen (@CF-251) on CodePen.See the Pen Image rollover using CSS by Helen (@CF-251) on CodePen.See the Pen Image rollover using CSS by Helen (@CF-251) on CodePen.

Ten proces jest również dość łatwy. Zdjęcie tła bloku zmienia się podczas aktywacji zdjęcia, ale płynne przejście czyni go bardziej atrakcyjnym, prawda?

Te same techniki są używane do tworzenia efektów nakładki w szablonach HTML TemplateMonster.

Metoda oparta o technologię JS

Trzecia metoda przewiduje korzystanie tego skryptu:

See the Pen Image rollover with JS by Helen (@CF-251) on CodePen.See the Pen Image rollover with JS by Helen (@CF-251) on CodePen.

Nie jest ona tak prosta jak dwie poprzednie, ale również działa również

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create a Rollover Image Effect.

Mój wybór

Mój wybór padł na metodę CSS; jest dość wygodna i co najważniejsze niezawodna. Ponadto, jako mówią webmasterzy: wszystko, co można zrobić przy pomocy CSS, powinno być zrobione przy pomocy CSS!