Параллакс эффект при прокрутке - ldm & co - команда дмитрия лукьяна по созданию сайтов, их продвижению и маркетинговому погружению в задачи клиента с оплатой за результат

Теория

Прежде чем говорить о принципе работы, давайте выполним базовую разметку:

А вот основные стили:

Именно класс содержит всю магию параллакс-эффекта. Указав для элемента свойства и , мы привяжем построение перспективы от центра этого элемента, создав тем самым исходный фиксированный 3D вьюпорт. Благодаря свойству контент внутри элемента будет прокручиваться как обычно, но элементы-потомки теперь будут отображаться относительно фиксированной точки. Это ключевой принцип создания параллакс-эффекта.

Далее — класс . Как можно понять из названия класса, он определяет слой контента, к которому будет применяться параллакс-эффект; элемент выпадает из основного потока и заполняет собой всё пространство контейнера.

И наконец, у нас есть классы-модификаторы и . Они определяют скорость прокрутки параллакс-элемента посредством перемещения его по оси Z (отодвигая его от вьюпорта или приближая к нему). Для краткости я установил только две скорости слоя — позже добавим ещё.

32. New York Times: Tomato Can Blues

В эпоху, в которой люди перестали обременять себя чтением журналов и газет, многие из журналистов задались вопросом, как можно привлечь аудиторию к печатному слову?

Один такой вариант по преодолению этого кризиса был предложен американской газетой «The New York Times», разработавшей новую форму для представления своих журнальных статей — сайт-одностраничник, созданный с использованием последних разработок веб-дизайнеров, оформленный иллюстрациями Аттилы Футаки.

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

Альтон

Alton — это плагин jQuery «прокрутка к нам». Прокрутка прокрутки означает, что собственная прокрутка вашего браузера отключена в пользу целевой прокрутки, которая при запуске (колесом мыши или сенсорной панелью) приводит вас к следующей вертикальной точке на экране или к вершине следующего контейнера.

Alton поддерживает три отдельных типа функций: «Герой», «Уикенд» и «Стандарт». Стандарт позволяет использовать полную прокрутку страницы, при этом каждый раздел имеет высоту 100%. Свиток выводит следующий раздел или предыдущий раздел. Bookend позволяет вам создавать в стиле «форзац», в то время как Hero позволяет вам прокручивать джек только в разделе «Hero», а на остальной части страницы (включается) встроенная прокрутка.

Около:

Домашняя страница: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Создано: лист бумаги

Установка: Скачать с Github

1. Flat design vs Realism

А теперь ответьте на вопрос — чью сторону вы займете?

С подачи гигантов Microsoft, Apple и плоский дизайн (англ. flat design) мгновенно превратился в хит сезона и стал предметом для обсуждения в сотнях блогов и новостных лент. Он был воспринят как своеобразный прорыв в веб-дизайне и, скорее всего, таким он и был в действительности.

Интерактивное агентство «Intact», обратившее внимание своих клиентов на такой, несколько необычный этап в виртуальном дизайне, подготовило для них интерактивное путешествие под названием «Плоский дизайн против реализма». Естественно, все создавалось с помощью эффекта параллакс-скроллинга

Креативным директором агентства Алехандро Лазосом сделано пояснение, что самым нетривиальным для них было объединение HTML5-игры с параллакс-скроллингом.

Разделы страницы с параллакс-эффектом

Предыдущие примеры демонстрировали основные приёмы, используя очень простой контент, но страницы большинства сайтов состоят из отдельных блоков-разделов, к которым можно применять разные эффекты. Вот как это делается.

Для начала нам понадобится элемент , чтобы сгруппировать наши слои:

Вот CSS-стили для группового элемента:

В этом примере мне нужно, чтобы каждая группа заполняла вьюпорт, поэтому я указал , однако при необходимости можно указывать разные значения для каждой группы. Значение не даёт браузеру производить слияние слоёв элементов , а позволяет расположить дочерние элементы parallax__layer относительно группового элемента.

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

Если не обрезать контент, элементы-потомки будут выходить за его границы, поэтому придётся проявить изобретательность и использовать разные значения для групп, чтобы обеспечить правильное скрытие/отображение контента при прокрутке документа.

Не существует чётких правил для решения проблемы с позиционированием слоёв — в разных проектах может быть разная реализация. Гораздо проще устранить неполадки в слоях, если понимать, как работает параллакс-эффект — чтобы увидеть картину яснее можно применить трансформацию к групповым элементам:

