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:
Step #1
Teraz obrazek jaki zostanie pokazany po najechaniu na element:
Step #2

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:
Step #3

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

7 Responses to “Szybszy CSS Rollover effect”

  1. D4rky February 25, 2007 at 8:34 pm #

    Riddle już o tym pisał

  2. radmen February 25, 2007 at 8:34 pm #

    Heh nie wiedziałem..

  3. kubarek February 25, 2007 at 8:34 pm #

    jak można nie wiedzieć, co pisuje riddle, największa szycha na joggerze ;-)

  4. radmen February 25, 2007 at 8:34 pm #

    Można, można ;p

  5. G February 25, 2007 at 8:34 pm #

    ej, ba, toć on nawet dwa razu już o tym pisał…

  6. radmen February 25, 2007 at 8:34 pm #

    Ok, zdejmuje to z głównej. Nie miałem pojęcia no ;p

  7. Yano February 25, 2007 at 8:34 pm #

    Zanim Riddle to opisał, to ja zamieściłem artykuł w FAQ grupy pl.comp.www. :P
    Niestety ówczesne FAQ obecnie nie działa. Ale w archiwum wpis się zachował. :) Może trochę inaczej opisane, ale zasada jest dokładnie ta sama.