Oto jeden, całkiem prosty sposób, dzięki któremu ożywimy wygląd strony i sprawimy by był bardziej dynamiczny.
Mowa o bardzo popularnym efekcie ruchomego tła, który można uzyskać np. dzięki wtyczce do jQuery - Stellar
Krótko, technicznie, jak to działa...
w znacznikach div ustawiamy tła strony, którymi sterujemy poprzez dodanie odpowiednich atrybutów wtyczki Stellar
Wtyczka wraz z przewijaniem strony zmienia pozycje teł z odpowiednią prędkością...
Zobacz demo działania wtyczki
Bezsensowne jest wyjaśnianie z mojej strony konfiguracji wtyczki, gdyż jest ona wyjątkowo prosta i zaopatrzona w jasną dokumentację:
dokumentacja wtyczki Stellar
Jak widać główne parametry do ustawienia to współczynnik prędkości przewijania tła oraz pozycja tła.
Możemy też zdefiniować, czy chcemy przewijać tło poziomo, czy pionowo. No i co ciekawe wtyczka nadaje się do Responsive Design :)
Więcej szczegółów w dokumentacji oczywiście...
A tutaj przykładowa strona wykorzystująca całkiem efektownie wtyczkę: getsite4business.co.uk
Plik skryptu waży niecałe 13kB
Naprawdę ciekawy efekt można uzyskać dzięki tej wtyczce. Używam jej na jednej ze stron firmowych klienta, gdzie w tle ciekawie zaprezentowałem ofertę firmy.
OdpowiedzUsuńno tak... demo autora to tylko podstawowe działanie wtyczki... tak naprawdę jakie cuda można osiągnąć zależy tylko od webmastera :)
OdpowiedzUsuńJak dla mnie robi wielkie wrażanie tapetka :)
OdpowiedzUsuńFaktycznie może by spróbować to wstawić do strony gdzieś do czegoś. Bardzo interesujące dodaję urozmaicenia :)