Посмотрите на следующий пример — обратите внимание на опцию debug!

pagePiling.js

Page Piling — это плагин jQuery, который позволяет вам создавать свой сайт в разных разделах, которые накладываются друг на друга. При прокрутке или при обращении к URL каждый раздел отображается в аккуратной скользящей анимации. pagePiling.js совместим со всеми платформами — настольными, планшетными и мобильными — и работает с большинством браузеров. Он изящно ухудшается в старых браузерах, которые не поддерживают его анимацию (например, IE 7). Чтобы использовать плагин, вам нужно включить CSS и файл Javascript в ваш HTML. pagePiling.js инициализируется функцией (document) .ready:

Для более сложных инициализаций, пройдите через README.md.

Около:

Домашняя страница: //alvarotrigo.com/pagePiling/

Создано: alvarotrigo

Установка: Скачать с Github

How To Create a Parallax Scrolling Effect

Use a container element and add a background image to the container with a specific height. Then use
the to create the actual parallax
effect. The other background properties are used to center and scale the image
perfectly:

Example with pixels

The example above used pixels to set the height of the image. If you want to
use percent, for example 100%, to make the image fit the whole screen, set the
height of the parallax container to 100%. Note: You must also
apply to both <html> and <body>:

Example with percent

body, html { height: 100%;}.parallax {
/* The image used */ background-image: url(«img_parallax.jpg»); /* Full height */
height: 100%; /* Create the parallax
scrolling effect */ background-attachment: fixed;
background-position: center; background-repeat:
no-repeat; background-size: cover;}

Some mobile devices have a problem with . However, you can use media queries to turn off the parallax effect for mobile devices:

Example

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */@media only screen and (max-device-width: 1366px) { .parallax {

background-attachment: scroll; }}

❮ Previous
Next ❯

Parallax sections

The previous examples demonstrated the basic techniques using very simple content but most parallax sites break the page into distinct sections where different effects can be applied. Here’s how to do that.

Firstly, we need a element to group our layers together:

Here’s the CSS for the group element:

In this example, I want each group to fill the viewport so I’ve set , however arbitrary values can be set for each group if required. prevents the browser flattening the elements and is used to allow the child elements to be positioned relative to the group element.

One important rule to keep in mind when grouping elements is, we cannot clip the content of a group. Setting on a will break the parallax effect. Unclipped content will result in descendant elements overflowing, so we need to be creative with the values of the groups to ensure content is correctly revealed/hidden as the visitor scrolls through the document.

There are no hard and fast rules for dealing with layering as implementations will differ between designs. It’s much easier to debug layering issues if you can see how the parallax effect works — you can do that by applying simple transform to the group elements:

Have a look at the following example — note the debug option!

Как сделать красивую полосу для прокрутки на CSS

Скролл бар используется не только на веб страницах но и в отдельных формах, поэтому его форма и размер имеют большое значение. Да и с красивым дизайном сочетаться стандартная панель прокрутки не будет. Самое простое решение данной проблемы — это стилизовать стандартный скролл средствами css3. Ограничение данного способа в том, что он работает только в браузерах использующих webkit

Вот пример HTML кода для работы:

<div></div>

CSS

