Szybszy CSS Rollover effect

To jest mały przykład jak wykonań za pomocą CSS prosty efekt rollover. Czym on będzie się różnić od innych? Normalnie po najechaniu na element zmienia się jago tło. W tym momencie przeglądarka ładuje nowy obrazek będący tłem, a to czasami może zająć troszkę czasu i efekt będzie opóźniony.

Sposób, który opiszę polega na tym, że jest ładowany tylko jeden obrazek. Po najechaniu na element, obrazek tła po prostu przesuwa się. Czyli efekt mamy natychmiastowy.

Stwórzmy najpierw obrazek dla tła, który będzie normalnie widoczny. Dla celów tego przykładu wykonałem coś takiego:

Teraz obrazek jaki zostanie pokazany po najechaniu na element:


Teraz łączymy te obrazki w takie sposób: [normalny obrazek]|[obrazek widoczny po najechaniu]. Czyli bardzie ludzko mówiąc w tym przykładzie po prostu stworzyłem obraz dwa razy dłuższy od tych, które widać było wcześniej. Ten widoczny normalnie dałem po lewej stronie, a ten będący efektem rollover po prawej stronie. Obrazek powinien wyglądać mniej więcej tak:

Teraz przejdźmy do CSSa:

#element
{
width: 253px; /* To jest polowa dlugosci zlaczonego obrazka */
height: 76px; /* To akurat jest wysokosc obrazka ;p */
background-image: url("obrazek.png");
background-position: top left;
}

Zasada jest taka. Po najechaniu na element nasze tło (w tym przykładzie plik "obrazek.png") musi się przesunąć o połowę jego długości w prawo. Czyli to powinno wyglądać mniej więcej tak:

#element:hover
{
background-position: 253px 0; /* to wszystko :P */
}

Tak to właśnie wygląda. Jeśli chcesz zobaczyć "w akcji" ten efekt to zapraszam na http://radmen.info/ tam wprawdzie są inne obrazki, ale wykorzystano dokładnie ten sam efekt.

Gdyby się ktoś chciał uczepić to nie jest mój pomysł. Dawno temu (chyba jakiś rok temu) przeszukiwałem DIGGa i właśnie znalazłem notkę na jakimś blogu o tym tricku. Dzisiaj sobie o tym przypomniałem i pomyślałem, że napiszę. :P

Komentarze

Disclaimer

Dodaj komentarz