NAPRAWIANIE TEKSTU NA PRZEWIJANIU

Eksperymentuj z dużą typografią i twórz interaktywne wiadomości

Tworzenie efektu utrwalenia

Naszym celem jest zastosowanie fiksacji do dwóch obiektów, tak aby pierwszy z nich natychmiast "przykleił się" do środka strony, podczas gdy drugi zatrzyma się w punkcie, w którym styka się z pierwszym. Na przykład tak:

Niezbędne ustawienia

NAPRAWA

Ustawienie obszaru fiksacji obiektu. Odnosi się to do obszaru ekranu (góra, środek lub dół), względem którego rozpoczyna się efekt fiksacji. Należy zauważyć, że kształty w przykładzie są ustalone na środku ekranu.

PRZESUNIĘCIE WYZWALACZA

Jest to punkt początkowy fiksacji obiektu względem opcji wyboru: Okno Góra / Okno Środek / Okno Dół.

ODLEGŁOŚĆ

Jest to odległość w pikselach, którą obiekt musi pokonać w trybie stałym.

Jak to skonfigurować

Konfigurowanie parametrów obiektu

1. Dodaj stronę Zero Block z biblioteki bloków i przejdź do edytora bloków. Umieść dwa obiekty w obszarze roboczym, pionowo, jeden za drugim.

2. Ustaw obiekty tak, aby miały ten sam obszar fiksacji. Ustawiamy WINDOW CENTER jako przykład - oba obiekty są ustawione na środku ekranu.

3. Lepiej jest wybrać ostateczny rozmiar wszystkich elementów i odległość między nimi na początku. Rozmiar każdego elementu wpłynie na parametry animacji.

Rozmiar kształtów to 100x100 px. Odległość między figurami wynosi 300px. Odległość = Wcięcie drugiego obiektu - Wysokość pierwszego obiektu

Wskazówka: Jeśli nie masz jasno określonego rozmiaru docelowego, użyj wartości całkowitych lub dziesiętnych podczas ustawiania rozmiarów elementów i odstępów, aby ułatwić obliczenia.

Konfigurowanie parametrów animacji

1. Zacznijmy od ustawienia przesunięcia wyzwalacza / punktu początkowego animacji.

Punkt jest liczony względem wybranego przez nas obszaru - środka okna.

Rozpocznij od obiektu znajdującego się na górze. Ułatwi to obliczenie punktów początkowych dla animacji pozostałych obiektów. Górny obiekt ma ustawione 0px jako punkt początkowy animacji. Oznacza to, że będzie on przylegał dokładnie do środka ekranu.

Dolny obiekt powinien przylegać, gdy dotknie górnego obiektu. Oznacza to, że jego punkt początkowy animacji będzie niższy o wysokość pierwszego obiektu. Ustawmy wcięcie 100px.

2. Ustaw odległość.

Jest to odległość, jaką obiekt powinien pokonać w trybie stałym. Rozpocznij ustawianie animacji od dolnego obiektu, w ten sposób łatwiej będzie ci obliczyć odległość "przylegania".

Kwadrat. Jeśli ponownie spojrzysz na przykład, zauważysz, że kwadrat nie pokonuje żadnej odległości w trybie stałym - po prostu pozostaje nieruchomy pod okręgiem. Oznacza to, że musimy ustawić odległość na 0px.

Okrąg. Okrąg w trybie stałym pokonuje odległość do kwadratu. Po tym efekt fiksacji znika, a obie figury można przewijać jak zwykle.

Zasadniczo okrąg musi dotrzeć do pozycji kwadratu, ale zatrzymuje się nieco wyżej, aby się go trzymać.

Oznacza to 400px - 100px (wysokość kwadratu) = 300px.

Zapisz ustawienia i opublikuj stronę. Zmiany będą widoczne w trybie podglądu lub po opublikowaniu strony.