Анимированный 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

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

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