Днес бяхме информирани за нова актуализация на Divi, която въвежда така наречените ефекти на анимация при превъртане. Разгледахме го и в този урок ще обобщим какво можете да очаквате.
Нека да започнем.
Какви са ефектите на превъртане?
Ефектите за превъртане са персонализируеми анимации, които реагират на посетителите ви, докато превъртат нагоре и надолу по страницата. За разлика от традиционните анимации, ефектите за превъртане са пряко свързани с поведението на посетителя ви при превъртане. Скоростта и посоката на анимацията се базират на скоростта и посоката на превъртане на посетителя. Времето на анимацията се базира на позицията на елемента в прозореца на браузъра.
Звучи сложно, но с Divi е доста опростено.
Всеки елемент може да бъде анимиран с помощта на комбинация от ефекти на мащабиране, въртене, хоризонтално и вертикално движение, непрозрачност и размазване. Вие контролирате величината на всеки ефект в различни точки от анимацията, а след това Divi се грижи за останалото, създавайки красиви преходи, когато тези елементи влизат и се движат в полезрението на посетителя. Създавайте прости анимации, които добавят фина дълбочина и изтънченост, или комбинирайте ефекти и анимирайте множество елементи, за да създадете зрелищни изблици на активност, които ще впечатлят посетителите ви!
6 нови шест уникални ефекта
Налични ефекти за избор или в комбинации. Divi се предлага с шест различни ефекта на превъртане, всеки от които може да бъде индивидуално персонализиран с помощта на нашия нов потребителски интерфейс за ефекти на превъртане. Можете също така да комбинирате някой от ефектите, за да създадете по-сложни анимации.
Вертикално движение
Ефектът на вертикално движение позволява на всеки елемент да се движи нагоре и надолу по страницата въз основа на скоростта и посоката на превъртане на посетителя. Резултатът е паралакс ефект! Сега всичко може да се използва за създаване на паралакс ефекти с Divi. Можете дори да комбинирате вертикално движение с паралаксни фонови изображения, за да създадете наистина впечатляващи дизайни.
Хоризонтално движение
Ефектът на хоризонталното движение е подобен на ефекта на вертикалното движение, с изключение на това, че позволява преместването на елементи отляво надясно на екрана в зависимост от посоката и скоростта на превъртане на посетителя. . Можете дори да комбинирате вертикално и хоризонтално движение, като ви дава пълен контрол над движението на всеки елемент!
Контекстуално замъгляване
Ефектът на размазване ще доведе до фокусиране и разфокусиране на елементи в зависимост от скоростта и посоката на превъртане на посетителя. Тъй като Divi ви позволява да контролирате началните, средните и крайните стойности на замъгляване, можете да фокусирате елементите точно когато са пред очите на посетителя. Това е чудесен начин да насочите вниманието към важна информация.
разтопен
Ефектът на избледняване с елементи избледнява и изчезва в зависимост от скоростта и посоката на свитъка на посетителя. Можете да смесвате елементи, да ги накарате да изчезнат или и двете. Комбинацията от избледняване, размазване и мащаб може да създаде някои наистина сложни анимации, които добавят допълнителен фактор „it“ към вашите дизайни.
Ефект на мащабиране
Ефектът на мащаба ще увеличи или намали размера на всеки елемент в зависимост от скоростта и посоката на свитъка на посетителя. Ако искате да привлечете вниманието към определен елемент, като призив за действие, можете да зададете ефекта на мащаба, за да увеличите размера на елемента, когато той се приближава до центъра на рамката. прозорец. Разбира се, има и много други възможности!
Ротационен ефект
Ефектът на завъртане с върти елемент в двете посоки въз основа на скоростта и посоката на превъртане на посетителя. Фината ротация наистина може да оживи сцените. Само малко въртене в комбинация с хоризонтално движение може да изглежда страхотно! Или оставете елементите да се въртят в кръг.
Нов интуитивен интерфейс
Истинската красота на скролиращите ефекти на Divi е тяхната лекота на използване! Има нов потребителски интерфейс, който опростява процеса на създаване на уеб анимации, така че да са достъпни за всички. Само с едно щракване можете да добавите или комбинирате един от шестте ефекта на превъртане на Divi. Веднага от кутията те ще изглеждат страхотно! След това можете да прецизирате ефектите, за да създадете още по-усъвършенствани анимации.
Едно кликване и това е!
Искате ли да добавите ефект на превъртане към модул? Едно кликване ще добави ефекта и той също ще изглежда страхотно! За да добавите ефект на превъртане, просто отворете новата група с опции за превъртане на ефекти в раздела Разширени на всеки модул, ред, колона или раздел. Няколко ефекта могат да бъдат активирани едновременно и ефектите ще бъдат комбинирани в една плавна анимация, която се превръща красиво, докато превъртате.
Искате ли пълен контрол? имаш го !
След като активирате ефект на превъртане, имате пълен контрол върху величината на ефекта във всяка точка от анимацията. Чрез контролиране на началните, средните и крайните стойности вие контролирате какво прави анимация. След като стойностите са зададени, Divi се грижи за останалото и ще прехвърли елемента при движение в прозореца на браузъра, създавайки анимация.
- Начална стойност - Състоянието на началната анимация, използвано, когато елементът влезе в долната част на прозореца на браузъра.
- Междинна стойност - Междинното състояние на анимация, което ще бъде прехвърлено, когато елементът се премести в средата на прозореца.
- Крайна стойност - Крайното състояние на анимация, което възниква, когато елементът напусне прозореца на браузъра в горната част на екрана.
Например, ефект на непрозрачност с начална стойност 0 (невидим), средна стойност 100 (напълно видим) и крайна стойност 0 (невидим), ще се промени от невидимо състояние, когато влезе в прозореца, докато стане 100 % видим в средата на прозореца, след което ще изчезне в невидимо състояние при излизане от прозореца.
Регулиране на времевата линия на анимацията
Можете не само да регулирате стойностите на анимацията, но и да регулирате времевата линия на анимацията. Потребителският интерфейс на времевата линия представлява височината на прозореца на браузъра. Всеки ключов кадър на анимацията може да се задейства на различна позиция в прозореца. Това ви позволява да контролирате началото, края и времето на анимацията въз основа на местоположението на анимирания елемент по оста y на прозореца на браузъра.
- Начална позиция на ключовия кадър - Тази опция контролира началото на анимацията. Ако искате да забавите анимацията, плъзнете позицията на стартовия ключов кадър навътре.
- Централна позиция на ключовия кадър - Това контролира точката, в която анимацията достига своята централна стойност на анимацията. Не е задължително да е точно в средата на анимационния график. Можете да преместите средния ключов кадър на произволна позиция в прозореца.
- Край на позицията на ключовия кадър - Този контрол се използва за прекратяване на анимацията. Ако искате анимацията да приключи преди клипът да излезе от прозореца на браузъра, можете да плъзнете позицията на крайния ключов кадър навътре.
Добавете статични състояния към всяка анимация
Можете също да добавяте паузи към анимациите си, като увеличавате продължителността на статичната си стойност на средния ефект. За да създадете статична продължителност на анимацията, щракнете върху двете стрелки, когато задържите курсора на мишката върху средния ключов кадър. След това можете да разширите средния ключов кадър, като плъзнете ръбовете му напред-назад. По време на тази точка в анимацията елементът ще остане статичен. След като статичната продължителност приключи, анимацията ще продължи да преминава към крайната си стойност.
Какво мислите за тези нови функции? Не се колебайте да споделите вашите мнения в коментарите.
