close
korona-ziemi

WebSlides to nowe narzędzie, które pozwala na proste tworzenie prezentacji. W tym artykule zrobimy pokaz slajdów przedstawiający Koronę Ziemi.

Przygotowania

Na początku musimy pobrać potrzebne pliki. Przejdź na stronę WebSlides i kliknij przycisk WebSlides 0.1 (lub wyższa wersja, jeśli jest dostępna). W tym przykładzie z całej paczki będziemy potrzebować 3 plików: base.csscolors.css webslides-lite.js. Dla dodania kilku animacji korzystamy jeszcze z animate.css.

Początkowa struktura HTML wygląda tak:

Zmiana fonta jest konieczna, ponieważ domyślny nie obsługuje polskich znaków. Cały kod będziemy umieszczać wewnątrz article. Możemy teraz przejść do tworzenia slajdów.

1. Korona Ziemi

“Korona Ziemi” to slajd wprowadzający. Składa się z czterech elementów: tło, nagłówek, logo i przycisk.

Klasa .aligncenter wyśrodkowuje tekst. W tle odtwarzamy film o nazwie mountains.mp4 umieszczony w katalogu videos. Video startuje automatycznie (autoplay), odtwarzane jest w pętli (loop) i ma wyciszony dźwięk (muted).

Klasa nagłówka .text-landing transformuje tekst na wielkie litery i zwiększa odstępy między literami.

Wewnątrz footer umieszczamy logo i button. Pozycjonowanie elementów odbywa się przez dodanie klas .alignleft i  .alignright. Klasa .button dodaje domyślne style przycisku. Jeśli chcesz je zmienić, to możesz dopisać własne style. Ja dodałem:

wprowadzenie

2. Mount Everest

Treść slajdów domyślnie jest wyśrodkowana w pionie. Aby to zmienić, musimy dodać klasę .slide-top lub .slide-bottom do sekcji. Klasa .bg-black kontroluje kolor tekstu (biały). Klasa .bg-white zmieniłaby kolor tekstu na czarny.

Klasa .fadeInLeft to klasa pochodząca z animate.css. .text-context używa pseudo-elementu before do utworzenia linii oddzielającej.

mount everest

3. Aconcagua

W tym slajdzie na tekście używany klasy .text-shadow. Daje to ciekawy efekt lekkiego cienia.

Nie używamy tutaj klasy .text-context, dlatego linia oddzielająca nie istnieje.

aconcagua

4. McKinley

W slajdzie “McKinley” używamy klasy .slide-bottom, która umieszcza treść na dole.

mckinley

5. Kilimandżaro

Tutaj wykorzystujemy tylko jedną nową klasę – .content-right, która wyrównujemy treść do prawej strony.

kilimandżaro

6. Mont Blanc

W tym slajdzie do sekcji dodajemy klasę .montblanc.

Z jakiegoś powodu w obecnej wersji WebSlides linia oddzielająca nie zostaje poprawnie wyśrodkowana. Dodajemy poprawkę:

mont blanc

7. Góra Kościuszki

Ten slajd jest bardzo podobny do “McKinley”. Nie używamy tutaj animacji “wjazdu”.

góra kościuszki

8. Masyw Vinsona

Slajd analogiczny do “Mount Everest”. Nie używamy tutaj animacji “wjazdu”.

masyw vinsona

I to już koniec. Stworzyliśmy prosty pokaz slajdów.

W tym artykule opisałem tylko małą część z możliwości WebSlides, dlatego zachęcam Cię do sprawdzenia demonstracji przygotowanych przez autorów narzędzia.

Pobierz pliki | Zobacz demo

pobierz google drive
Jak pobrać pliki?

 

Dzięki za uwagę 🙂

Tags : pokaz slajdówprezentacjawebslides