Боковое меню с прокруткой фона с помощью CSS3 | RUDEBOXВ данном уроке мы рассмотрим весьма интересный концепт страницы для чтения. С первого взгляда ничего особенного в ней нет, обыденный текст на листе с простым меню, но все намного интереснее. Дело в том, что у нас будем боковое меню, выезжающее при наведении курсора мыши, при проведении по подпунктам последние будут плавно угасать, кроме этого у нас при прокрутке страницы будет использован небольшой эффект параллакса, что позволит создать эффект живой страницы.

Боковое меню будет состоять из восьми подпунктов стилизованных иконками, выполненных в оранжевых и белых оттенках. Сам текст будет оформлен произвольным образом, а вот бумага на которой он находится будет напоминать стопку листов. Давайте рассмотрим основные аспекты.

Шаг 1. HTML

Наша разметка будет состоять из двух коробок, в одной из которых будет находится сам текст, а во второй организованная навигация, кроме этого добавлен класс вывода фона с эффектом параллакса:

Как Вы заметили -ничего сложного здесь нет, давайте перейдем к следующему шагу.

Боковое меню с прокруткой фона с помощью CSS3 RUDEBOX

Шаг 2. CSS

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

Код получился достаточно приличным, по этому часть пришлось опустить с этических соображений.

Шаг 3. JS

Третий шаг нам необходим для добавления немного магии, а именно для анимации эффекта параллакса при прокрутке и анимации при наведении курсора мыши на боковое меню:

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

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