Дело было вечером и делать было нечего. Потягивая кофеёк и смакуя сигареткой, я решил слегка проагрейдить интерфейс моего framework какими ни будь parallax эффектами. Написав плагин к системе я подумал: «А почему бы не сделать упрощенную версию для врезки в web-страницы».
Собственно, код адаптированный за пол часа для того, чтобы его можно было использовать на любых web сайтах использует всего 2 функции библиотеки RevolveR и немного ручной верстки:
RR.sel() — движек селекторов;
RR.styleApply() — движек CSS свойств селекторов;
Для начала сверстаем контейнер изображений, который будет выступать в роли Parallax сцены:
Далее добавим немного CSS, чтобы сделать сцену отзывчивой:
Далее напишем JavaScript код, который будет осуществлять захват события mousemove, а также смещать оси X и Y выбранных движком селекторов изображений:
Демо
Для своего framework я сделал более сложный parallax, который требует запуска библиотеки, как части ядра и инициализирует instance через прокси объект. Кроме того осуществлен таймер в 30 секунд с анимацией возвращения и все необходимые observers для перерасчета высот элементов. Здесь же используется урезанная версия самой библиотеки RevolveR frontend без каких либо инициализаций.
Вы наверное задумались и о том, как сделать такой parallax мобильным и привязать ориентацию смартфона или планшета в пространстве к положению элементов сцены. На самом деле это не проблема: нам просто понадобиться инициализировать браузерные функции библиотеки RevolveR и использовать RR.isM функцию для определения, что браузер пользователя мобильный, а в вопросах самой реализации смещений осей X и Y поможет слушатель события device orientation.
Код будет выглядеть так:
Для того, чтобы изменить резкость смещений вы можете отрегулировать подобранный мной экспериментально коэффициент деления(по умолчанию 5). Чем коэффициент меньше — тем более заметны сдвиги изображений.
Также этот код легко адаптировать для фоновых изображений заменив position top и left на background-position или использовав любые другие CSS свойства.
Если вам понравятся мои сниппеты я смогу создавать подобные игрушки время от времени и писать статьи.
Собственно, код адаптированный за пол часа для того, чтобы его можно было использовать на любых web сайтах использует всего 2 функции библиотеки RevolveR и немного ручной верстки:
RR.sel() — движек селекторов;
RR.styleApply() — движек CSS свойств селекторов;
Для начала сверстаем контейнер изображений, который будет выступать в роли Parallax сцены:
<figure class="parallaxing">
<div class="parallaxed">
<div class="scene">
<img class="parallax-1" src="./graphics/source-2.png" alt="RevolveR bullets" />
<img class="parallax-2" src="./graphics/source-3.png" alt="RevolveR logo" />
</div>
</div>
<figcaption>RevolveR Parallax</figcaption>
</figure>
Далее добавим немного CSS, чтобы сделать сцену отзывчивой:
html, body {
background: #dcdcdc;
padding: 0;
margin: 0;
}
.parallaxing {
display: table;
text-align: center;
position: relative;
margin: auto auto;
padding: 10vh;
width: 70%;
}
.parallaxing .parallaxed {
background: transparent url('./graphics/source-1.png') 50% 50% no-repeat;
border: .1vw dashed #777;
background-size: cover;
vertical-align: middle;
display: table-cell;
position: relative;
text-align: center;
overflow: hidden;
width: 1008px;
height: 405px;
}
.parallaxing .parallaxed .scene {
vertical-align: middle;
display: table-cell;
text-align: center;
height: 100%;
width: 100%;
}
.parallaxing .parallaxed .scene img {
display: inline-block;
position: absolute;
margin: 0 10vw;
top: 0;
}
figcaption {
text-shadow: 0.2vw 0.2vw 0.3vw #000;
font: normal 5vw Verdana;
border: .1vw dashed #777;
display: table-row;
text-align: center;
padding: 1vw 0;
color: #777;
}
Далее напишем JavaScript код, который будет осуществлять захват события mousemove, а также смещать оси X и Y выбранных движком селекторов изображений:
// Parallaxing Effects core
RR.parallaxBlocks = () => {
const scene = RR.sel('.scene');
scene[0].addEventListener('mousemove', (e) => {
RR.styleApply('.parallax-1', ['left:'+ ( (e.screenX / 90) + (e.screenX / 92) ) *-1 +'px', 'top:'+ (e.screenY / 90) * -1 +'px'], () => {
RR.styleApply('.parallax-2', ['left:'+ ( (e.screenX / 90) + (e.screenX / 92) ) +'px', 'top:'+ (e.screenY / 90) +'px']);
});
});
};
RR.parallaxBlocks();
Демо
Для своего framework я сделал более сложный parallax, который требует запуска библиотеки, как части ядра и инициализирует instance через прокси объект. Кроме того осуществлен таймер в 30 секунд с анимацией возвращения и все необходимые observers для перерасчета высот элементов. Здесь же используется урезанная версия самой библиотеки RevolveR frontend без каких либо инициализаций.
Дополнение: реализация мобильного parallax
Вы наверное задумались и о том, как сделать такой parallax мобильным и привязать ориентацию смартфона или планшета в пространстве к положению элементов сцены. На самом деле это не проблема: нам просто понадобиться инициализировать браузерные функции библиотеки RevolveR и использовать RR.isM функцию для определения, что браузер пользователя мобильный, а в вопросах самой реализации смещений осей X и Y поможет слушатель события device orientation.
Код будет выглядеть так:
RR.parallaxBlocks = () => {
if( RR.isM ) {
window.addEventListener('deviceorientation', (e) => {
RR.styleApply('.parallax-1', ['left:'+ ( (e.gamma / 5) * -1 ) +'px', 'top:'+ (e.beta / 5) * -1 +'px'], () => {
RR.styleApply('.parallax-2', ['left:'+ ( (e.gamma / 5) + (e.gamma / 4) ) +'px', 'top:'+ (e.beta / 5) +'px']);
});
}, false);
}
};
let launch = RR.browser;
RR.parallaxBlocks();
Для того, чтобы изменить резкость смещений вы можете отрегулировать подобранный мной экспериментально коэффициент деления(по умолчанию 5). Чем коэффициент меньше — тем более заметны сдвиги изображений.
Также этот код легко адаптировать для фоновых изображений заменив position top и left на background-position или использовав любые другие CSS свойства.
Если вам понравятся мои сниппеты я смогу создавать подобные игрушки время от времени и писать статьи.