Искате ли да добавите ефект на накланяне с Divi на някой елемент от вашата страница?
Добавяне на ефекти на накланяне при задържане на мишката към вашия уеб сайт е един от онези забавни и ангажиращи начини да донесете своя уеб сайт Divi. Обикновено този тип дизайн изисква плъгин или по-разширен код. Но този процес е много по-лесен с помощта на Tilt.js (лек ефект на накланяне при задържане на мишката за jQuery). С Tilt.js можете лесно да приложите ефекти на накланяне при задържане на мишката върху всичко за минути.
В този урок ще ви покажем как да добавите ефекти на накланяне при задържане на курсора на мишката към всеки елемент от Divi. Използвайки комбинация от фрагменти на jQuery tilt.js и конструктора Divi, ние ще ви покажем как да добавите страхотни ефекти на накланяне при насочване към изображение, колона на модул, ред и т.н.
Дори ще ви покажем как да добавите невероятни 3D паралакс ефекти.
Нека да започнем!
изследване
Ето кратък преглед на резултата, който ще получим в този урок.
Вижте също: Divi: Как да разкриете съдържание при задържане на курсора на мишката върху разделителя на раздела
Какво трябва да започнете
От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Добавете ефекти на накланяне при задържане на всеки елемент в Divi
Добавете ефект Tilt Hover към модулите Divi
Нека започнем с добавяне на ред с три колони към обикновения раздел по подразбиране.
Добавяне на модул Image
В първата колона добавете модул Image.
Забележка: Можете да използвате произволен модул по ваш избор. Изобщо не е задължително да е модул Image.
Качете изображение по ваш избор.
Добавяне на клас модул Image
Под раздела Подробно, добавете следния CSS клас:
- CSS клас: et-js-tilt
Този клас ще бъде използван като селектор за нашата функция за накланяне по-късно.
Копиране и поставяне на предишен модул за изображение
След това копирайте модула Image и поставете по един във всяка от двете останали колони.
Можете да замените дублирани изображения с нови, ако желаете. Просто се уверете, че всеки модул на изображение принадлежи към CSS класа „et-js-tilt“.
Добавете JQuery библиотеката „tilt.js“
За да добавите библиотеката tilt.js и кодовия фрагмент, необходим за изкривяване на нашите изображения, ще използваме модул за код.
Първо добавете нов ред една колона под съществуващия ред.
След това добавете кодов модул към новия ред.
След това трябва да имаме достъп до библиотека tilt.js чрез добавяне на скрипт, който импортира tilt.js от техния CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Поставете следния скрипт в полето за код.
Използвайте следния src код в таг на скрипт, за да импортирате библиотеката:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Трябва да изглежда така:
Важно е да се внасят tilt.js преди да добавите кода, който ще го използва. Така че след като сценарият сочи към tilt.js, добавете необходимите маркери на скрипта, за да обгърнете JQuery, който трябва да добавим. След това поставете следния JQuery между маркерите на скрипта.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
Обърнете внимание, че функцията tilt() е вътре в оператор if, който ще се изпълнява, когато ширината на браузъра е по-голяма от 980px. Това ще гарантира, че ефектът се появява само на настолен компютър.
Ето резултата.
Добавен е ефект на накланяне върху линията
Както споменахме преди, можете да добавите този ефект на накланяне на курсора към всеки елемент Divi. Това включва цяла линия.
Освен това можете да добавите ефект на накланяне към ред, като същевременно запазите ефектите на накланяне за всеки от модулите в реда.
Ето как.
Дублирайте ред и добавете уникален CSS клас към реда
Дублирайте съществуващия ред от изображения, след което отворете настройките на дублирания ред. Под раздела Подробно, дайте на реда уникален CSS клас, както следва:
- CSS клас: et-row-js-tilt
Добавете jQuery
След това добавете следния jQuery под предишната функция за изкривяване, за да приложите отделна функция за изкривяване към линията.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Обърнете внимание, че за този ефект на накланяне намалихме скалата до 1 и увеличихме стойността на перспективата, така че наклонът да е по-фин.
Ето резултата.
Забележете как редът има функция за накланяне, която се активира, когато задържите курсора на мишката върху реда, и всеки от модулите за изображения също има същия ефект на накланяне, който добавихме по-рано. Ето как можете да приложите вложени екземпляри с ефект на накланяне.
Добавете ефект на Tilt Hover към колона с няколко модула Divi
В някои случаи е полезно да добавите ефект на изкривяване към колона от модули. Това ще ви позволи да проектирате множество модули в колона с Divi и след това да имате всички тези елементи под ъгъл като едно цяло.
За да ви дадем пример как да направите това, ще добавим ефект на накланяне при задържане на мишката към колона, съдържаща модул Изображение, модул Текст и модул Бутон.
Добавете нов ред
За да започнете, създайте нов ред със следната структура на колоните:
Добавяне на модул Image
В колона 2 (средната колона) добавете нов модул Image.
Качете изображение в модула.
Задайте подравняване на изображението към центъра.
Добавяне на текстов модул
Под модула Изображение добавете текстов модул със следната H2 заглавка:
<h2>Local Organic</h2>
След това актуализирайте стиловете на H2 заглавия, както следва:
- Шрифт: Berkshire Swash
- Подравняване на текст: центрирано
- Цвят на текста: #000000
- Размер: 60px
- Височина на реда: 1,2 em
Добавяне на модул за бутони
Под модула Text добавете модул Button.
Актуализирайте текста на бутона, за да гласи „Научете повече...“
Актуализирайте настройките за персонализиране, както следва:
- Подравняване на бутоните: Център
- Използвайте персонализирани стилове за бутон
- Размер на текста на бутона: 18px
- Цвят на текста: #fff
- Фон на бутона: #000
- Ширина на рамката на бутона: 0 пиксела
- Радиус на границата: 100px
- Шрифт на бутона: плаващ пясък
- Тегло на шрифта: получер
- Подложка (отгоре и отдолу): 16px
- Подложка (ляво и дясно): 30px
- Box Shadow: вижте екранната снимка
Параметри на колоната
След като и трите модула са завършени, отворете настройките за родителската колона на тези модули (колона 2) и актуализирайте следното:
- Фон: #f5cee6
- Подложка (отгоре и отдолу): 50px
- Подложка (ляво и дясно): 20px
Добавяне на CSS клас към колона
Под разширения раздел добавете следния CSS клас:
- CSS клас: et-column-js-tilt
Добавен е jQuery за прилагане на ефект на накланяне към колона
За да добавим ефекта на изкривяване към колоната, можем да добавим друг подобен jQuery фрагмент, който е насочен към колоната CSS Class.
Поставете следния кодов фрагмент под предишния кодов фрагмент, насочен към реда.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Ето и крайния резултат.
Добавен е 3D паралакс ефект към вътрешните елементи
За по-усъвършенстван ефект на накланяне при задържане, можем да добавим 3D паралакс ефект към вътрешните модули на колоните.
Използвайки комбинация от перспектива и transform:translateZ(), можем да накараме всеки от модулите на колоната да се показва в 3D пространство, когато ефектът на накланяне при задържане е активен.
Ето как.
Дублиране на предишния ред
Първо, дублирайте предишния ред с ефекта на изкривяване, добавен към средната колона.
Добавете клас с една колона
След това актуализирайте средната колона (колона 2) с уникален CSS клас, както следва:
- CSS клас: et-column-js-tilt-3d
Персонализиран CSS
За да сте сигурни, че вътрешните модули запазват 3D ефекта, добавете следния персонализиран CSS към основния елемент на колона:
transform-style: preserve-3d;
Добавете jQuery и CSS
След това добавете още няколко фрагмента на jQuery под предишния фрагмент на изкривена функция, насочен към колоната, както следва:
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
scale: 1.1,
perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
$(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
$(e.target).removeClass("tilt-active");
});Този jQuery добавя друга основна функция за накланяне към колоната, точно както в предишния пример.
.et-column-js-tilt-3d.tilt-active .et_pb_image {
transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
transform: translateZ(50px);
}
Сега вижте крайния резултат. Забележете как трите модула се появяват в 3D пространството, докато се въртят по време на ефекта на накланяне.
Прочетете още: Divi: Как да разкриете съдържание при задържане на курсора на мишката върху разделителя на раздела
Крайни резултати
Ето още един поглед към крайните резултати за нашите примери.
Изтеглете DIVI сега!!!
Заключение
Ефектите на накланяне при задържане, предлагани от Tilt.js са наистина забавни за експериментиране.
Въпреки че използвахме няколко основни примера в този урок, можете лесно да имате полеви дни, като приложите тези ефекти на накланяне при задържане на курсора на мишката към едно от нашите предварително направени оформления или към вашия собствен сайт.
Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...