Эффект качели для контекстного меню сайта RUDEBOXМы уже не раз говорили, что скрытые элементы на сайте весьма позитивно сказываются на его дизайне, такой прием позволяет визуально разгрузить сайт, при этом выделить необходимую нам информацию. В данном уроке мы рассмотрим как создать замечательный эффект «качели» для меню сайта. Идея состоит в том, что у нас будет иконка настройки вверху текстового блока, при наведении курсора мыши на данную иконку будет происходить сдвижение текстового блока вверх и появление дополнительного редактора, все это будет стилизованное в небольшое 3D.

 

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

Шаг 1. HTML

У нас будет общий контейнер, в котором будет содержаться класс ‘menu’ в который будут включены наши иконки:

Кроме этого мы добавляем класс ‘content’, в котором будет содержаться текстовая информация, данный блок с текстом будет исчезать при наведении на иконку настроек.

Эффект качели для контекстного меню сайта RUDEBOX

Шаг 2. CSS

Вся активная анимация будет реализованная с помощью CSS, для начала нам необходимо определить общие параметры и его позиционирование на странице, затем мы указываем параметры блока меню:

При наведении курсора, меню будет появляться, а текстовый блок будет плавно исчезает, мы установим установим смещение по оси Х.

Вот и все. Готово!

Читайте также: