Нөлдік блок: іске қосылған (тәуелді) анимация

Басқа элементтің үстіне шерткенде немесе меңзерді апарғанда іске қосылатын элемент анимациясын қалай орнатуға болады
Бейне сабақ
Кадамдық анимация
Негізгі мүмкіндіктерге шолу мақаласы
Контейнерлермен жұмыс істеу және «резеңке» элементтерді жасау туралы мақала
Жұмысты жылдамдату үшін барлық комбинациялардың тізімі
Негізгі анимация анықтамасы: мұздату, параллакс және анимацияны көрсету
Күрделі қадамдық анимация туралы мақала: негізгі принциптер, параметрлер және мысалдар

Орналасуды Figma-дан Нөлдік блокқа автоматты түрде импорттау әдісі

Біз дизайнның негізгі құрылымын анықтаймыз және макетпен жұмысты тездетеміз
Триггер анимациясын бастау
Триггер анимациясы Нөлдік блок қадамының анимация параметрлерінде қол жетімді. Іске қосу анимациясын бастау үшін нұсқауларға сәйкес қадамдық анимация негіздерін үйрену қажет.
Элементті іске қосу арқылы анимациялау үшін қадамдық анимацияны орнатуды бастаңыз. Ол үшін Нөлдік блоктағы элементтер параметрлеріндегі қадамдық анимация блогындағы ҚОСУ түймешігін басыңыз.
Анимация басталатын оқиға түрін таңдаңыз. Триггер анимациясы тек меңзерді жылжытқанда (меңзерде) немесе шерткенде (басылғанда) жұмыс істей алады.
Триггер блогында элементті қосыңыз, оны басу арқылы анимация басталады. Триггер қосу түймесін басыңыз және нөлдегі элементті басыңыз - бұл триггер болады.
Триггерді таңдағаннан кейін анимация қадамдарын қосыңыз. Біздің мысалда түймені басқан кезде оңға 300 пиксель жылжытатын қалыпты пішінді қосамыз.
МЫНДА БАСЫҢЫЗ!
Триггер анимациясының басқа мысалдары
Біз триггер анимацияларының мысалдарын көрсетеміз және оларды қалай орнату керектігін айтамыз
Браузердегі анимацияны тексеру
Tilda-дағы «Ойнату элементі» және «Барлығын ойнату» түймелеріне қоса, алдын ала қарау режимінде анимацияны бірден көруге болады.

Ол үшін браузерде 2 қойындыны ашу ыңғайлы: Нөлдік блок редакторы ашылған бір бетте, ал екінші бетте - алдын ала қарау режимінде сол бет.

Бұл жағдайда Нөлдік блокта сақтау түймешігін басқанда, өзгертулер бет жаңартылғаннан кейін алдын ала қарау бетінде көрсетіледі.
Made on
Tilda