Как кодировать умные эффекты текста с CSS

Sep 14, 2025

Инструкции

[Image: Средний ребенок]

Ссылки Rollover - отличный способ схватить внимание пользователя, особенно если они делают что-то необычное или оригинальное. Средний ребенок имеет большой эффект, редко видел в другом месте, который захватывает каждую букву и разбивает их на части с анимацией, которая пинает, когда посетитель следит за ним. Анимация помогает передать игривый персонаж сэндвич бренда.

В этой статье мы покажем вам, как воссоздать эффект на вашем сайте. Для более вдохновения взгляните на наше руководство к Лучшие примеры анимации CSS (с инструкциями о том, как их кодировать). За что-то немного другое, попробуйте вершину Строитель сайта или наш выбор лучшего облачное хранилище Отказ И если вы делаете свой сайт более сложным, убедитесь, что ваш веб хостинг на точке.

01. Эффект текста опрокидывания

Одним из великолепных текстовых эффектов на веб-сайте «Средний дочерний» предназначена для эффектов опрокидывания в меню, где буквы разделились на тексте и слегка вращаются. Начните это с помощью нескольких простых тегов HTML.

 & lt; class = "Wrapper" & gt;
& lt; div class = "Word" & GT; завтрак & lt; / div & gt;
& lt; / div & gt;

02. Создание CSS

Используйте отдельные теги файла CSS или стиль, чтобы добавить следующие правила CSS и сделать страницу заполнить полный размер браузера, убедившись, что корпус и обертку принимают полную высоту.

 Тело {
Ширина: 100%;
Высота: 100%;
Маржа: 0;
прокладки: 0;
}
.wrapper {
Дисплей: сетка;
Высота: 100%;
}

03. Установите слово

То слово Класс центры Слово в сетке. Любой текст, который дает слово Класс может иметь это применено. То вверх Класс будет применяться к каждому другому письму, и они будут двигаться вверх.

 .word {
Размер шрифта: 3em;
Маржа: Авто Авто;
}

.word .up.
{
Дисплей: встроенный блок;
Преобразование: Translate3D (0PX, 0PX, 0PX)
вращаться (0DEG);
Переход: все 0,5с облегчает;
}

04. вверх и выше

Теперь вниз класс акции очень похожими на настройки вверх Но навязчика показывает движение вверх для вверх перекатывать. Вверх также слегка вращается, чтобы улучшить внешний вид.

. .Word .down
{
Дисплей: встроенный блок;
Преобразование: Translate3D (0PX, 0PX, 0PX)
вращаться (0DEG);
Переход: все 0,5с облегчает;
}

.word: hover .up
{
Преобразование: Translate3D (0PX, -8PX, 0PX)
вращаться (12DEG);
Цвет: # 058b05
}

05. парящий вниз

Когда пользователь охватывает текст, класс вниз перемещает текст вниз. Позже в JavaScript текст будет разделен на отдельные пролеты с классами, добавленными автоматически для альтернативных пролетов.

 .Word: hover .down {
Преобразование: Translate3D (0PX, 8PX, 0PX)
вращаться (-12DEG);
Цвет: # 058B05;
}

06. Автоматически для людей

Это немного хлопот, чтобы поставить каждую букву в чередующихся охвата с разными классами, поэтому мы автоматизируем процесс, получая JavaScript, чтобы запросить селектор и принимать каждую букву. Вот то ул Переменная захватывает текущую букву, так как петли через текст.

 & lt; скрипт & gt;
var элементы = document.queryselectorallall
('.слово');
для (var i = 0, l = elements.length; я
& lt; л; I ++) {
var str = элементы [i] .textcontent;
элементы [i] .innerhtml = '';

07. Добавить чередующиеся классы

Теперь еще одна петля помещает каждую букву в своем собственном элементе промежутка и добавляет либо вверх или же вниз класс к пропанам. Если вы посмотрите на это в браузере, вы увидите, как текст разделен на каждую букву вверх и вниз, что слегка вращается.

Вы можете увидеть эффект в действии на Средний дочерний сайт Отказ

 для (var j = 0, ll = str.length; j
& lt; LL; J ++) {
var spn = document.createelement («SPIN»);
элементы [I] .appendChild (SPN);
spn.textcontent = str [j];
Пусть pos = (j% 2)? 'вверх вниз';
spn.classlist.add (POS);
}
 }
& lt; / script & gt;

Эта статья была первоначально опубликована в Creative Web Design Magazine Веб-дизайнер Отказ Купить проблему 286. или же подписываться Отказ

Прочитайте больше:

Добавить фильтры SVG с CSS
Как проектировать с фигурами CSS: введение
5 прохладных генераторов сетки CSS

Как кодировать умные эффекты текста с CSS

01. Эффект текста опрокидывания

02. Создание CSS

03. Установите слово

04. вверх и выше

05. парящий вниз

06. Автоматически для людей

07. Добавить чередующиеся классы

Инструкции - Самые популярные статьи

Как сделать мем в Photoshop

Animate SVG с JavaScript

ОТВЕТСТВЕННАЯ НАУК ОПТИМИРОВАНИЯ УСТАНОВКИ ОБРАЗОВАНИЯ

Кэш в разделе «Усилитель производительности BBC»

Как лепить 3D-напечатанный гоблин

10 золотых правил для отзывчивых SVGS

Как сделать реалистичный спортивный автомобиль визуализация

Моделирование комплексной геометрии: 5 верхних советов

Категории