Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Blog Layer Sliders - najlepsze slidery wielowarstwowe

Blog

Layer Sliders - najlepsze slidery wielowarstwowe

Bartosz Romanowski 28 stycznia 2013 komentarze ()

Tagi:JavaScript jQuery skrypty slider

LayerSlider Slidery wyświetlające wiele niezależnych warstw (layer sliders) stały się w ostatnim czasie bardzo popularne, głównie dlatego, że są niesamowicie efektowne. Niestety, aby wyglądały one dobrze trzeba poświęcić trochę czasu na odpowiednie przygotowanie slajdów oraz konfigurację.

Slidery wielowarstwowe pozwalają na wyświetlanie slajdów złożonych z wielu warstw. Każda z warstw może zawierać tekst, kod HTML, zdjęcie, a nawet film. Dla każdej z warstw można ustawić inny efekt przejścia (czasem mogą to być dwa efekty - wejściowy i wyjściowy) oraz opóźnienie, dzięki czemu pojawiają się one w różny sposób i w różnym czasie. Ta właśnie funkcja pozwala na tworzenie bardzo efektownych prezentacji.

Jeśli wciąż nie jesteś sobie w stanie wyobrazić jak działa taki slider, to zapraszam do obejrzenia wersji demonstracyjnych opisanych skryptów (odpowiednie linki znajdują się pod każdym z nich). Warto również zerknąć na zamieszczony niżej film, prezentujący możliwości trzech wybranych skryptów.

Parallax Content Slider

Parallax Content Slider

To jeden z niewielu darmowych skryptów pozwalających na stworzenie wielowarstwowego slidera. Poza wieloma niezależnymi warstwami skrypt ten posiada możliwość ustawienia przesuwającego się niezależnie tła (efekt paralaksy).

Cena: darmowy
Licencja: własna

Linki: oficjalna strona | demo | do pobrania

LayerSlider

LayerSlider

Bardzo zaawansowany slider wielowarstwowy z efektowną wersją demonstracyjną. Posiada pięć trybów wyświetlania - zwykły, responsywny, na pełną szerokość okna przeglądarki oraz połączenie dwóch ostatnich trybów. Posiada pełne wsparcie dla filmów umieszczonych w serwisach YouTube i Vimeo, preloading obrazów, linkowanie do warstw oraz dowolnych adresów URL oraz linkowanie do poszczególnych slajdów. Dostępne są trzy rodzaje nawigacji pomiędzy slajdami - miniaturki, miniaturki z przyciskami oraz same przyciski (wszystkie te elementy mogą się automatycznie ukrywać). Slider wspiera również nawigację za pomocą klawiatury.

Skrypt działa poprawnie na wszystkich aktualnych przeglądarkach, w tym (co ciekawe) na IE7. Posiada rozbudowane API dla programistów JavaScript, szczegółową dokumentację, 8 skórek oraz przykłady.

LayerSlider dostępny jest również jako wtyczka dla WordPressa, która zawiera bardzo rozbudowany panel do tworzenia slajdów. Rzecz godna polecenia.

Demonstrację działania tego skryptu można zobaczyć na zamieszczonym powyżej filmie.

Cena: 10 dolarów (wtyczka dla WordPressa - 15 dolarów)
Licencja: GPL

Linki: oficjalna strona | demo | do pobrania

Slider Revolution

Slider Revolution

Kolejny rozbudowany skrypt do tworzenia wielowarstwowych sliderów. Udostępnia on wiele atrakcyjnych wizualnie efektów przejścia dla warstw, w tym wiele dostępnych w CSS3 (jeśli przeglądarka nie obsługuje któregoś z efektów, to wykorzystywana jest biblioteka jQuery). Slider Revolution posiada wsparcie dla filmów z YouTube i Vimeo (w tym również odtwarzania pełnoekranowego), obsługę gestów w systemach iOS i Android oraz ukrywanie wybranych elementów w zależności od aktualnej szerokości (przydatne w serwisach responsywnych). Skrypt udostępnia 10 animacji dla warstw i 20 efektów przejść, które można dowolnie łączyć. Programiści JavaScript z pewnością docenią API, pozwalające na sterowanie sliderem.

Slider Revolution dostępny jest również jako wtyczka dla WordPressa, która posiada wygodny edytor drag & drop o dużych możliwościach (moim zdaniem najlepszy ze wszystkich tego typu narzędzi).

Demonstrację działania tego skryptu można zobaczyć na zamieszczonym powyżej filmie. Na stronie skryptu znajduje się również lista kilkunastu przykładów zastosowania tego slidera w działających stronach WWW.

Cena: 12 dolarów (wtyczka dla WordPressa - 15 dolarów)
Licencja: GPL

Linki: oficjalna strona | demo | do pobrania

Parallax Slider

Parallax Slider

Parallax Slider to praktycznie cztery slidery w jednym, z czego każdy jest dostępny w czterech wersjach: o stałej szerokości, o szerokości okna przeglądarki, responsywnej i sidebar (coś w rodzaju banera reklamowego).

Classic to standardowy, wielowarstwowy slider. Perpetuum Mobile to slider pozwalający na umieszczenie elementów, które będą animowane w pętli (przydatne na przykład do tła z efektem paralaksy). Mouse Interaction to slajdy, których elementy reagują na poruszanie kursorem myszy. Ultra pozwala na ustawienie niezależnie przesuwającego się tła (efekt paralaksy), zbudowanego z wielu warstw.

Wszystkie slidery są responsywne, posiadają wsparcie dla ekranów dotykowych, nawigację w formie kropek i miniaturek, wsparcie dla filmów z serwisów YouTube i Vimeo i pozwalają na linkowanie slajdów. Czas pozostały do kolejnego slajdu jest przedstawiony w formie animowanego kółeczka, umieszczonego w prawym górnym rogu slidera.

Skrypt jest stosunkowo elastyczny - do dyspozycji dostajemy ponad 50 różnym ustawień i opcji.

Cena: 10 dolarów
Licencja: GPL

Linki: oficjalna strona | demo | do pobrania

Bartosz Romanowski

Programista, gadżeciarz, krytyczny miłośnik produktów Apple, fan ciężkich brzmień i niepoprawny pesymista.


Zobacz także

Komentarze

Tematy


Popularne wpisy

Autorzy bloga



HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook