Содержание
- 01. Текстовый эффект ролловера
- 02. Создайте CSS
- 03. Разместите слово
- 04. Вверх и снова
- 05. Парение вниз
- 06. Автомат для народа
- 07. Добавьте чередующиеся классы
Повторяющиеся ссылки - отличный способ привлечь внимание пользователя, особенно если они делают что-то необычное или оригинальное. Срединный ребенок имеет отличный эффект, редко встречающийся в другом месте, который захватывает каждую букву и разделяет их с помощью анимации, которая срабатывает, когда посетитель наводит курсор на слово. Анимация помогает передать игривый характер бренда сэндвичей.
В этой статье мы покажем вам, как воссоздать эффект на вашем сайте. Чтобы получить больше вдохновения, взгляните на наше руководство по лучшим примерам CSS-анимации (с инструкциями по их кодированию). Если вы хотите что-то немного другое, попробуйте лучший конструктор веб-сайтов или лучшее облачное хранилище, которое мы выбрали. А если вы делаете свой сайт более сложным, убедитесь, что ваш хостинг в порядке.
01. Текстовый эффект ролловера
Один из замечательных текстовых эффектов на веб-сайте Middle Child - это эффекты ролловера в меню, когда буквы в тексте разделяются и слегка поворачиваются. Начните с нескольких простых HTML-тегов.
div> div> Завтрак / div> / div>
02. Создайте CSS
Используйте отдельный файл CSS или теги стиля, чтобы добавить следующие правила CSS и заполнить страницу во весь размер браузера, убедившись, что тело и оболочка занимают всю доступную высоту.
тело {ширина: 100%; высота: 100%; маржа: 0; отступ: 0; } .wrapper {дисплей: сетка; высота: 100%; }
03. Разместите слово
В слово class центрирует слово в сетке. Любой текст, которому присвоено слово класс может применить это. В вверх class будет применяться ко всем остальным буквам, и они будут двигаться вверх.
.word {размер шрифта: 3em; маржа: авто авто; } .word .up {дисплей: встроенный блок; преобразовать: translate3d (0px, 0px, 0px) rotate (0deg); переход: все 0,5 с легкость входа-выхода; }
04. Вверх и снова
Теперь вниз класс имеет очень похожие настройки с вверх но при наведении указателя показано движение вверх для вверх перекатывать. Также слегка повернут вверх, чтобы улучшить внешний вид.
.word .down {дисплей: встроенный блок; преобразовать: translate3d (0px, 0px, 0px) rotate (0deg); переход: все 0,5 с легкость входа-выхода; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); цвет: # 058b05}
05. Парение вниз
Когда пользователь наводит курсор на текст, класс вниз перемещает текст вниз. Позже в JavaScript текст будет разделен на отдельные промежутки, а классы будут автоматически добавлены в альтернативные промежутки.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); цвет: # 058b05; }
06. Автомат для народа
Немного хлопотно размещать каждую букву в чередующихся промежутках с разными классами, поэтому мы автоматизируем процесс, заставив JavaScript запрашивать селектор и принимать каждую букву. Здесь ул. переменная захватывает текущую букву при просмотре текста.
скрипт> var elements = document.querySelectorAll (’.word’); для (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elements [i] .innerHTML = ’’;
07. Добавьте чередующиеся классы
Теперь другой цикл помещает каждую букву в отдельный элемент диапазона и добавляет либо вверх или же вниз класс к пролетам. Если вы посмотрите на это в браузере, вы увидите, что текст разделен каждой буквой вверх и вниз, при этом слегка вращаясь.
Вы можете увидеть эффект в действии на веб-сайте Middle Child.
для (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); элементы [я] .appendChild (spn); spn.textContent = str [j]; пусть pos = (j% 2)? 'вверх вниз'; spn.classList.add (pos); }} / скрипт>
Эта статья изначально была опубликована в журнале Creative Web Design. Веб-дизайнер.Купить выпуск 286 или же подписываться.
