Приветствую всех, дорогие читатели!
Качественная и уместная анимация страниц сайта радует глаз и помогает в работе. Можно сказать, что она является одной из основ веб-дизайна наших дней. Взаимодействие пользователей с современными веб-сайтами серьезно завязано именно на анимации. Она способна сообщать о неких состояниях страницы, элементов, направлять внимание. Анимация помогает пользователю увидеть результат его действий и может влиять на его поведение.
К сожалению, в дизайне некоторые эффекты показать сложно, да и есть большая вероятность того, что тебя могут неправильно понять разработчики. К тому же, лучше смотреть уже на разработанные эффекты, чтобы сразу представить, как оно будет реализовано.
Ниже небольшая коллекция, которая поможет оживить ваши сайты.
- Кнопки
https://tympanus.net/Development/CreativeButtons/
https://tympanus.net/Development/ButtonStylesInspiration/
- Ссылки
https://tympanus.net/Development/CreativeLinkEffects/
https://codepen.io/brenden/pen/RNZXqx
- Кнопки с прогресс-баром
https://tympanus.net/Development/ProgressButtonStyles/
https://tympanus.net/Tutorials/CircularProgressButton/
- Иконки
https://tympanus.net/Development/IconHoverEffects/#set-1
https://tympanus.net/Development/AnimatedSVGIcons/
- Поля ввода
https://tympanus.net/Development/TextInputEffects/
https://tympanus.net/Development/TextInputEffects/index2.html
- Всплывающие окна (модальные окна)
https://tympanus.net/Development/ModalWindowEffects/
https://tympanus.net/Development/DialogEffects/
- Анимированные заголовки
https://codyhouse.co/demo/animated-headlines/
- Анимированные фоны
https://bashooka.com/coding/web-background-animation-effects/
- Подписи у картинок
https://tympanus.net/Tutorials/CaptionHoverEffects/
- Анимация смены страниц
https://tympanus.net/Development/PageLoadingEffects/
- Пагинация
https://codyhouse.co/demo/pagination/
- Фотографии
https://codepen.io/nxworld/pen/ZYNOBZ
https://tympanus.net/Development/HoverEffectIdeas/
https://tympanus.net/Development/HoverEffectIdeas/index2.html
- Подсказки (тултипы)
https://tympanus.net/Development/TooltipStylesInspiration/
- Уведомления
https://tympanus.net/Development/NotificationStyles/
- Подборка разных эффектов
https://ianlunn.github.io/Hover/
Во всех этих примерах можно вытащить готовый код, который останется только немного изменить под ваш дизайн.
---------------------------------
Спасибо за внимание! Ставьте лайк, делитесь своим мнением и подписывайтесь на канал! Буду рад вашей поддержке!)
Текст: Андрей Мухорин
Коллекция была взята у Алексей Бычков