Jak wyświetlać obiekty w oparciu o zdarzenia podczas przewijania strony?
Animacje On-scroll  są popularnym efektem w nowoczesnych stronach internetowych. Elementy HTML pozostają ukryte dopóki użytkownik nie przewinie strony, przy czym element pojawia się z animacją, która sprawia, że strona wygląda bardziej dynamicznie.

Ten poradnik wyjaśnia, jak uzyskać taki efekt. Obiekt zakładka obsługuje 3 zdarzenia, które sprawiają, że możliwe jest uruchomienie działań w oparciu o pozycję podczas przewijania strony:

Krok 2

Chcemy, aby obiekt był wtedy wyświetlany gdy cały staje się widoczny w oknie, więc dodajemy zakładkę obok tego obiektu. Zakładka powinna być tej samej wielkości co obiekt lub należy ją umieścić aby jego dolna krawędź zrównała się z dolną krawędzią obiektu bo tylko wtedy zdarzenie zostanie uruchomione gdy cały obiekt (zakładka)znajdzie się w polu widoczności.

Animacje CSS3
Uwaga:
Liczba widocznych obiektów może być różna dla każdego użytkownika, w zależności od rozdzielczości ekranu urządzenia / lub okna przeglądarki.
Więc niektórzy użytkownicy mogą mieć pasek przewijania, podczas gdy inni użytkownicy będą widzieć całą zawartość na raz (w zależności od długości strony na ekranie urzadzenia)
Krok 1

Utwórz stronę z wystarczającą zawartością, aby strona była dostatecznie"długa" i nie mieściła się w oknie podczas podglądu (w pionie). W tym tutorialu Użyłem 10 pionowo umieszczonych takich samych obiektów Kształty.
Przy użyciu animacji CSS3 możemy tworzyć wiele fajnych i złożonych efektów "ożywiających" stronę.
Aby dowiedzieć się, jak korzystać  z animacji CSS w oparciu o zdarzenia proszę przeczytać ten poradnik:(ang.)
http://www.wysiwygwebbuilder.com/animation_events.html

Oto pokaz z animacji CSS3:
(ang.) http://www.wysiwygwebbuilder.com/support/bookmarkevents/animations.html
(pol.)  http://www.wysiwygwebbuilder11.pl/support/bookmarkevents/animations.html

Tutaj można pobrać przykładowy projekt bookmarkevents+animations (ang.):
http://www.wysiwygwebbuilder.com/support/bookmarkevents/bookmarkevents.zip

Tutaj lista niektórych zdarzeń

Krok 3

Teraz możemy ukryć obiekty Kształt, aby początkowo były niewidoczne:
kliknij prawym przyciskiem myszy obiekt i wybierz "Hide" lub użyj Manadżera Obiektów. Możesz również ukryć wszystkie obiekty Kształt  hurtem zaznaczając je kolejno w oknie roboczym przy użyciu myszy przytrzymując jednocześnie klawisz SHIFT, po zaznaczeniu użyj "Hide" z paska menu lub menu kontekstowego (PPM na którymś z zaznaczonym obiektów) .
Krok 4
Otwórz właściwości (kotwicy1) Zakładki1 i przejdź do karty  "Zdarzenia".
Dodaj zdarzenie "onscrollreveal", ustaw akcję na "Show with Effect", użyj efektu "Fade" i wybierz identyfikator obiektu który chcesz ujawniać (Shape1 dla Zakładki1) przy pomocy tego zdarzenia.
Następnie otwórz właściwości Zakładki2 i powtórz czynności/ustawienia jak wyżej wybierając oczywiście Shape2 dla Zakładki2. Powtórz to dla wszystkich zakładek podstawiając Shape3 dla Zakładki3, Shape4 dla Zakładki4  itd...
Możesz również zmienić Effekt np. na Slide Right lub inny..

Krok 5
Użyj Podgląd Strony lub opublikuj aby zobaczyć efekt działania. Obiekt będzie pojawiać się w polu widzenia podczas przewijania strony.
Demo:
(ang.) http://www.wysiwygwebbuilder.com/support/bookmarkevents/index.html

(pol.) http://www.wysiwygwebbuilder11.pl/support/bookmarkevents/index.html
onscrollreveal
Uruchamiany gdy zakładka jest całkowicie widoczna w oknie przeglądarki.

onscrollrevealpartial
Uruchamiany gdy zakładka jest  częściowo widoczna w oknie przeglądarki.

onscrollhide
Uruchamiany gdy zakładka jest w trakcie przewijana i  wychodzi poza obszar widoczności w oknie przeglądarki.







Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017