Параллакс эффект для сайта может в значительной мере преобразовать его в нечто эффектно-современный стиль. Это придает внешнему виду ресурсу больший интерес и приятное визуальное составляющее.
Не хотелось бы вешать ярлыки или кого-то ущемлять, но чаще всего зарубежные ресурсы делаются в очень креативном образе, даже если они недружелюбные в плане юзабилити. И может даже создаваться впечатление, что такие сайты являются непросто ресурсом для посещения, а неким творческим искусством.
Немного отклонился от темы. Так вот. Я уже делал обзор на подобный плагин, который также позволяет сделать эффект параллакса. Но всегда есть различные плюсы и минусы. Возможно, этот плагин вам будет интересней или попроще.
basicScroll – эффект параллакса
Этот плагин позволяет изменять значение свойств CSS в зависимости от прокрутки страницы. Эффект будет работать на мобильных устройствах и на пк. Для того чтобы эффект работал, нам нужно в параметрах скрипта задать некий идентификатор, а затем с помощью var прописать его в желаемом свойстве. Смотрите на примере ниже.
HTML
<section id="post">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h1 class="mt-5 mb-5 title-cent">Пример параллакс</h1>
</div>
</div>
<div class="row">
<div class="col-lg-10 mx-auto">
<div class="scrollA mb-5"></div>
</div>
<div class="col-lg-10 mx-auto">
<div class="scrollB mt-5"></div>
</div>
<div class="col-lg-4 mx-auto">
<div class="scrollD mt-5"></div>
</div>
<div class="col-lg-4 mx-auto">
<div class="scrollE mt-5"></div>
</div>
<div class="col-lg-4 mx-auto">
<div class="scrollC mt-5"></div>
</div>
</div>
</div>
</section>
Подключение
<script src="basicScroll.min.js"></script>
<script>
const instanceA = basicScroll.create({
elem: document.querySelector('.scrollA'),
from: 'top-bottom',
to: 'top-top',
props: {
'--position': {
from: '0px',
to: '200px'
},
}
})
const instanceB = basicScroll.create({
elem: document.querySelector('.scrollB'),
from: 'top-bottom',
to: 'top-top',
props: {
'--positionc': {
from: '0px',
to: '300px'
},
'--opa': {
from: '.99',
to: '.01'
},
}
})
const rotateBox = basicScroll.create({
elem: document.querySelector('.scrollD'),
from: 'top-middle',
to: 'top-top',
props: {
'--r': {
from: '0',
to: '1turn'
}
}
})
const rotateBoxe = basicScroll.create({
elem: document.querySelector('.scrollE'),
from: 'middle-bottom',
to: 'top-top',
props: {
'--re': {
from: '0',
to: '2turn'
}
}
})
const rotateBoxc = basicScroll.create({
elem: document.querySelector('.scrollC'),
from: 'top-middle',
to: 'top-top',
props: {
'--rc': {
from: '0',
to: '3turn'
}
}
})
instanceB.start()
instanceA.start()
rotateBox.start()
rotateBoxe.start()
rotateBoxc.start()
</script>
CSS
body {
background: #000;
height: 300vh;
}
.scrollA, .scrollB, .scrollE,
.scrollD, .scrollC{
background: #FF0033;
height: 300px;
border-radius: 5px;
width: 100%;
}
.scrollA {
transform: translateY(var(--position));
}
.scrollB {
transform: translateY(var(--positionc));
opacity: var(--opa);
}
.scrollD {
transform: rotate(var(--r));
}
.scrollE {
transform: rotate(var(--re));
}
.scrollC {
transform: rotate(var(--rc));
}