Использование overflow в качестве маски

Самое сложное для начинающего HTML-верстальщика — это работа с анимацией. Особенно, в самом начале осилить такие свойства как animation или keyframes, начинающему разработчику бывает довольно непросто. Думаю, многим знакома эта ситуация, когда пользуешься какое-то решением и тебя вроде все устраивает. Но, возникает неожиданная потребность внести какие-то правки, после которых все идёт к чертям. Основная проблема в данной ситуации кроется не только в том, что вы не прочли какие-то книги по HTML, CSS или JS. Проблема кроется в отсутствии самого важного — это практики (кэп). Я, конечно, мог бы описать в данной статье о том, как и на чём практиковаться, но эта статья немного о другом.

Единственное, что я могу вам посоветовать, это разработать свой проект. Нет разницы, что это за проект и какой там будет код, просто начните его разрабатывать. Придумайте идею для вашего проекта и попробуйте её реализовать. Если придумать идею для вас сложней, чем её реализовать, то посетите Behance или Dribble. Итак! Я немного отошёл от темы. В данной статье, я хочу рассказать о том, как создать маску с помощью overflow для нескольких слоёв. У нас будет два слоя, в одном из которых будет анимация при наведении. Я хочу подробно разобрать данную реализации, чтобы начинающим разработчикам было понятно, как создаётся такая анимация. В качестве примера, я решил показать вам то, как я сделал кнопку скачивания файла для одного из проектов. Пример не особо большой, но, я постараюсь разобрать его как можно подробней. Я заранее подготовил макет этой кнопки (изобр. ниже).

Как вы можете заметить, слева имеется синий круг. В этом слое, у нас будут находиться 2 иконки. Иконка «archive» и иконка «download». При наведении на этот слой, иконка «archive» будет спускаться, то есть исчезать из области видимости. Сверху на центральную позицию, будет становиться иконка «download».

Как это происходит?

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

Поэтапная реализация

Давайте теперь подробно разберем код выше:

• border-radius: 50%; - делаем полное округление для данного элемента.
• background-color: #3baaf5; - задаем цвет фона (синий).
• width: 48px; height: 48px; - ширина и высота по 48px
• overflow: hidden; - запрещаем внутренним элементам выходить за пределы допустимой области (48px).
• position: relative; - устанавливаем положение элемента относительно его исходного места.

Чтобы наглядно продемонстрировать вам то, как будут задаваться все эти свойства, посмотрите гифку ниже.

Отмечу, что код не работает точь-в-точь, как на гифке выше. Последовательность установки свойств, не играет никакой роли на то, как будет выглядеть элемент. Отлично! Теперь мы поняли как будет выглядеть наш круг и какие свойства он имеет. Далее, нужно вставить внутрь этого элемента, две иконки. Иконка «download» и «archive». Иконки будут формата SVG.

Иконки я скачиваю с сайта iconfinder.com. Оттуда же я взял эти две иконки, которые скоро нам пригодятся. Элемент у нас есть (синий круг), теперь вытаскиваем код из каждой SVG картинки и вставляем его внутрь нашего элемента.

Я убрал лишнее из <svg> элементов и задал каждому свой уникальный идентификатор (#download-icon и archive-icon). Чтобы иконки могли позиционироваться в любую точку без смещения соседних элементов, нам нужно установить каждому <svg> элементу, свойство position: absolute. Только после установки этого свойство, элемент будет абсолютно позиционироваться вне зависимости от того, есть ли рядом с ним элемент или нет.

Но, не все так просто. Чтобы эти иконки не только позиционировались абсолютно допустимой области, но и были по центру, нам нужно указать свойства: width (ширину), height (высоту), left (положение по левому краю) и top (положение по верхнему краю). Чтобы придать плавность каждому свойству, требуется указать свойство transform (трансформирование), для более точного центрирования элемента. Ну и не забываем, что нам нужна плавность (transition).

Вот таким образом, у нас и центрируются SVG иконки. Теперь, когда наши иконки находятся по центру, нужно каждую из них расставить так, чтобы при наведении, иконка загрузки появлялся сверху вниз, а иконка архива, с центра вниз. Мы уже ограничили область для нашей анимации, теперь нужно установить псевдокласс на родительский элемент, то есть на синий круг. Давайте установим псевдокласс :hover для класса .download-btn__icon так, что если мы наводим на этот элемент, иконка архива, уходит плавно вниз.

При наведении, свойство спускается top = 100%, а прозрачность элемента opacity = 0. То есть, наш элемент плавно спускается и исчезает.

Да, иконка загрузки пока находится в центре. Для неё мы ещё не задали начальную и конечную позицию при наведении. Давайте это сейчас сделаем.

Начальная позиция иконки загрузки, будет top = 0%. При наведении на синий круг, top = 50%, то есть в центре.

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

Как вы можете заметить, я выделил края синего круга — красным цветом. Это как вы прочитали в самой картинке — overflow. То есть, это допустимая область для внутренних элементов. На гифке ниже поочерёдно продемонстрированы все применяемые свойства.

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

P.S.: Как оказалось, подобные статьи писать довольно не просто. Думаю, будут писать такой подробный разбор раз в месяц. Есть ещё многое из того, что я хотел разобрать.