Oprogramowanie które sprawia że tworzenie stron internetowych staje się przyjemością
Korzystanie z przejść-przeksztełceń podczas przewijania strony
Podczas przewijanie można zastosować animację czyli zmianę właściwości CSS obiektów w oparciu o pozycję paska przewijania.
Na przykład można ustawić zmętnienie obiektu lub przenieść /przesunąć/ obrócić / skalować go na podstawie położenia podczas przewijania strony.

Ustawień przejść dla przewijania można konfigurować w Właściwości > CSS3 Animacje > Przejścia'. Wprowadzenie do używania przejść/przekształceń w formacie CSS3 znajdziesz w tym poradniku . Transitions tutorial.
Aby dodać przejścia przewijania, otwórz okno właściwości danego obiektu i przejdź do zakładki "CSS3 Animation" i kliknij przycisk "add" w sekcji Transition a w nowo otwartej karcie ustaw wyzwalacz (triger) na "scroll".
Do działania animacji podczas przewijania  wymagane są przynajmniej dwie wartości: początkowa i końcowa (zwane również  klatkami kluczowymi ), dlatego zawsze będzie się znajdować co najmniej dwa wpisy w sekcji Przejścia (transitions) . Pierwsza klatka kluczowa definiuje wartość początkową animacji, a druga wartość końcową. Na przykład możesz ustawić blaknięcie obiektu (opacity) na (0) jako początkowe a na wartość (1) jako końcowe . Możliwe jest również użycie większej liczby klatek kluczowych dla animacji bardziej złożonych.
Offset
Właściwość offset określa umiejscowienie klatki kluczowej względem kotwicy. Przesunięcie może być dodatnie lub ujemne.
Anchor (Kotwica)
Właściwość kotwicy (w połączeniu z przesunięciem) określa, w której pozycji przewijania zostanie uruchomiona klatka kluczowa.
Są dwa tryby uruchomienia klatek kluczowych: bezwzględny i względny
Tryb bezwzględny (lub tryb dokumentu)
Kluczowe klatki są definiowane jako wartości bezwzględne opisujące, ile strony przewinięto.
W trybie bezwzględnym używane są następujące wartości kotwienia:
"start" , właściwość offset określa przesunięcie od góry strony.
"end" , właściwość offset określa przesunięcie od dołu strony.
Należy zauważyć, że ten tryb jest użyteczny tylko przy użyciu stałego układu strony, w którym to przypadku pozycja obiektu jest zawsze taka sama.
Jeśli używasz "układu na siatce" (
layout grids) lub układu responsywnego z punktami przerwań, nie wiesz dokładnie, gdzie znajduje się obiekt na stronie, więc w takim przypadku należy używać trybu względnego.
Tryb względny (lub tryb viewport)
Zamiast definiować klatkę kluczową względem strony, można ją zdefiniować w zależności od położenia obiektu względem rzutni.
Następujące wartości kotwienia są stosowane w trybie względnym:
"top" (góra) , gdy wierzchołek obiektu jest wyrównywany z górną krawędzią rzutni
"bottom" (u dołu) , gdy dno obiektu znajduje się u szczytu rzutni
"bottom-top" (u dołu) , gdy dno obiektu jest wyrównane z górną krawędzią rzutni
"top-bottom" , kiedy wierzchołek obiektu jest wyrównany z dolną krawędzią rzutni
"center" , gdy obiekt znajduje się w środku portu widoku
"center-bottom" , gdy dno obiektu znajduje się w środku portu widoku
"center-top" , gdy wierzchołek obiektu znajduje się w środku portu widoku
Przykład 1: Zmiana blaknięcia obiektu w oparciu o pozycję paska przewijania.

Krok 1

Najpierw upewnij się, że strona ma wystarczającą ilość treści, aby strona zawierała pasek przewijania, a obiekt nie jest wstępnie widoczny w rzutni.
W tym przykładzie użyto obiektu "Kształt" umieszczonego w (435, 1500)

