Анимированный 3D-эффект заголовков

Анимированный 3D-эффект заголовков

Пришло время продолжать прокачивать свои навыки CSS. Сегодня мы поделимся с вами одним из наших советов и уловок и покажем, как создать анимированный 3D-эффект открытия типа. Мы были вдохновлены идеей из учебника Codrops и адаптировали ее для Gridbox для Joomla Website Builder . Итак, без каких-либо задержек, поехали!

Только практические советы и рекомендации! Иначе какой смысл? Так где же вы можете применить новый анимированный эффект типа открытия? Вы можете использовать 3d анимированный эффект где угодно. Применяйте его там, где клиенты чаще всего взаимодействуют с заголовком и наводят на него курсор. Например, вы можете добавить анимированный эффект открытия 3D-типа при разработке системных страниц Gridbox. Это может быть на странице 404 или  "Скоро страница отркроется (Coming soon page)" или  на странице с благодарностью за совершенноедействие ( вскоре Gridbox магазин App). Или вы можете использовать этот 3D-эффект в разделе героя сайта.

Обратите внимание!

Анимированный 3D эффект открытия можно применить к заголовку плагина Gridbox.

И, конечно же, как всегда, мы подготовили для вас несколько удивительных примеров. Это не просто красивые картинки для вдохновения, это действительно практические примеры, которые можно легко применить к любому из ваших сайтов Gridbox. Так что вдохновляйтесь и применяйте!

Анимированный 3D-эффект
Анимированный 3D-эффект заголовков

СПАСИБО, ЧТО ВЫ С НАМИ !

Шаг 1: Скопируйте суффикс класса.

Скопируйте суффикс класса и вставьте его в поле « Суффикс класса » плагина Headline.

animated-heading

Шаг 2: Скопируйте код CSS.

Скопируйте код CSS и вставьте его в редактор кода Gridbox.

Анимированный 3D-эффект

.animated-heading .headline-wrapper > * > span > span:after {

    text-shadow16px 0px 16px rgba(0000.15);

    color#ffffff;

}

 

.animated-heading .headline-wrapper > * > span > span {

    display: inline-block;

    positionrelative;

    transform-style: preserve-3d;

    perspective: 550px;

    z-index1;

    opacity: 1;

    white-space: pre-wrap;

}

 

.animated-heading .headline-wrapper > * > span {

    white-spacenormal;

}

 

.animated-heading .headline-wrapper > * > span > span:before,

.animated-heading .headline-wrapper > * > span > span:after {

    positionabsolute;

    contentattr(data-letter);

    line-height: inherit;

    top0;

    left0;

    right0;

    bottom0;

    z-index2;

    transition: all 0.3s;

}

 

.animated-heading .headline-wrapper > * > span > span:before {

    color: rgba(0000.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.

Анимированный 3D-эффект

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]);

      }

  });

});

ПРОСТО, КАК 1, 2, 3 !

Рейтинг 5 (2 Голоса)

Теги страницы

Это интересно

ТЕГИ

Популярные

Анимированный 3D-эффект заголовков

Анимированный 3D-эффект заголовков

Оставить отзыв
Сегодня мы поделимся с вами одним из наших советов и покажем, как создать а...
Читать далее

Последние материалы

Анализ скорости загрузки сайта

Анализ скорости загрузки сайта

Оставить отзыв
Анализ скорости загрузки сайта.Проверьте ваш сайт в Google PageSpeed ​​Insi...
Читать далее
Канонические URL

Канонические URL

Оставить отзыв
Представляем обновление Gridbox для Joomla Website Builder. Теперь Gridbox ...
Читать далее
Тема для ресторана Joomla Theme Maestro

Ресторан Joomla Theme Maestro

Оставить отзыв
Представляем вам новую, стильную и гармоничную тему для ресторана Joomla Th...
Читать далее

Категории

Follow us