MC, 16:29 sobota, 31.03.2012 r.
Ilustracja do artykułu: jQuery Approach - Animacja CSS w zależności od położenia kursora od obiektu

jQuery Approach - Animacja CSS w zależności od położenia kursora od obiektu

Kolejny ciekawy plugin do jQuery. Ten pozwala na animowanie CSS w zależności od dystansu pomiędzy obecnym położeniem kursora, a obiektem, którego dotyczy animowanie. Proste, ciekawe, warte polecenia.

Jak to działa?

Wykorzystanie tego pluginu jest bardzo proste. Wystarczy dołączyć go do strony wraz z jQuery oraz jQueryUI i mamy wtyczkę gotową do użycia. Po demo oraz sam skrypt odsyłam na stronę autora - jQuery Approach. Ja pokażę jedynie prosty przykład użycia.

HTML:

<div id="animowany_obiekt">
Przykładowa treść poddawana animacji.
</div>

Javascript:

<script type="text/javascipt">
$("#animowany_obiekt").approach({
"fontSize": "75px",
"color": "#2D3B61"
}, 150);
</script>

O co chodzi?

Jak widać w powyższym przykładzie, mamy obiekt, którego styl chcemy animować. Odnosimy się zatem do niego w skrypcie przez użycie selektora, w tym wypadku dla parametru id. Następnie definiujemy docelowy styl oraz odległość kursora od obiektu, dla której ma zacząć się animacja. U nas jest to 150px, co oznacza, że dopiero gdy zbliżymy kursor na taki dystans rozpocznie się animacja która będzie postępować aż do momentu, w którym kursor znajdzie się w odległości 0.

Myślę, że ten plugin może się nie raz przydać, dlatego też postanowiłem zanotować na łamach strony jego istnienie.

Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!

Imię:
Treść: