
Пришло время продолжать прокачивать свои навыки 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
-3
d;
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.3
s;
}
.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]);
}
});
});