15 великолепных эффектов анимации текста CSS [Примеры] - Web-Global
Web-Global
info@web-global.ru

15 великолепных эффектов анимации текста CSS [Примеры]

13.03.2023 215
Поделиться:

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

Однако шрифты и типографика не обязательно должны быть статичными. Вы можете внедрить текстовые эффекты CSS на свой сайт, чтобы выделиться.Такие вещи, как прокрутка текста, тени, свечение текста, стиль, цвет, 3D-эффект и многое другое.

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

15 потрясающих текстовых анимаций с помощью CSS

Эти текстовые анимации CSS можно использовать, чтобы сделать вашу веб-страницу более интересной и придать ей уникальный дизайн и ощущение.Однако вы должны быть осторожны, не все эти текстовые эффекты CSS принесут пользу любому дизайну. Например, при минималистичном дизайне вы можете выбрать более тонкий эффект (просто проверьте эти минималистичные темы WordPress самостоятельно, и вы легко обнаружите, что они могут испортить их чистый дизайн)

Тем не менее, здесь должен быть дизайн, который соответствует потребностям и ожиданиям каждого пользователя, чтобы улучшить ваш дизайн и внешний вид. Ознакомьтесь с этими 15 текстовыми анимационными CSS-кодами, которые мы выбрали для вас.

1. Прокрутка запускает анимацию текста

See the Pen ScrollTrigger Text Reveal by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

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

Если вы не знаете, как создать одностраничный веб-сайт,fullPage.js библиотекаоблегчит вам это.Вы даже можете использовать его в сборщиках WordPress, таких какElementorиGutenberg.

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

2. Эффект анимации цвета текста (только для CSS)

See the Pen text-color-animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

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

Вы можете легко изменить выбранные цвета в соответствии с вашим собственным брендом, изменив шестнадцатеричные коды в CSS.

3. Статическое изменение цвета CSS

See the Pen Change the colors of each word — CSS Animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

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

Созданные исключительно с помощью HTML и CSS, вы можете легко изменять цвета и скорость анимации. Просто попробуйте сами, изменив CSS в codepen.

4. Изменение текстового эффекта CSS

See the Pen Dark Text Animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Более продвинутая анимация, выполненная с использованием чистого HTML, CSS и JavaScript. Как вы можете видеть в CSS codepen text animation, вы можете создавать более продвинутые анимации, если добавите немного JavaScript. Тем не менее, этот эффект все еще относительно легко редактировать и адаптировать к вашему бренду или стилю.

5. Подпрыгивание с анимацией текста с отражением (только CSS)

See the Pen Text Animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Эффект прыгающего текста CSS, который имеет отражение, созданный только с использованием HTML и CSS, что делает его очень переносимым на разных веб-сайтах.

Он использует spanHTML-элемент для размещения каждой буквы в строке и отскакивает от каждой буквы во время анимации текста, поэтому будьте осторожны, где вы ее размещаете.

6. Текстовая анимация водной волны (только для CSS)

See the Pen water wave text animation effect by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Текстовый CSS-эффект спокойной воды, он оживляет эффект спокойной волны в тексте. Отлично подходит для различных заголовков на веб-сайте, может действительно выделять его.

В этом используются только HTML и CSS, что упрощает работу.

7. Пересечение текстового эффекта CSS при прокрутке

See the Pen Crossing on scroll by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Если вы ищете что-то для запуска анимации текста, вам может пригодиться анимация прокрутки, подобная этой. Для этого используются HTML, CSS и JavaScript. Анимация легкая и очень плавная. Прокрутка букв по отдельности также может повысить ценность этого текстового эффекта CSS.

8. Загрузка текстовой анимации в стиле CSS

https://codepen.io/anon/embed/qBXeJab?default-tab=css%2Cresult&height=450&pen-title=&slug-hash=qBXeJab&theme-id=dark&user=&name=cp_embed_8

Предварительный просмотр

Выглядит как индикатор выполнения загрузки, но в виде шрифта. Измените текст на любой, какой захотите, и используйте эту уникальную анимацию. Вы можете легко изменить цвета анимации текста в CSS codepen.

9. Анимация перевернутого текста (только CSS)

See the Pen Flip text animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Может использоваться в качестве анимации загрузки при ожидании ответа на веб-странице, выполненной только с использованием HTML и CSS. Текст переворачивается слева направо и представляет собой очень плавную анимацию.

10. Плавное изменение анимации текста (только для CSS)

See the Pen Fade in text animation by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Тонкая анимация текста (CSS), которая исчезает при загрузке страницы. Очень плавная анимация и имеет едва заметный эффект размытия при затухании. Сделано с использованием чистого HTML и CSS.

11. 3D-анимация роста текста

See the Pen "HEY" — CSS 3D Text Animation [ANIMATION] by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Текстовая анимация (CSS) с эффектом 3D, который растет вверх и вниз. Очень забавная и привлекательная анимация для использования.

12. Анимированная текстовая анимация больших двоичных объектов (только для CSS)

See the Pen Animated Blobs Text — Multiple Colors by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Очень тонкая анимация текста CSS с красочным фоном и привлекательным шрифтом. Созданный на основе чистого HTML и CSS, он позволяет легко изменять цвета и тип шрифта в соответствии с вашим брендом и стилем.

13. Базовая анимация текста (только CSS)

See the Pen Pure CSS text basic animations by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

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

14. Скользящая текстовая анимационная карусель (только для CSS)

See the Pen Text animation effect by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

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

15. Анимация ввода текста

See the Pen Text typing animation effect HTML, CSS & JS by Álvaro (@alvarotrigo) on CodePen.

Предварительный просмотр

Отличный способ продемонстрировать диапазон слов или предложений на экране в одной области. Эффект ввода текста CSS отлично подходит для многих дизайнов и использует плавную анимацию. Сделано с использованием HTML, CSS и JavaScript, но отлично подходит для изучения, и в нем легко редактировать слова, которые вам нужно использовать.

Заключение

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

FullPage.js библиотека — идеальный инструмент для создания такого полноэкранного веб-сайта. Он доступен для разработчиков WordPress, таких как Elementor и Gutenberg. Добавьте одну из этих текстовых анимаций CSS в полноэкранном режиме, и я уверен, что результат будет многообещающим. Например, как мы объяснили в 1st CSS text animation, анимация, запускаемая прокруткой, очень хорошо вписывается в одностраничный веб-сайт с несколькими разделами.

Однако может быть сложно выбрать правильную анимацию, не все анимации будут хорошо работать во всех дизайнах, поэтому обязательно спросите себя, не слишком ли загружена анимация, и, возможно, выберите более тонкую. Также не злоупотребляйте текстовыми эффектами CSS, это сделает страницу безвкусной и переполненной анимацией.