Создавая сайт вы наверняка задумывались как добавить различные эффекты, чтобы тем самым придать изюминку к вашему проекту. Практически на каждом сайте вы можете встретить полосу прокрутки, при этом прокручивая страницу вниз вы просматриваете скучный скроллинг. Но что делать если вы хотите преподать материал красиво с прокруткой, в данном уроке мы рассмотрим как создать интересный эффект при прокрутке с помощью небольших правил css. Такой вариант отлично подойдет для организации портфолио. И так, давай посмотрим, что у нас с этого получилось.

Такой эффект уже реализован на новом сайте e-bay. В данном уроке мы создадим нечто похожее но о пользе лаванды. При этом мы не будем использовать различные скрипты, прокрутка реализована только на CSS. Для фона нам необходимы изображения высокого разрешения. И так, приступим.

Шаг 1. HTML

Для разметки нам необходим контейнер с описаниями и заголовками, при этом каждая часть содержания содержит элемент div с классом “wrapper”.

Как вы заметили разметка достаточно простая. Перейдем к следующему шагу.

Шаг 2. CSS

Для начала рассмотрим класс контейнера. Свойство box-sizing позволяет изменить модель определения размеров, при этом используется content-box, в которой высота и ширина включает только содержание.

Нам необходимо создать адаптивный дизайн, фоновое изображение для первой секции имеет ширину 500px, которая представляет 500px/1200px x 100% = 41.66667%

Для больших мониторов будет обрабатываться с помощью медиа-запросов.

Далее рассмотрим эффект прокрутки, нам необходимо применить псевдо-элементы :after. Они будут располагаться под каждой секцией и содержать фоновое изображение. Для фиксации воспользуемся свойством bacground-attachment.

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

Мы разрабатываем кроссбраузерную прокрутку, следует заметить, что cвойство background-attachment:fixed не поддерживается в мобильной версии Safari. Решаем проблему следующим образом.

 Нам необходимо уменьшить шрифт для мониторов с маленьким разрешением.

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

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

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