эффект » Скрипты для сайтов
Эффект при наведении на изображение
Довольно-таки смелый hover эффект на изображении. При наведении происходит разделение блока на отдельные кусочки с общим фоном — картинкой.
Эффект при наведении с помощью clip-path
Использование свойства clip-path при наведении для придания изображению формы стрелки с анимацией.
Эффект искажения на three.js
Эффект перетекания одного изображения в другое на шейдерах, с gsap анимацией на канвасе
Repellers — крутой эффект над текстом
Очень прикольный эффект взаимодействия с текстом
Эффекты с социальными кнопками
Несколько прикольных эффектов появления социальных кнопок при наведении на изображение.
Xoverlay — CSS3 эффекты наведения
Xoverlay представляет из себя набор CSS стилей, который поможет довольно просто добавлять современные эффекты наведения на ваш сайт.
Собрано более 50 эффектов, но если вы будете их комбинировать, то вариантов будет еще на несколько десятков больше — более 150 эффектов.
Hover.css — коллекция CSS3 эффектов при наведении
Hover.css — коллекция CSS3 эффектов воспроизводимых при наведении на любой элемент, к которому применены определенные CSS классы. Доступно более 40 эффектов.
Эффект при наведении и шрифт с иконками
Воспользуемся сервисом IcoMoon App для того, чтобы создать симпатичный эффект при наведении на иконку.
Необычные эффекты при наведении
В уроке речь пойдет о простых, но необычных эффектах при наведении на миниатюры изображений реализованных с помощью только CSS3 — основой будут css3 transitions.
Анимация текста на jQuery
Плагин для анимации текста имющий пять различных режимов: roll, step, jump, puff, highlight, каждый с возможностью дополнительной настройки.
3D эффекты при наведении
Создадим захватывающие 3D эффекты при наведении с использованием CSS3 и jQuery.
В примерах использовать будем миниатюры изображений, при наведении на которые будет показываться полезная информация.
CSS3 эффекты при наведении
Урок в котором мы научимся создавать интересные эффекты при наведении на изображения. Особенность заключается в использовании свойства border. Работать такие эффекты будут только в современных, поддерживающих css3, браузерах.
Популярные статьи
Реклама
Опрос
С чем чаще работаете ?
React.js
Vue.js
Angular.js
другое
Новости
Подпишись
Присоединяйся, чтобы узнать все самое интересное для frontend разработчика и анонсы статей с сайта.
Разное
Реклама
Свежие статьи
Еженедельная подборка красивых эффектов на CSS/SVG/JS #72 — CSS-LIVE
Подборка свежих эффектов, интересных идей и полезных наработок.
CSS-иллюстрация «Спортсменка»
По клику на кнопки «Run» и «Walk» девушка переходит на бег или ходьбу.
Нижние кнопки управления меняют среду и образ девушки, а ползунком можно управлять скоростью движения.
Эффектнее смотрится в полностраничном режиме.
Технологии: CSS, CSS-переменные, CSS-анимация, CSS-трансформации.
Автор: White Pallet (@WhitePallet)
Посмотреть живой пример
Имитация экрана
Автор демонстрирует, как CSS-функция matrix3d() может применяться с целью имитации экрана.
Технологии: CSS-функция matrix3d(), CSS-трансформации, iframe.
Автор: Джордж В. Парк (@GeorgePark)
Посмотреть живой пример
Анимация статуса
Кнопки управляют анимацией: «Пассивный», «Ожидает», «Размышляет», «Вводит текст», «Фигачит по клавиатуре».
Технологии: SVG, CSS-трансформации, CSS-анимация, React.js.
Автор: Бард Н. Ховде (@bnhovde)
Посмотреть живой пример
Многоуровневое боковое меню
Меню выдвигается при наведении на одну из иконок слева.
Технологии: CSS, CSS-трансформации, JS, jQuery.js.
Автор: Аарон Авад (@blindpiggy)
Посмотреть живой пример
Медведь на мопеде
Технологии: CSS, Create.js.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)
Посмотреть живой пример
Трехмерный мишка
Кликом и удерживанием курсора можно «крутить» мишку.
Технологии: CSS.
Автор: Дэйв ДеСандро (@desandro)
Посмотреть живой пример
Генератор лиц
Лица генерируются заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)
Посмотреть живой пример
Бесконечная стопка бумаг
Стопка генерируется заново по клику в любом месте.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)
Посмотреть живой пример
Хамелеон
Хамелеон меняет свой окрас по клику на листик другого цвета.
Технологии: CSS-переменные, JS, Lottie-web.
Автор: kittons (@airnan)
Посмотреть живой пример
Варианты стилизации кнопок при наведении
Технологии: CSS.
Автор: Параскевас Нтинакис (@perry_nt)
Посмотреть живой пример
Эффекты волны при клике на кнопку
Технологии: CSS-переменные, CSS-трансформации, JS.
Автор: jakob-e (@jakob-e)
Посмотреть живой пример
Меню действий на CSS
Внизу кнопка, по клику на которой появляется меню.
Технологии: CSS.
Автор: Рафаэль Л. Перейра (@rafarlp)
Посмотреть живой пример
Трактор
Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Mandax (@mandax)
Посмотреть живой пример
Флажки с текстом на ветру
Технологии: SVG, CSS-переменные, CSS-трансформации, JS.
Автор: Дэн Уилсон (@danwilson)
Посмотреть живой пример
Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.
P.S. Это тоже может быть интересно:
- Canvas, CSS, CSS3, HTML, JavaScript, JSS, SVG, анимация
Последние новости
Последние новости
Последние комментарии
Последние комментарии
Поддержите проект
24 креативных и уникальных примера CSS-анимации, которые вдохновят вас
Будь то улучшение кнопки, ускорение загрузки страницы или добавление изюминки на целевую страницу, анимация — это эффективный способ привлечь внимание и порадовать зрителей на вашем сайте. Веб-сайт.
Хотя существует несколько способов добавить анимированную графику на веб-страницу, одним из самых простых является использование анимации CSS, для которой не требуется ничего, кроме некоторых ноу-хау HTML и CSS.
Если вы хотите добавить анимацию CSS в свою работу, может быть полезно посмотреть на некоторые успешные примеры использования анимации CSS, прежде чем углубляться в нее.
Это дополнительное исследование может вдохновить вас на ваши собственные проекты и дать представление о том, чего вы можете достичь с помощью эта мощная функция.
Вот почему мы собрали наши любимые примеры CSS-анимации из CodePen — онлайн-инструмента для создания фрагментов кода в HTML и CSS и обмена ими — чтобы помочь творческому потоку течь.
Но сначала краткий обзор темы…
Как работает анимация CSS?
Анимация CSS — это функция CSS, позволяющая анимировать изменение одного или нескольких свойств стиля элемента, а также управлять различными аспектами анимации. Чистая CSS-анимация не требует дополнительного кода (например, JavaScript) или мультимедиа (например, GIF-файлов) — все делается с помощью HTML и CSS.
Анимация CSS отлично подходит для веб-сайтов, которые хотят добавить динамичный, привлекательный контент, не увеличивая вес страницы. Поскольку они не требуют дополнительных скриптов, анимация CSS вряд ли замедлит работу ваших страниц.
Чтобы создать анимацию CSS, вам нужны три вещи: элемент HTML для анимации, правило CSS, которое привязывает анимацию к этому элементу, и группа ключевых кадров, определяющая стили в начале и в конце анимации.
Вы также можете добавить объявления для дальнейшей настройки анимации, такие как скорость и задержка.
Бесплатные шаблоны кода
Бесплатные шаблоны анимации CSS
Используйте эти бесплатные шаблоны анимации CSS на своем веб-сайте.
Для демонстрации приведем простой пример CSS-анимации:
См. пример CSS-анимации пера от Кристины Перриконе (@hubspot) на CodePen.
В этом примере — это элемент, который мы анимируем. Глядя на CSS, мы видим, что наши объявления анимации связаны с селектором div . Самое важное объявление здесь — animation-name , которое связывает ключевой кадр my-animation с нашим элементом div . Ниже находятся несколько дополнительных объявлений, влияющих на время и поведение анимации.
Сама анимация создается с помощью ключевого кадра, указанного правилом @keyframes . Ключевой кадр определяет начальное состояние анимации (внутри от {} ) и ее конечное состояние (внутри до {} ). Ключевой кадр my-animation изменяет три свойства стиля нашего div: background-color , width и top . Когда эти три свойства анимируются одновременно, получается согласованная анимация.
В нашем примере у нас есть только один ключевой кадр. Документы с несколькими типами анимации могут иметь несколько ключевых кадров, каждый из которых привязан к другому элементу.
Примеры CSS-анимации
Ниже мы собрали 24 примера CSS-анимации, начиная от базовых эффектов взаимодействия и заканчивая настоящими произведениями искусства (по крайней мере, по моему мнению). Не стесняйтесь использовать их для вдохновения в своих собственных проектах.
1.
CSS Эффект перехода при наведении мышиНачнем с того, что эта анимация показывает простой, но эффективный эффект выделения текста, запускаемый действием наведения мыши. Это отличный способ добавить изюминку ссылкам на ваши страницы.
См. эффект перехода Pen CSS при отсутствии мыши от Адама Аргайла (@argyleink) на CodePen.
Посмотреть код здесь.
2. Простые счетчики загрузки
Анимации CSS можно использовать для создания эффектов, с которыми мы все знакомы — эти значки вращающегося груза являются одним из таких примеров. Их смысл понятен почти всем, и они также легки в коде. Этот конкретный пример также показывает, как добиться аналогичного эффекта с масштабируемой векторной графикой.
См.
Pen Simple HTML & SVG Loading Spinners Стивена Делани (@sdelaney) на CodePen.
Посмотреть код здесь.
3. Анимация прокрутки текста
Еще один отличный способ улучшить ваш текст. Этот фрагмент кода применяет эффект, подобный игровому автомату, который поворачивает слова в поле зрения и за его пределами. Это обычная техника на веб-сайтах, которым необходимо передать универсальность своих творений. Является ли ваш продукт эффективным, удобным и устойчивым? Вставьте эти слова в анимацию, подобную этой.
См. анимацию Pen Text от Yoann (@yoannhel) на CodePen.
Посмотреть код здесь.
4. Анимированная кнопка «Отправить»
Пользователи ценят маленькие, неожиданные моменты удовольствия, которыми сообразительные дизайнеры любят посыпать свои веб-страницы. Эта кнопка отправки представляет собой чистый и приятный способ обеспечить визуальную обратную связь, указывающую на то, что действие было выполнено, например, форма была отправлена.
См. чистую CSS-анимацию кнопки отправки пера от Dead Pixel (@dead_pixel) на CodePen.
Посмотреть код здесь.
5. Логотип, реагирующий на наведение
Обратите внимание на логотип в правом нижнем углу пера ниже — эта анимация применяет тонкую анимацию при наведении курсора мыши. Это еще один визуальный сигнал для пользователей, который делает навигацию по вашему сайту более приятной.
См. Шаблон пера: логотип Алекса Каца (@katzkode) на CodePen.
Посмотреть код здесь.
6. Открытие конверта
Один из моих любимых примеров, эта элегантная анимация уделяет большое внимание деталям. От движения вниз при открытии конверта до деталей на бумаге и тени под ним становится ясно, как маленькие прикосновения складываются в одну плавную, связную анимацию.
Это могло бы стать отличной анимацией кнопки или прокрутки.
См. Анимированную ручкой кнопку почты CSS от Джейка Джайлса-Филлипса (@jakegilesphillips) на CodePen.
Посмотреть код здесь.
7. Горячий кофе
Приведенный ниже фрагмент показывает, как можно использовать простые анимации. В этом случае применение CSS-анимации к перемещению, масштабированию и затуханию непрозрачности оживляет простой в остальном рисунок.
См. «Горячий кофе от Pen» Зейна Уэсли (@zanewesley) на CodePen.
Посмотреть код здесь.
8. Кофемашина
Мы любим наш кофе, так что вот еще один. В этом случае анимация не крадет фокус. Скорее, он улучшает тщательный дизайн вокруг него, чтобы весь элемент казался более захватывающим.
См. анимацию Pen Coffee Machine Pure CSS от Henrique Rodrigues (@hjdesigner) на CodePen.
Посмотреть код здесь.
9. Кнопка покачивания
Нужно привлечь пользователя к определенному действию? Вместо цветной вспышки или модального окна рассмотрите возможность добавления причудливого эффекта покачивания к кнопке. Это дружелюбный, но эффективный способ привлечь внимание, не выглядя навязчивым или существенно нарушая поток посетителей.
См. покачивающуюся кнопку сохранения пера Донована Хатчинсона (@donovanh) на CodePen.
Посмотреть код здесь.
10. Pacman
Я не рекомендую размещать это на вашем сайте из-за риска нарушения авторских прав, но смотреть на него все равно интересно.
См. Pen Pacman от Riccardo (@Ferie) на CodePen.
Посмотреть код здесь.
11. Три точки Загрузка
Еще один пример анимации CSS, создающей эффект загрузки, с которым многие из нас знакомы. Простое изменение масштаба — это все, что нужно, чтобы сказать: «Минуточку, пожалуйста».
См. загрузчик Pen CSS с точками Алексея Петерсона (@petersonby) на CodePen.
Посмотреть код здесь.
12. Ящики для файлов
Чтобы оживить ваши меню, рассмотрите что-то вроде ящиков для файлов на чистом CSS ниже. Его шкафы слегка открываются при наведении курсора мыши, что выделяет вашу основную навигацию среди других.
См.
Pen Pure CSS Drawers ʕノ•ᴥ•ʔノ ︵ ┻━┻ от Jhey (@jh4y) на CodePen.
Посмотреть код здесь.
13. Цветовой веер
Следующий пример особенно хорошо подходит для бизнес-сайтов, ориентированных на дизайн. Попробуйте анимировать цветовые палитры, чтобы создать эффект разветвления, и замените базовые цветные квадраты.
См. Цветовую палитру пера с анимацией Pure CSS от Nitish Khagwal (@nitishkmrk) на CodePen.
Посмотреть код здесь.
14. Трехмерный тумблер
Переключатель включения/выключения является основным элементом дизайна пользовательского интерфейса. В этом примере концепция представлена в трехмерном виде с плавной анимацией переключения состояний. Здесь разработчик изменил элемент ввода флажка CSS во что-то гораздо более интересное.
См.
Переключатель-ручка с ручкой-отверстием Джона Кантнера (@jkantner) на CodePen.
Посмотреть код здесь.
15. Подводная лодка
CSS хорошо подходит для плоских, красочных иллюстраций и анимации. Приведенный ниже код сочетает в себе несколько эффектов для рисования — откровенно говоря — очаровательной подводной лодки. Единственное изменение, которое я бы предложил, сделать его желтым.
См. Pen Submarine с CSS от Альберто Хереса (@ajerez) на CodePen.
Посмотреть код здесь.
16. Анимированный текст заголовка при наведении курсора
В примере Оливии Нг «Эффект наведения для заголовков» исследуется несколько способов добавить динамичности тексту заголовка. Он показывает, как всего пара ключевых кадров может поднять ваши заголовки.
См.
Эффект наведения пера для заголовков от Olivia Ng (@oliviale) на CodePen.
Посмотреть код здесь.
17. Плавающее изображение
«Плавающий» эффект — это тонкое, простое и эффективное использование CSS-анимации. В этом случае он используется для отображения значка с отличными результатами.
См. анимацию плавающего пера — CSS от Марио Дуарте (@MarioDesigns) на CodePen.
Посмотреть код здесь.
18. Астронавт
Вот еще одно умное использование эффекта плавания в сочетании с дружелюбной иллюстрацией из другого мира. Еще один пример тонкого эффекта анимации CSS для улучшения восприятия элемента страницы.
См. Pen Pure Css Astronaut, анимированный художником-кодировщиком (@Coding-Artist) на CodePen.
Посмотреть код здесь.
19. Minimal Cat
В этом примере разумно используется отрицательное пространство в сочетании с своевременной анимацией CSS. Это простой дизайн, который передает большую индивидуальность только с помощью свойства преобразования CSS.
См. анимацию кошки Pen Pure CSS от Йохана Муше (@johanmouchet) на CodePen.
Посмотреть код здесь.
20. Растущие/сокращающиеся стержни
CSS можно использовать для анимации визуализаций и более эффективной передачи результатов. Этот пример демонстрирует, как цвета и скорость могут создавать различные ощущения для динамических столбчатых диаграмм — CSS-анимации позволяют изменять скорость и количество повторений в ваших анимациях.
Посмотрите время воспроизведения логотипа Pen от Дэна Педдла (@dazld) на CodePen.
Посмотреть код здесь.
21. Лазертаг
Признаюсь, это один из самых сложных примеров. Тем не менее, это делает уникальный и увлекательный дисплей загрузки, чтобы удерживать внимание в течение короткого периода времени.
See the Pen Светящийся загрузчик — анимация на чистом CSS от Максима Россиньола (@Maxoor) на CodePen.
Посмотреть код здесь.
22. Свечи
Вот блестящий пример того, как анимация CSS может рассказать историю, пусть и короткую. Вам, вероятно, понадобится много практики, чтобы сделать что-то подобное, но это обязательно зацепит тех, кто впервые посещает ваш сайт.
См. анимацию Pen Funny Candle Pure CSS от Kevin David (@kevin_David_k) на CodePen.
Посмотреть код здесь.
23. Speedy Truck
«Speedy Truck» Криса Джонсона использует параллакс для имитации движения грузовика в естественных условиях. Несмотря на минимализм, это перо компенсирует это несколькими творческими применениями свойства преобразования — есть даже небольшая неровность на дороге.
См. грузовик Pen Speedy от Криса Джонсона (@ChrisJohnson) на CodePen.
Посмотреть код здесь.
24. Снежный шар
Самый уютный пример, который мы смогли найти, этот анимационный снежный шар добавит вашей странице атмосферу, которую вы не получите с неподвижным изображением. Обратите внимание, как снег оживает только в пределах «стеклянного» шара.
См.
анимацию Pen Christmas Snow Globe от Coding Artist (@Coding-Artist) на CodePen.
Посмотреть код здесь.
Последний пример
Как мы уже видели, простое прикосновение CSS-анимации может иметь большое значение для создания более захватывающего опыта для ваших посетителей. Лучшие анимации служат вашему контенту и опыту, не отвлекая и не выглядя бесполезными — все приведенные выше примеры удивительно хорошо соблюдают этот баланс.
Однако мы не могли не добавить последний пример, который нас поразил. Этот пример «Сторожевой башни», вероятно, выходит за рамки этой статьи по своей сложности, но он также является свидетельством того, чего могут достичь только CSS и HTML.
См. анимацию Pen Watch Tower Pure CSS от Трэвиса Даути (@tdoughty) на CodePen.
Чтобы узнать больше об этих удивительных виньетках, подобных этой, загляните в профиль создателя на CodePen и начните придумывать собственные идеи.
Темы: CSS-анимация
Не забудьте поделиться этим постом!
10 классных анимаций CSS для добавления на ваш сайт
Сейчас мы переживаем золотой век веб-анимации. CSS-анимации и переходы не только поддерживаются всеми основными браузерами, но и инструменты, которые мы используем для их создания, становятся действительно мощными. Мы можем контролировать работу наших анимаций в очень тонкой степени, что может помочь нам оживить наши сайты и придать им собственный характер.
Конечно, вы можете злоупотреблять анимацией — в этом нет сомнений. Но учитывая, что крутые CSS-анимации могут привлечь внимание, улучшить удобство использования и просто сделать ваш сайт более веселым , я думаю, будет справедливо сказать, что вы тоже можете их использовать.
Итак, вот 10 классных CSS-анимаций , которые вы можете использовать на своем сайте. Для некоторых из них я представил несколько различных вариантов, чтобы вы могли выбрать тот, который лучше всего подходит для вас.
Это также отличный опыт для изучения CSS других людей, чтобы увидеть, как они создали свою анимацию.
Начнем!
1) Подвижные кнопки для привлечения внимания
Не попадайтесь в ловушку, думая, что анимация предназначена только для создания приятных визуальных эффектов.
Конечно, вы можете использовать их просто для красоты, если хотите! Но анимация также может иметь важное функциональное применение. Например, чтобы привлечь внимание посетителя к частям сайта, на которые вы хотите, чтобы они посмотрели. Простой, но очень эффективный способ сделать это — заставить элементы слегка покачиваться, как показано здесь:
См. перо на КодПене.
Это просто использует преобразование : rotateZ() с @keyframes для создания этих покачиваний. Возможно, вы захотите сделать небольшую паузу в анимации, чтобы она колебалась каждые 5 секунд или около того, а не была в бесконечном цикле.
Проверьте также эти красивые переходы страниц CSS. Это отличный и тонкий способ добавить переходы на страницу во время загрузки нового контента.
2) CSS анимация наведения для кнопок
Очень часто анимация используется для обозначения того, когда пользователь навел курсор на элемент или сфокусировал его.
Это замечательно с точки зрения пользовательского интерфейса, поскольку помогает пользователю узнать, где он находится, а также помогает указать, какие части вашего сайта являются интерактивными, поскольку элементы, которые реагируют на вашу мышь, обычно являются интерактивными.
Вдобавок ко всему, это просто забавно иметь страницу, которая реагирует на вас! Если вам нужен действительно классный способ анимации CSS-кнопок при наведении, ознакомьтесь с некоторыми из этих идей:
См.
перо
на КодПене.
Ничто не бросается в глаза? Как насчет некоторых из них?
См. перо на КодПене.
Все еще ничего не нашли? Хорошо, вам довольно трудно угодить! Как насчет этого анимированного эффекта градиента?
См. перо на КодПене.
То, как это было сделано, тоже весьма умно. Градиент больше, чем содержащий его элемент, и он перемещается с background-position . Неоновый эффект был достигнут с помощью filter: blur() — обратите внимание, что эффекты CSS-фильтра могут привести к снижению производительности, поэтому, если вас это беспокоит, просто удалите свойство фильтра — он по-прежнему хорошо выглядит без размытия, и вы можете даже предпочесть его туда.
3) Анимация загрузки CSS
Как разработчики, мы стараемся максимально сократить время ожидания наших посетителей. Мы оптимизируем наши изображения, используем ленивую загрузку, может быть, даже используем CDN. Но иногда небольшое время загрузки неизбежно. На самом деле, если мы подключаемся к сторонним API, то часть нашего времени загрузки полностью не зависит от нас.
В таких случаях крайне важно, чтобы пользователь знал, что что-то происходит. Вы когда-нибудь нажимали кнопку «Отправить», а страница просто сидела и ничего не делала? Это немного вызывает тревогу, не так ли? Страница загружается? Это не? Должен ли я нажать еще раз? Арх!
Итак, нам нужно указать посетителю, что происходит какая-то обработка — и один из самых простых способов сделать это — использовать классическую анимацию загрузки CSS, состоящую из точек:
См.
перо
на КодПене.
Основное преимущество этого метода в том, что он дешев с точки зрения производительности. Это не замедлит работу браузера в то время, когда у него, вероятно, есть другие дела. Кроме того, это легко понять - все знают, что это значит.
Если вы хотите попробовать что-то более интересное, чем стандартная анимация загрузки CSS с точками, попробуйте некоторые из следующих вариантов:
См. перо на КодПене.
Примечание. Если вы можете измерить, какая часть процесса/загрузки была завершена, вы можете рассмотреть возможность использования индикатора выполнения CSS. Прочтите нашу статью о том, как сделать индикатор выполнения CSS для получения дополнительной информации, или эту статью с более чем 20 великолепными анимированными индикаторами выполнения.
Трехстрочный значок гамбургера стал стандартным способом указать, что пользователь может получить доступ к меню.
Вы нажимаете на гамбургер, и открывается меню. Затем гамбургер становится «X», которым люди могут закрыть меню.
Есть причина, по которой это сейчас стало стандартной практикой — все знают, что это значит, это занимает меньше места, чем написание «Меню» в тексте, и, конечно же, это дает вам прекрасную возможность использовать классные CSS-анимации!
Взгляните на некоторые из этих вариантов:
См. перо на КодПене.
Как вы думаете, какой из них лучше всего подойдет для вашего сайта?
Ознакомьтесь с нашим списком из 10+ примеров меню гамбургеров, если вам интересно больше!
Конечно, когда кто-то щелкает этот гамбургер, вы также должны вызвать меню, что является еще одним прекрасным моментом для использования некоторых крутых анимаций CSS. Классический вариант, и вполне приличный, — это выдвижение меню сбоку:
.
См. перо
на КодПене.
Подходит для большинства ситуаций. Но, если хотите, можете немного пофантазировать...
См. перо на КодПене.
Есть ли на вашем сайте модальные CSS или всплывающие окна? Может быть, для формы регистрации по электронной почте, встроенного контента или части процесса оформления заказа?
Если вы это сделаете, пришло время оставить усталое старое исчезновение и исчезновение. С модальными окнами можно делать гораздо больше! Вместо этого попробуйте одну из этих замечательных идей:
Кстати, даже если вы не используете всплывающие окна с модальными окнами CSS на своем сайте, вы должен проверить опцию «Облигация» ниже. Это потрясающе - и то, как оно появляется, и то, как оно исчезает!
См.
перо
на КодПене.
Текстовые CSS-анимации, безусловно, не то, чем вы захотите злоупотреблять. Люди не ожидают, что текст будет двигаться, поэтому, если его слишком много, это может быть немного подавляющим.
Однако при умеренном использовании анимация прокрутки текста может быть интересным способом привлечь внимание пользователей к определенному заголовку, слогану или призыву к действию на вашем сайте.
Посмотрите эти отличные варианты, например:
См. перо на КодПене.
Или если вы хотите получить действительно роскошь...
См. перо на КодПене.
8) Анимированные страницы 404
Ваша пользовательская страница 404 — это прекрасная возможность вытащить из сумки все свои крутые трюки с CSS-анимацией.
Здесь ваш пользователь ничего не может сделать, кроме как понять, что нужная ему страница не найдена, а затем либо вернуться, либо перейти к другой части вашего сайта. Так почему бы не дать им возможность улыбнуться, пока они там?
Эта затерянная в космосе анимация очень симпатичная и хорошо связана с тем, через что проходит пользователь в данный момент:
См. перо на КодПене.
Или, если вы хотите забавный, слегка ретро-стиль, возможно, это:
См. перо на КодПене.
Если ваш бренд не такой игривый, как предполагают эти варианты, как насчет мягко парящих шестиугольников? Это было бы здорово для технологического или научного сайта. Ничто так не говорит «Наука», как шестиугольники!
См.
перо
на КодПене.
9) Изображения SVG, которые рисуют сами себя
Посмотрите на эту потрясающую анимацию обезьяны ниже:
См. перо на КодПене.
Круто, не так ли? Что еще круче, так это то, что это изображение представляет собой SVG, поэтому оно определено в коде HTML. Это означает, что вы можете взять любой путь SVG (свойство d в элементе path ), вставить его в этот код, и ваша фигура нарисуется сама, как это делает здесь обезьяна! Например, давайте попробуем это с простым треугольником:
См. перо на КодПене.
Понимаете, что я имею в виду?
Это может быть отличный способ показать подпись на экране. Или изображение обезьяны или другая более сложная анимация отлично подойдут в качестве загружаемого изображения или на странице 404.
10) Анимированные формы CSS
Убедитесь, что вы стилизовали свои формы! Нет ничего хуже, чем видеть веб-форму с примененными к ней стилями по умолчанию!
Ну ладно, может быть, есть какие-то вещи похуже - вроде войны, голода и пиццы с ананасами. Но вы поняли мою мысль — убедитесь, что ваши формы выглядят так же хорошо, как и остальная часть вашего сайта.
И пока вы этим занимаетесь, почему бы не добавить туда еще несколько крутых анимаций CSS? Это можно сделать стильным способом, который не будет слишком отвлекать ваших посетителей. Например, как насчет этой идеи?:
См. перо на КодПене.
Если вы предпочитаете, чтобы вокруг полей ввода была полная рамка, вы можете выбрать вариант ниже. Мне нравится, как заголовок перемещается за пределы поля ввода, когда вы щелкаете внутри него:
.
См. перо
на КодПене.
Пора начинать!
Ух ты! Мы прошли там много земли! Но я надеюсь, что у вас есть несколько полезных примеров крутых CSS-анимаций для использования на вашем сайте или, по крайней мере, какое-то вдохновение.
Конечно, потребуется немного времени, чтобы доработать и интегрировать эти идеи на ваш сайт - а если у вас нет времени на все это? Что, если вам просто нужно готовое решение «включай и работай», которое можно сразу же запустить?
Если это про вас, то вам понравится fullPage.js. fullPage поможет вам настроить фантастически выглядящие полностраничные сайты и предоставит вам доступ к набору различных анимаций и переходов, которые работают прямо из коробки.
Это молниеносно быстро, легко настраивается, и если вы уже используете JS-фреймворк, такой как React, или CMS, например WordPress, не беспокойтесь — fullPage будет работать без проблем с вашей существующей настройкой.
Посмотрите, что fullPage.js может сделать для вас!
- Потрясающие анимированные фоны только с помощью CSS
- Лучшие эффекты наведения CSS
- 20+ анимированных индикаторов выполнения
Об авторе:
Уоррен Дэвис — фронтенд-разработчик из Великобритании.