3 июня 2020
Пришло время продолжать прокачивать свои навыки CSS. Сегодня мы поделимся с вами одним из наших советов и уловок и покажем, как создать анимированный 3D-эффект открытия типа. Мы были вдохновлены идеей из учебника Codrops и адаптировали ее для Gridbox для Joomla Website Builder . Итак, без каких-либо задержек, поехали!
Только практические советы и рекомендации! Иначе какой смысл? Так где же вы можете применить новый анимированный эффект типа открытия? Вы можете использовать 3d анимированный эффект где угодно. Применяйте его там, где клиенты чаще всего взаимодействуют с заголовком и наводят на него курсор. Например, вы можете добавить анимированный эффект открытия 3D-типа при разработке системных страниц Gridbox. Это может быть на странице 404 или "Скоро страница отркроется (Coming soon page)" или на странице с благодарностью за совершенноедействие ( вскоре Gridbox магазин App). Или вы можете использовать этот 3D-эффект в разделе героя сайта.
Обратите внимание!
Анимированный 3D эффект открытия можно применить к заголовку плагина Gridbox.
И, конечно же, как всегда, мы подготовили для вас несколько удивительных примеров. Это не просто красивые картинки для вдохновения, это действительно практические примеры, которые можно легко применить к любому из ваших сайтов Gridbox. Так что вдохновляйтесь и применяйте!
СПАСИБО, ЧТО ВЫ С НАМИ !
Шаг 1: Скопируйте суффикс класса.
Скопируйте суффикс класса и вставьте его в поле « Суффикс класса » плагина Headline.
animated-heading
Шаг 2: Скопируйте код CSS.
Скопируйте код CSS и вставьте его в редактор кода Gridbox.
.animated-heading .headline-wrapper > * > span > span:after {
text-shadow: 16px 0px 16px rgba(0, 0, 0, 0.15);
color: #ffffff;
}
.animated-heading .headline-wrapper > * > span > span {
display: inline-block;
position: relative;
transform-style: preserve-3d;
perspective: 550px;
z-index: 1;
opacity: 1;
white-space: pre-wrap;
}
.animated-heading .headline-wrapper > * > span {
white-space: normal;
}
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
position: absolute;
content: attr(data-letter);
line-height: inherit;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
transition: all 0.3s;
}
.animated-heading .headline-wrapper > * > span > span:before {
color: rgba(0, 0, 0, 0.12);
}
.animated-heading .headline-wrapper > * > span > span:before,
.animated-heading .headline-wrapper > * > span > span:after {
transform-origin: var(--origin);
}
.animated-heading .headline-wrapper > * > span > span:hover:before {
transform: var(--hover-before);
}
.animated-heading .headline-wrapper > * > span > span:hover:after {
transform: var(--hover-after);
}
- Цвет фона можно изменить в настройках типографии плагина «Заголовок».
- Цвет шрифта можно изменить в третьей строке кода CSS: « color: #ffffff ».
Шаг 3: Скопируйте код JavaScript.
Скопируйте код JavaScript и вставьте его в редактор кода Gridbox.
jQuery(document).on('ready', function(){
jQuery('.animated-heading .headline-wrapper > *').each(function(){
if (!this.querySelector('span')) {
let span = document.createElement('span');
for (let char of this.textContent.trim()) {
let el = document.createElement('span'); el.textContent = char;
span.append(el);
}
this.innerHTML = ''; this.append(span);
}
});
jQuery(".animated-heading .headline-wrapper > * > span > span").each(function(){
this.dataset.letter = this.textContent;
let value = Math.round(1 - 0.5 + Math.random() * 100), prop = {};
if (value <= 25 || (value > 50 && value <= 75)) {
prop.origin = value <= 25 ? '0 50%' : '100% 50%';
prop['hover-before'] = value <= 25 ? 'scale(0.85, 1) skew(0deg, 20deg)' : 'scale(0.85, 1) skew(0deg, -20deg)';
prop['hover-after'] = value <= 25 ? 'rotateY(-40deg)' : 'rotateY(40deg)';
} else {
prop.origin = value <= 50 ? '50% 100%' : '50% 0';
prop['hover-before'] = value <= 50 ? 'translateY(-0.050em) scale(1, 0.55) skew(-10deg, 0deg)' : 'translateY(-0.035em) scale(1, 1.2) skew(10deg, 0deg)';
prop['hover-after'] = value <= 50 ? 'translateY(-0.035em) rotateX(-40deg)' : 'translateY(0.045em) rotateX(40deg)';
}
for (let key in prop) {
this.style.setProperty('--'+key, prop[key]);
}
});
});