В первой части мы программировали красивые ссылки с подчёркиванием и сменой цвета при наведении. Теперь выкрутим красоту на максимум — сделаем так, чтобы при наведении ссылка меняла цвет не сразу, а постепенно.
Как сделаем анимацию
Логика работы будет такая:
- Оформляем все ссылки на странице как обычно — с тонким подчёркиванием и синим цветом, как в прошлой статье.
- Как только наводим мышку на ссылку, она плавно меняет цвет на оранжевый.
- Линия подчёркивания тоже плавно становится оранжевой и более заметной.
- Как только убираем мышку — ссылка медленно возвращается к синему цвету и тонкой линии.
Сделаем всё по очереди.
Оформляем стильные ссылки
Просто берём финальный код из первой части и вставляем его на сайт. Нам нужны пока два элемента: a<> и a:hover<> :
a < text-decoration: none; color: #0f7afc; border-bottom: 1px solid; border-bottom-color: rgba(15, 122, 252, 0.2); >a:hover
Добавляем анимацию
За плавную смену цвета и любых других параметров отвечает свойство transition . Оно говорит браузеру, что все свойства, которые есть у элемента, нужно сделать такими, как написано, вот за такое время. В общем виде это работает так:
Как сделать анимированный пост для ВК. Анимация в фотошопе
- Берём какой-то элемент, например ссылку.
- Прописываем ссылке все свойства, которые у неё должны быть.
- Пишем transition 1s; .
- Теперь браузер понимает, что каждый раз, когда надо показать любую ссылку, все изменения свойств нужно растянуть на одну секунду.
- Пишем свойство a:hover<> .
- И теперь, когда мы наводим мышку на ссылку, браузер в течение целой секунды меняет параметры ссылки на те, что прописаны в ховере.
- А когда убираем мышку — столько же времени возвращает ссылке первоначальный вид.
У свойства transition есть много параметров, и с ними можно настроить анимацию чего угодно, но пока нам это не нужно. Всё, что нам нужно добавить на этом этапе в раздел a<> , — это команду:
Одна секунда — это долго, лучше поставить чуть меньше. Но это уже чистая вкусовщина, поэтому ставьте сколько понравится. Для боевых интерфейсов делайте 0,1–0,3, для более манерных декорных вещей — 0,5–0,8.
Делаем линию подчёркивания более заметной
Всё решается одной цифрой: в разделе a:hover<> меняем параметр alpha с 0.2 на 1:
border-bottom-color: rgba(208, 64, 0, 1);
Напомним: rgba означает «красный, зелёный, синий и прозрачность (alpha)». Alpha задаётся числом от 0 до 1. Например, 0,1 — это 10% непрозрачности, почти не видно. 0,5 — линия будет наполовину прозрачной. И вот у нас было нижнее подчёркивание.
Когда мы поменяли прозрачность на 1, линия из совсем бледной снова стала толстой. Но так как мы при этом ещё и поменяли у неё цвет, то кажется, что линия тоже начала ярче светиться при наведении.
Теперь, когда мы наведём мышку на ссылку, сработает свойство transition и цвет текста и линии плавно поменяется на тот, что нам нужен. А когда уберём — снова сработает transition и плавно всё вернётся обратно. Это ли не магия?
АНИМАЦИЯ ОБЛОЖКИ | Как сделать анимацию обложки для трека на телефоне
Как это улучшить
Наш способ — самый простой из возможных, и сделать анимацию у ссылок можно гораздо интереснее:
- дописать специфические параметры transition для каждого браузера, чтобы ссылки везде выглядели прекрасно;
- добавить плавную смену цвета при нажатии на ссылку;
- сделать так, чтобы при наведении мышки над ссылкой появлялось краткое описание того, куда она ведёт.
Поделитесь в комментариях своими вариантами, как бы вы применили или улучшили поведение ссылок.
Анимация — это фронтенд
Нужно больше анимации и стиля? Приходите в «Практикум» учиться фронтенд-разработке. Раз уж вы здесь, зайдите прямо сейчас:
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Источник: thecode.media
Как сделать так, чтобы стикеры во «ВКонтакте» начали двигаться?
В честь Нового года администрация «ВКонтакте» решила порадовать своих пользователей новой фичей — теперь любимые стикеры научились еще и двигаться. Это выглядит очень мило и забавно! Но, к сожалению, «оживить» старые стикеры не получится. Данное нововведение относится пока что только к двум новым наборам: «Коржик» от МегаФона и «Спаркс» от пользователя. Первые стикеры, кстати, бесплатные — так что вы сможете уже сейчас оценить, как Коржик двигает хвостом, играет с гирляндой и даже ДЫШИТ.
Однако иногда бывает глюк, когда Коржик добавляется в вашу базу стикеров, но все равно не двигается. Чтобы исправить эту возмутительную ситуацию, необходимо перезагрузить браузер или приложение, в зависимости от того, с какого устройства вы сидите во «ВКонтакте». Стоит отметить, что Коржик так и будет оставаться неподвижным, если у вас стоит старая версия приложения.
Источник: yandex.ru
Зачем нужны анимации в вебе и как их создавать
Анимация — это переход элемента от одного состояния к другому. Пользователям нравится, когда на сайте что-то вращается, появляются новые элементы или происходит что-то неожиданное. Если на сайте много таких «вау-эффектов», он может стать вирусным или получить какую-нибудь премию, например, Awwwards.
Даже совершенно обычный сайт можно оживить анимацией:
Анимации делают работу с сайтом удобной и приятной. Например, когда пользователь совершает действие, ему можно показать какие-то изменения на странице, как здесь:
Анимированные страницы сглаживают переход между разными состояниями элементов интерфейса и создают эффект непрерывности происходящего. А необычный предварительный загрузчик увлекает посетителя на время загрузки страницы и снижает показатель отказов.
Способы создания анимаций
Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций:
- CSS-анимации,
- SVG-анимации,
- JavaScript-анимации.
CSS-анимации
Это самый простой способ анимировать объекты на странице. Он позволяет вращать, растягивать, уменьшать и увеличивать объект, перемещать его или выполнять другие действия.
CSS-анимации создают с помощью группы свойств animation . Они задают длительность анимации, количество повторений, зацикленность, стороны движения и другие характеристики:
- animation-name — имя анимации, можно задавать несколько имён через запятую;
- animation-direction — направление анимации;
- animation-fill-mode — состояние элемента до и после анимации;
- animation-play-state — управление состоянием: запуск или приостановка анимации;
- animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла;
- animation-delay — задержка начала выполнения анимации;
- animation-iteration-count — количество повторов анимации;
- animation-duration — длительность.
С помощью CSS можно создавать покадровые анимации — когда картинка, на которой нарисован объект в разных состояниях, превращается в движение. Для таких анимаций нужно иметь уже готовую раскадровку или склеить её самостоятельно из нескольких изображений.
CSS-анимация может быть объёмной. Для создания 3D-изображения используют свойство transform-style со значением preserve-3d . С его помощью можно вращать объект и изменять его в трёх плоскостях:
Создавать CSS-анимации можно и с помощью свойства transition. Но оно работает только при загрузке страницы, добавлении классов или изменении состояния, к примеру, hover .
Посмотреть на CodePen. Луна тоже нарисована на чистом CSS.
CSS-анимации можно запускать при загрузке страницы или при определённом действии, но для этого иногда нужен JavaScript. Например, чтобы при открытии меню на мобильном кнопка бургера превращалась в крестик, нужно добавить ей соответствующий класс с помощью JS и для этого класса прописать изменения CSS-свойств.
Автор — Бенджамин Симье, посмотреть на CodePen.
С помощью CSS можно анимировать векторную графику — SVG. Например, заставить контур постепенно появляться или добавить индикатор загрузки:
Индикатор загрузки, автор — Стивен Робертс. Посмотреть на CodePen.
SVG-анимации
Внутри SVG есть отдельный способ анимаций — SMIL. Это спецификация для анимаций, действующая только внутри векторной графики. В ней определяется набор новых тегов и их атрибутов, которые обеспечивают работу с частями SVG.
SMIL применяют, когда CSS-анимации не справляются и не могут анимировать содержимое SVG. Например, его используют, когда нужно трансформировать форму фигуры, изменив координаты для линии или саму форму:
Или когда нужно заставить элемент двигаться по заданному пути:
А такая анимация похожа на покадровую в CSS, но это всё ещё SMIL:
JavaScript-анимации
Третий способ создания анимаций — с помощью JavaScript. Его используют, когда другие способы не подходят. Например, с помощью JS можно создать популярный параллакс-эффект — когда при прокрутке окна браузера элементы фона на переднем и заднем плане двигаются с разной скоростью. Это даёт ощущение трёхмерного пространства.
Автор — Джереми Кэрис, посмотреть на CodePen.
Самые сложные анимации создают с помощью JavaScript, WebGL и специальных библиотек, которые упрощают написание кода к анимациям: Three.js, TweenMax или GSAP.
Сайты с JavaScript-анимацией загружаются долго, могут работать медленно, но вызывают «вау-эффект».
Как оптимизировать анимации на сайте?
Чем больше анимаций на сайте, тем больше информации приходится обрабатывать браузеру. И чем сложнее анимации, тем медленнее отрисовывается страница. Поэтому важно выбирать правильные способы анимирования и не усложнять их. Например, если нужно просто вращать элемент вокруг своей оси, то лучше использовать animate и transform , а не подключать JS-библиотеку.
Свойство transform универсально для большинства ситуаций, и когда мы его используем, браузеру легче заново отрисовать изменения на странице. К примеру, если нужно переместить объект, то стоит использовать transform: translate , а не абсолютное позиционирование и координаты left и right .
Таких тонкостей у анимаций много. Нужно их обязательно соблюдать, чтобы не превратить сайт в медленно работающего «монстра», от которого «убегают» пользователи.
Как создать простую анимацию
Самый простой способ познакомиться с анимациями — изучить свойства animation . В этом поможет документация MDN, переведённая на русский язык.
Попробуем вместе сделать простую анимацию — прыгающий мячик.
Сначала создадим HTML-разметку. Добавим два элемента. Первый — ball , сам мяч. Второй — ball-bg , элемент для фона, создаём его внутри ball. Делаем два разных элемента, потому что мячик будет скакать, а внутри него станет вращаться фон.
Добавляем базовую CSS-стилизацию для элементов: размеры, скругление углов, фон футбольного мяча.
.ball < font-size: .9px; width: 60em; height: 60em; border-radius: 50%; position: relative; >.ball-bg < width: 100%; height: 100%; background: url(http://guthriesports.files.wordpress.com/2010/03/soccer_ball_6.jpg) no-repeat center; >
Чтобы применить анимацию к элементу, задаём свойство animate элементу ball-bg . Чтобы проще было с ним разбираться, будем пользоваться отдельными свойствами внутри animate.
Теперь усложним анимацию: сделаем так, чтобы мяч прыгал. Для этого используем свойство transform и его значения:
- translate — для перемещения горизонтально и вертикально;
- scale — чтобы имитировать эффект сжатия и растягивания мяча, когда он ударяется об пол;
- rotate — придать дополнительное вращение при ударах.
У этой анимации будет больше ключевых кадров, потому что мы постараемся максимально подробно описать поведение мяча. Начнём с первого и последнего кадра. Потом добавим кадры, когда мяч должен ударяться об пол. Можно помочь себе и нарисовать с помощью CSS линию, чтобы видеть, обо что ударился мяч. При ударе об пол используем scale , чтобы сжать мяч.
Так как на следующих шагах scale не будет, мяч вернётся к исходным размерам.
Теперь применим анимацию к элементу ball . Длительность анимации делаем больше секунды.
.ball
Добавим промежуточные пункты, чтобы анимация смотрелась более правдоподобно. Получаем результат:
Итоги
Анимации помогают удивить пользователя и подсказать, как работать с вашим сайтом. Они также выделяют вас среди конкурентов: анимированные сайты легче запоминаются, на них хочется возвращаться вновь. При этом технические возможности для реализации любых анимаций сейчас на пике, потому что устройства стали производительнее и появилось множество специальных библиотек.
Однако анимации могут и отталкивать посетителей, если они замедляют загрузку страниц. Поэтому важно оптимизировать их и выбирать правильные способы анимирования.
⭐ Научиться создавать качественные анимации, работать с векторной графикой, добавлять маски и фильтры, анимировать слайдеры, кнопки и другие элементы сайта вы можете на наших специализированных курсах.
Больше статей
- Как защитить приложение от хакеров
- Что такое и зачем нужны алгоритмы
- HTML-шаблонизаторы
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Источник: htmlacademy.ru