Krok 2
Dodaj pierwszą klatkę kluczową z wartościami przedstawionymi na poniższym obrazku. Powoduje to ukrycie kształtu (wartość opacity 0 ), gdy znajduje się poza rzutnią (wtedy gdy nie znajduje się w obszarze wyświetlania) .
Krok 3
Dodaj drugą klatkę z wartościami pokazanymi na poniższym obrazku. Spowoduje to ustawienie wartości opacity  kształtu do 1, gdy strona zostanie przewinięta o 400 pikseli. Zauważ, że dla wszystkich pozycji pomiędzy dwoma klatkami kluczowymi wartość opacity się zmienia płynnie , dzięki czemu obiekt się pojawia i zanika podczas przewijania.
Tutaj możesz obejrzeć działanie powyższych ustawień: "./scrolltransitions1.html"

(oryginał http://www.wysiwygwebbuilder.com/support/scrolltransitions1.html)
Przykład 2: przekształcanie (obrót i skalowanie) obiektu w oparciu o pozycję paska przewijania.
Krok 1
Najpierw upewnij się, że strona ma wystarczającą ilość treści, aby strona zawierała pasek przewijania, a obiekt nie jest wstępnie widoczny w rzutni.
W tym przykładzie użyto obiektu tekstowego umieszczonego na pozycji 272, 1140
Krok 2
Dodaj pierwszą klatkę kluczową z wartościami przedstawionymi na poniższym obrazku. Ustawi skalę tekstu 0, gdy znajduje się poza obszarem wyświetlania.
Zauważ, że dodano dodatkowo przesunięcie, więc animacja rozpocznie się już wtedy gdy obiekt znajdzie się 50 pikseli od obszaru widoczności czyli wtedy gdy nie jest jeszcze widoczny.
Krok 4
Dodaj trzecią ramkę z wartościami pokazanymi na poniższym obrazku. Ustaw skalę tekstu na 4, a wartość offset na 750 pikseli, kąt ustaw taki sam jak powyżej (1440). Powodowało to będzie zmianę rozmiaru obiektu ze 100% do 400% podzczas przewijania w zakresie -500 ( gdzie to obiekt miał rozmiar zdefiniowany na 100%-skala 1) do -750 gdzie ma mieć skalę 4 nastąpi to już bez dalszego obracania obiektu (wykonanało się już w obszarze -500) i ta wartość zostanie tu tylko zachowana.
Krok 3
Dodaj drugą klatkę z wartościami pokazanymi na poniższym obrazku. Ustawi kąt na 1440 stopni i skala na 1, a wartość offset na 500, ustawienie tych wartości powodowało będzie wykonanie obrotu o 1440 stopni i zmianę rozmiaru od 0 do 1 (1=100%)  gdy tekst przemieści się w oknie o 500 pikseli.
Przykład 3: Wyświetlenie obiektu i animowanie jego położenia w poziomie w oparciu o pozycję paska przewijania.
W tym przykładzie użyjemy Sticky Layer (lepkiej warstwy), aby wyświetlić obiekt tekstowy na stałej pozycji. Tekst przesuwał się będzie od prawej strony w oparciu o pozycję paska przewijania. Zrobimy to, zmieniając ustawienia "left".
Wskazówka: podczas animacji pozycji obiektu może być użyteczne ustawienie przepełnienia właściwości strony na "ukryte", w przeciwnym razie przeglądarka doda paski przewijania, gdy obiekt znajduje się poza rzutnią. Zauważ, że jeśli obiekt jest częścią warstwy, siatki układu lub innego kontenera, animacja będzie względem jego rodzica, ponieważ obiekt nie może "wyrwać się" ze swojego pojemnika!
Krok 1
Dodaj Sticky Layer z opóźnieniem ustawionym na 0 (Delay w Lokalizacja i Rozmiar zakładki Ogólne) i umieść na warstwie obiekt tekstowy. Użycie Sticky Layer sprawi, że tekst będzie wyświetlany na stałej pozycji w pionie.

Krok 2
Dodaj pierwszą klatkę kluczową do obiektu tekstowego z wartościami pokazanymi na poniższym obrazku. Ustawi to obiekt  na 110% w lewo, więc podczas ładowania strony będzie poza widokiem.
Krok 3
Dodaj drugą klatkę z wartościami pokazanymi na poniższym obrazku. Spowoduje to płynne przemieszczenie obiektu na docelową pozycję 25% od lewej podczas przewijania w zakresie 1000 pikseli od początku strony. Przy czym w widoku (w pionie) tekst się nie przesuwa podczas przewijania gdyż umieszczony został na warstwie zachowującej stałą pozycję w widoku.





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