Традиционные представления в области веб-дизайна учат нас - все что не разрабатывается, должно разрабатываться с целью сократить лишние действия пользователя на сайте (в данном случае, речь о прокрутке) и размещать самую важную информацию в верхней части главной страницы. Однако, с тех лохматых времен много чего изменилось, и теперь мы живем в мире сплошного "скроллинга". Пользователи привыкли выжимать из страницы максимум информации, прокручивая все до конца. Как оказалось, размер сайта имеет значение даже для Google — чем длиннее, тем лучше. Чтобы повысить и поощрить этот пользовательский интерес к прокрутке, разработчики стали придумывать различные эффекты и приемы, например такие, как параллакс.
Параллакс помогает достичь эффекты:
- погружения пользователя в уникальную среду;
- оживления CTA кнопок или форм;
- наделени жизнью и движением неподвижных объектов.
Так что же такое параллакс?
Параллакс — это 3D эффект, при котором во время прокрутки фон веб-страницы движется с различной скоростью, в отличие от переднего плана, который либо находиться в статике, либо движется гораздо медленнее. Эффект имеет большую визуальную ценность, а главное, такого эффекта несложно добиться с помощью CSS.
Как достичь эффект параллакса с помощью CSS?
Находим в свойствах:
1. background-attachment
Это свойство используется для определения состояния фона — фиксированно оно или прокручивается на странице.
Syntax: background-attachment: scroll/fixed/local;
2. background-position
Это свойство используется для определения начальной позиции фона.
Syntax: background-position: value;
3. background-repeat
Это свойство используется, чтобы определить будет ли фоновая картинка повторяться, и как он будет повторяться.
Syntax: background-repeat: repeat/repeat-x/repeat-y/no-repeat;
repeat – Фон повторяется вертикально и горизонтально.
repeat-x – Фон повторяется только горизонтально.
repeat-y – Фон повторяется только вертикально.
no-repeat – Фон не повторяется.
4. background-size
Это свойство определяет размер фонового изображения.
Syntax : background-size: auto/length/cover/contain/;
auto – значение по умолчанию.
length – настраивает ширину и высоту фонового изображения.
percentage – настраивает ширину и высоту фонового изображения в проценте содержащихся элементов.
cover – масштабирует фоновое изображение. Делайте фоновое изображение как можно большим, чтобы нужная область была полностью покрыта фоновым изображением.
contain – масштабируйте изображение до максимального размера, чтобы его ширина и высота могли поместиться в области содержимого.
Добавив ко всему этому немного JavaScript можно отрегулировать скорость параллакса. Надеемся у вас все получится.
Добавить комментарий