.scroll-block {height: 70px;width: 340px;background: whitesmoke;overflow-y: scroll;border:1px solid;}
.scroll-block::-webkit-scrollbar-track {border-radius: 4px;}
.scroll-block::-webkit-scrollbar {width: 6px;}
.scroll-block::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;}
.scroll-block:hover::-webkit-scrollbar-thumb {background: #6a7d9b;}

Рассмотрим подробнее каждый элемент

::-webkit-scrollbar-track {border-radius: 4px;} — Задает для трэка скругление краев в 4px, так же можно добавить фон::-webkit-scrollbar {width: 6px;} — Ширина скролла 6px::-webkit-scrollbar-thumb {border-radius: 4px;background: #f0f2f5;} — Задает цвет и радиус скругления в трэка:hover::-webkit-scrollbar-thumb — При наведении на блок меняет цвет трэка.

Так же если нужно оформить скролл-бар для всего сайта, то в CSS необходимо убрать .scroll-block, и тогда параметры станут глобальными.

Summary

Article Name

Как сделать красивую полосу для прокрутки на CSS

Description

JS

function parallaxIt() {
 var $fwindow = $(window);

 $('').each(function (index, e) {
 var scrollTop = $fwindow.scrollTop();
 var $contentObj = $(this);

 $fwindow.on('scroll resize', function (){
 scrollTop = $fwindow.scrollTop();

 $contentObj.css('top', ($contentObj.height() * index) - scrollTop);
 });
 });

 $('').each(function(){
 var $backgroundObj = $(this);

 $fwindow.on('scroll resize', function() {
 var yPos = - ($fwindow.scrollTop() / $backgroundObj.data('speed')); 
 console.log(yPos)
 var coords = '50% '+ yPos + 'px';

 // Move the background
 $backgroundObj.css({ backgroundPosition: coords });
 }); 
 }); 
 
 $fwindow.trigger('scroll');
};

parallaxIt();

4 проблемы параллакс-эффекта

Для сайтов, рассматривающих возможность принятия (или повторного принятия) этого тренда, давайте рассмотрим некоторые из основных проблем UX с параллакс- эффектом.

Контент, представленный в параллаксе, может быть сложным для управления

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

Поскольку этот эффект требует времени, целевые пользователи, которые ищут конкретную информацию, могут пропустить важный контент, представленный при помощи параллакс-эффекта.

При использовании анимации параллакса загрузка страниц может занять больше времени. На сайте Apple некоторые пользователи скроллили страницу и почти ничего не видели на экране, потому что анимация параллакс-эффектов еще даже не запустилась. Пустые экраны – это не то, что хотели дизайнеры, и не то, за чем пришли пользователи. Apple.com: участник исследования столкнулся с пустыми экранами, потому что анимированный параллакс текст и изображения загружались не так быстро, пока он скроллил страницу вниз. Пользователь должен был продолжать скроллить, чтобы контент отобразился, затем он прокрутил обратно до начала каждого раздела, чтобы прочитать текст и посмотреть изображения. Но слишком быстрый параллакс-эффект также может быть проблемой: когда анимация привязана к скорости скролла пользователей, у людей может не быть возможности читать анимированный текст, если они скроллят слишком быстро. Пользователь при скроллинге мобильного сайта New York Times, заметил панель прокрутки текста вверх и в стороне от таблицы, которую она читала. Она сказала: «О, это произошло так быстро, что я даже не смогла прочитать текст». Эффект замедлил ее способность интерпретировать таблицу и чувствовать контроль над процессом. Приложение NYTimes для iPhone: быстрая прокрутка страницы пользователем заставляла текст, анимированный параллакс-эффектом, прокручиваться слишком быстро, поэтому не было времени его прочитать.

Пользователь вообще может не заметить параллакс-эффект

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

На мобильных устройствах едва заметные параллакс-эффекты легко пропустить, потому что рука пользователя может блокировать анимацию, появляющуюся внизу. Пропуск эффектов параллакса не может быть вредным для опыта (до тех пор, пока контент не исчезнет), но дизайнеры должны подумать, стоит ли эти эффекты создавать и поддерживать.
Параллакс не очень впечатляет пользователей. Оценят ли люди параллакс-эффект? Скорее всего только другие дизайнеры или разработчики. Когда вы знаете, как сложно создавать такие вещи, как параллакс-страницы с длинной прокруткой, вы можете оценить работу. Но, прямо скажем, среднестатистическим пользователям все равно. Сегодня реакция пользователей такая же, как и пять лет назад – равнодушие. Они не «удивлены». Участники пользовательского тестирования не останавливаются, чтобы прокомментировать, насколько круты эти эффекты; они не скроллят страницу вверх и вниз для развлечения, чтобы посмотреть, как эффект оживляет страницу. Они не делают паузу, чтобы наблюдать, как каждый эффект плавно переходит в основную область контента. Вместо этого подавляющее большинство людей сосредоточено на контенте, поэтому анимационные эффекты вторичны, если их вообще заметят. Тогда возникает вопрос для дизайнеров: является ли параллакс-эффект лучшим способом произвести впечатление на пользователей или заявить о себе?

ScrollMe

ScrollMe — это плагин для добавления простых эффектов прокрутки параллакса на вашу страницу. Он может масштабировать, вращать, переводить и изменять непрозрачность элементов на странице при прокрутке вниз. ScrollMe не требует JavaScript, и достаточно только знания CSS. Добавив класс «animateme» и необходимые атрибуты данных, вы можете анимировать любой элемент HTML. ScrollMe лучше всего использовать для добавления эффектов CSS. Это легкий и все анимации гладкие, если вы используете их в умеренных количествах.

Около:

Домашняя страница: //scrollme.nckprsn.com/

Создатель: Ник Пирсон

Установка: Скачать с Github

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Parallax эффект фона на landing page

Всем привет. Сегодня расскажу вам о небольшом скрипте для создания простого parallax эффекта.

Статья будет короткой, но информативной, так что уже минут через 15 вы сможете добавить параллакс на свой лендинг. Если вы давно хотели добавить этот интересный эффект на сайт, то читайте дальше…

Что такое параллакс эффект на сайте

Давайте сначала расскажу о том, что это вообще такое. Итак, параллакс эффект в веб дизайне — это такой прием, при котором фоновое изображение двигается медленнее, чем элементы, которые находятся над ним. Для более опытных оговорюсь, что мы не будем «привязывать» эффект параллакса к курсору мыши. а просто создадим parallax фона. Приступим.

Как сделать параллакс эффект на сайте

Итак, первым делом подключаем библиотеку jquery. Как обычно, между тегами head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Теперь, нужно скачать подключить скрипт Simple Parallax Scrolling. Я рекомендую использовать сразу сжатую версию, так как дополнительных настроек внутри скрипта делать не понадобится:

<script src="js/parallax.min.js"></script>

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

<header data-parallax="scroll" data-image-src="images/bg.png">
 <h2>Smartlanding</h2>
 <h3>Создание landing page</h3>
</header>

Я создал шапку сайта (class=»head») и добавил 2 обязательных атрибута:

data-parallax="scroll"

data-image-src="путь к картинке/bg.png"

Обратите внимание, что картинка не кладется в шапку при помощи тега img, а задается непосредственно в атрибутом в том контейнере, в котором хотим реализовать parallax. На этом, в принципе, можно заканчивать, но еще пару слов:

На этом, в принципе, можно заканчивать, но еще пару слов:

Если в dive, в котором хотим реализовать параллакс эффект нет других элементов, то необходимо задать ему высоту, иначе ничего не увидите.
В случае использования не адаптивного дизайна, можно задать ширину и высоту изображения прямо в html при помощи атрибутов naturalWidth и naturalHeight.

Можно двигать изображения при помощи атрибута data-position. Это аналог background-position в css.

С остальными опциями можете ознакомиться на официальной страничке проекта, которая указана выше.

На сегодня — все. Вот так просто можно реализовать простой вариант параллакс эффекта. Пока.

Скачать исходник

Магический код

Используем jQuery. Начнем со стандартного метода , чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.

$(document).ready(function(){
});

Теперь нужно внимание. Первое, что здесь происходит — итерация по всем элементам с атрибутом на странице

$(document).ready(function(){
    $('section').each(function(){
      var $bgobj = $(this); // Назначаем объект
    });
});

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

Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на величину, определяемую в атрибуте .

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

— получаем текущее значение прокрутки сверху. ссылается на атрибут в разметке. — окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.

В нашем примере атрибут имеет значение 10. Предположим, что окно браузера прокручивается на . Это означает, что делится на = .

// Собираем положение фона
var coords = '50% '+ yPos + 'px';
// Смещаем фон
$bgobj.css({ backgroundPosition: coords });

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

В окончательном виде код будет выглядеть так:

$(document).ready(function(){
    $('section').each(function(){
        var $bgobj = $(this); // Назначаем объект
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));
            // Собираем значение координат фона вместе
            var coords = '50% '+ yPos + 'px';
            // Смещаем фон
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

Фиксатор для IE

Остается один момент: старые версии IE не могут вывести теги и . Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.

// Создаем элементы для IE
document.createElement("article");
document.createElement("section");

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

Создать параллакс

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

Пример с пикселями

В приведенном выше примере используются пиксели для установки высоты изображения. Если вы хотите использовать процент, например 100%, чтобы изображение соответствовало всему экрану, установите высоту контейнера параллакса на 100%. Примечание: Вы также должны подать заявку как в <html> и <body>:

Пример with percent

body, html { height: 100%;}.parallax { /* Используемое изображение */ background-image: url(«img_parallax.jpg»); /* Полный рост */ height: 100%; /* Создайте эффект параллакса прокрутки */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}

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

Пример

/* Выключите параллакс прокрутки для всех планшетов и телефонов. Увеличение уменьшение пикселей при необходимости */@media only screen and (max-device-width: 1366px) { .parallax { background-attachment: scroll; }}

15 лучших параллакс-плагинов для WordPress

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

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

Однако его применение может негативно сказывается на удобстве прокрутки страниц. Этот эффект особенно плохо смотрится на устройствах с высокой плотностью пикселей (например, на продукции Apple с экранами Retina).

Сегодня мы решили поделиться с вами подборкой из 15 лучших параллакс-плагинов для WordPress. Они помогут вам создать привлекательные эффекты параллакса. Здесь представлены как платные, так и бесплатные плагины с функциями, которые позволят вам добиться нужных результатов без особых трат.

ML Scrolling Parallax – простой в использовании плагин для реализации эффекта параллакс-скроллинга.

Parallaxer PRO представляет собой универсальный плагин для создания эффектов параллакса на вашем WordPress-сайте. В нем есть генератор шорткодов, визуальный редактор, а также множество других опций. Он без труда устанавливается в любом шаблоне, и его можно применить к контенту любого размера.

Позволяет создать слайдер с эффектом параллакса. Этот плагин представляет собой многофункциональную консоль для настройки слайдера.

Плагин позволяет добавлять полноэкранный эффект параллакса на ваш WordPress-сайт. Текстовое поле поддерживает HTML и шорткоды.

Все используемые слои должны быть одного размера и сохранены в формате PNG, так как важно сохранить прозрачность. После этого на странице редактирования записи в вашем WordPress нужно нажать кнопку для вставки медиафайлов

После чего добавить слои, нажав Create Parallaxitem.

WP Parallax Content Slider – плагин, который автоматически отображает слайдер контента, состоящий из ваших последних записей. Переходы между слайдами реализованы с помощью CSS3 и jQuery.

Parallax Gravity – WordPress-плагин, который позволяет создавать неограниченное количество посадочных страниц. С помощью Parallax Gravity можно создавать несколько разделов на одной странице, и каждому из них установить уникальный фон, а также добавлять любой тип контента (включая шорткоды из других плагинов), и многое другое. Доступна платная версия плагина с расширенным функционалом.

One Page Builder — это плагин для создания одностраничных сайтов. С его помощью можно создавать неограниченное количество посадочных страниц с множеством функций.

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

Плагин позволяет добавлять на сайт галерею с эффектом параллакса. Здесь используются современные технологии, за счет которых управление плагином происходит интуитивно. В Gocha представлено более 87 миллионов конфигураций узоров.

Easy WP Parallax Slider – простой в использовании параллакс-слайдер на CSS3 и jQuery. Теперь у вас есть возможность создавать неограниченное количество параллакс-слайдеров с нужными вам настройками для каждого слайда. В плагине реализована поддержка шорткодов, так что вы сможете отображать созданные слайдеры в любом месте на сайте.

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

Данная публикация представляет собой перевод статьи «15 Best WordPress Parallax Plugins» , подготовленной дружной командой проекта Интернет-технологии.ру

Rellax

The JavaScript utility Rellax is a handy, and quite simple plugin created by the design agency Dixon and Moe. It’s lightweight and has no need for jQuery, and we can call it in from either local file or by using a CDN.

Looking into the code we find that it’s using a very similar approach to our “show-on-scroll” code. It sets up a variable using “requestAnimationFrame”, and then in each iteration uses CSS to each object by a calculated offset.

It’s worth taking a look through how this was built if you’d like to see how a nice simple JavaScript utility can be written and shared.

Let’s use it to bring our page some parallax movement.

Как создать параллакс-прокрутку в CSS

Вас вдохновили вывести свой веб-сайт на новый уровень с помощью параллакс-прокрутки?

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

Есть несколько способов добавить параллакс-прокрутку на свой сайт с помощью CSS. Самый простой подход заключается в использовании элемента контейнера для установки определенной высоты фонового изображения.

Метод 1. Создайте элемент-контейнер и установите высоту изображения.

Вы будете использовать это свойство для создания эффекта прокрутки параллакса: background-attachment: fixed.

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

W3schools разделяет базовый фрагмент кода CSS для создания эффекта параллакса:

Установка максимальной высоты

В качестве альтернативы, вместо того, чтобы устанавливать определенную высоту в пикселях, вы также можете установить высоту на 100% (что тогда соответствует высоте изображения).

В вашем HTML-коде используется следующий элемент контейнера:

Вы можете протестировать код и поиграть с CSS-прокруткой параллакса на Codepen.

Повышение отзывчивости мобильных устройств

Как только вы начнете экспериментировать с этим кодом, вы быстро поймете, что background-attachment: fixed часто вызывает проблемы с мобильными версиями вашего веб-сайта.

Это легко исправить, добавив дополнительный код из W3schools:

Метод 2: создайте оболочку страницы и статический раздел

Alligator.io предоставляет альтернативный способ создания эффекта прокрутки параллакса.

Обертка содержит перспективные и прокрутки свойства для всей страницы, в то время как статическая секция является фоном для демонстрации параллакса.

Parallax добавляет к фоновому изображению псевдоэлемент :: after, а также элемент преобразования, необходимый для эффекта параллакса.

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

Код CSS, необходимый для достижения этого эффекта, немного длиннее.

Вот что вам нужно включить и почему:

При масштабировании изображений добавляется горизонтальная полоса прокрутки, и вам придется отключить overflow-x, чтобы избавиться от нее.

Следующие 2 пикселя относятся к смоделированному расстоянию между преобразованными объектами и точкой обзора.

Положение установки : относительное; создает абсолютное позиционирование между дочерними и родительскими элементами.

Вы должны установить конкретную высоту для контейнера, но значение не имеет значения.

Здесь вы устанавливаете положение и отображаете детали для псевдоэлемента.

Затем вы должны переместить псевдоэлемент подальше от области просмотра, а затем снова масштабировать его, чтобы заполнить область просмотра.

Размер фона заставляет изображение заполнять весь элемент.

Z-index делает так, что одноуровневые элементы не перекрываются.

Наконец, вы устанавливаете фоновые изображения.

Подключаем библиотеки и создаём базу для вывода

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

Содержание index.html

<!— слои parallax с разной шириной —>
<div class=»parallax-layer» style=»width:600px; height:300px;»>
<img src=»images/2.png» alt=»» />
</div>
<div class=»parallax-layer» style=»width:500px; height:280px;»>
<img src=»images/3.png» alt=»» style=»position:absolute; top:5px; left:-10;»/>
</div>
<div class=»parallax-layer» style=»width:400px; height:250px;»>
<img src=»images/4.png» alt=»» style=»position:absolute; top:12px; left:16;»/>
</div>

</div>
</div>

Как видите, мы подключили библиотеку jQuery с репозитория Гугла, затем сам скрипт (скачать его можете тут или в конце статьи будет ссылка на архив с исходником). Далее мы подключаем обработчик, который фиксирует перемещение по обозначенным слоям.

К сведению, если вам нужна торцевая разделочная доска, то оформить свой заказ вы сможете на интернет-ресурсе etwood.ru. Уверен, вы останетесь довольны соотношением цена-качество!

Изображения (слои), поидеи должны быть разной ширины, чтобы перемещение было с разной скоростью, но можно сделать и с одинаковой шириной и изменять уже параметр у каждого изображения в отдельности.

Содержание Style.css

.parallax-viewport { /* Стили основного бокса */
width: 100%;
height: 20em;
background-image: url(«images/1.jpg»);
}
.parallax-viewport {
/* Тут не указана ширина, так как все слои в моём примере
имеют одинаковую width и height*/
position: relative;
overflow: hidden;
}
.parallax-layer {
/* Обязательное позиционирование для каждой картинки */
position: absolute;
}
.site_wrap {
max-width:48rem;
min-width:292px;
width:100%;
margin: 0px auto;
}

У нас слои разного размера и поэтому по ширине не будет чётких границ, чтобы сделать стиль отображения «из окна» (как в примере выше), надо обернуть дивы с картинками вот в такой класс:

.parallax-viewport
{position: relative; overflow: hidden; width:npx; height:npx;}

Мы указываем фиксированную ширину, высоту «окна» и обрезаем все части (overflow: hidden), которые выступают за грани нашего окна. Для наглядности я ещё оформил моё окно в рамку, простым бордером и отступом .