Strona głównaFacebookTwitterInstagramRSS
Dzisiaj jest niedziela, 30 kwietnia 2017
Historia mojego... sukcesu?Rozdzielczość druku wielkoformatowegoPobierz Alib CyMeS 6.0 za friko
Scroll Baner jako wtyczka do WP

Scroll Baner jako wtyczka do WP

piątek, 2012-12-210

Wszyscy chyba znają moją niechęć do WordPressa (zresztą dlatego właśnie napisałem własny CMS), ale czasami bywa tak, że człowiek ma potrzebę zrobienia czegoś wbrew sobie.

O animowanym banerze pisałem już tutaj. Ogólnie jest to rzecz prosta dla kogoś, kto się zna na programowaniu. Są jednak ludzie, którzy mają nieco mniejsze pojęcie o tym i wolą wszystko wyklikać. Dla nich napisałem mały, darmowy plugin do WordPressa.

Instalacja

Instalacja pluginu jest banalnie prosta: rozpakowujemy paczkę i kopiujemy cały folder do "/wp-content/plugins/" a następnie włączamy w panelu admina. Nie obejdzie się jednak bez ingerencji w szablon. Trzeba mianowicie dodać w wybranym przez nas miejscu (najlepiej gdzieś w nagłówku) kawałek kodu:
<div id="nazwa_kontenera"></div>
gdzie nazwa_kontenera może być dowolna, byle nie kolidowała z innymi identyfikatorami używanymi na stronie.

Konfiguracja

Opcje Scroll Banera

Teraz czas na trochę zabawy. Należy bowiem przygotować kilka (maksymalnie 5) warstw przeznaczonych do animacji. Obowiązkowo muszą to być pliki PNG, żeby przez miejsca przezroczyste było widać dalsze warstwy. Ogólną zasadą jest, żeby dalsze warstwy były mniej widoczne (bledsze) niż bliższe. I nie chodzi mi o stopień krycia tylko użyte kolory. Szerokości każdej warstwy mogą być dowolne (im większe tym lepiej, żeby się nie powtarzały zbyt często) ale wysokość musi być dla wszystkich identyczna.

Pliki PNG ładujemy następnie w zakładce Konfiguracja Scroll Banera. Tutaj też ustawiamy inne parametry:

  • Nazwa identyfikatora kontenera - to ta sama nazwa, którą nadaliśmy kontenerowi w szablonie.
  • Wysokość kontenera - wysokość wszystkich plików graficznych.
  • Opóźnienie ruchu banera - opisywany kiedyś przeze mnie parametr delay czyli interwał czasowy pomiędzy kolejnymi fazami animacji - im większa wartość tym wolniejszy ruch.

Warstwy w konfiguratorze ustawione są od najdalszej do najbliższej, o czym trzeba pamiętać podczas dodawania plików graficznych. Po dodaniu pliku należy podać szybkość przesuwania danej warstwy. Tu też jest zasada, że im dalsza warstwa tym mniejsza prędkość. Ale niekoniecznie. Być może w jednej ze środkowych warstw ktoś doda szybko przelatujący samolot, więc ta warstwa powinna być najszybsza. Oczywiśćie najlepiej poeksperymentować.

Po dodaniu pliku pojawi się ikonka oka, która pozwoli na podejrzenie wczytanej grafiki. Checkbox kasowanie pliku graficznego umożliwi skasowanie grafiki, jeśli okaże się zbędna.

I w zasadzie tyle. Wtyczkę można pobrać z plikowni.

Życzę udanego scrollowania!

Spodobał Ci się wpis? Udostępnij go w Social Media:
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na