Параллакс из фоновых изображений
Несложный пример создания собственного параллакс эффекта из нескольких дивов с фоновым изображением, которые наложены слоями друг на друга.HTML
<section class="landing">
<div class="shapes shapes4"></div>
<div class="shapes shapes3"></div>
<div class="shapes shapes2"></div>
<div class="shapes shapes1"></div>
<div class="layer"></div>
</section>CSS
body {
width: 100%;
margin: 0;
}
.landing {
overflow: hidden;
position: relative;
background: #174799 url('https://www.imageupload.co.uk/images/2018/01/24/bg.png');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
}
.landing .shapes.shapes1 {
background: url('https://www.imageupload.co.uk/images/2018/01/24/shape1.png') no-repeat center;
}
.landing .shapes.shapes2 {
background: url('https://www.imageupload.co.uk/images/2018/01/24/shape.png') no-repeat center;
}
.landing .shapes.shapes3 {
background: url('https://www.imageupload.co.uk/images/2018/01/24/shape2.png') no-repeat center;
}
.landing .shapes.shapes4 {
background: url('https://www.imageupload.co.uk/images/2018/01/24/shape3.png') no-repeat center;
}
.landing .shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.landing .shapes2 {
padding-top: 300px;
}
.landing .shapes4 {
z-index: 0;
}
.landing .layer {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);JS
$('.landing').mousemove(function(e){
var width = $(this).width() / 2;
var height = $(this).height() / 2;
var amountMovedX1 = ((width - e.pageX) * -1 / 16);
var amountMovedY1 = ((height - e.pageY) * -1 / 16);
var amountMovedX2 = ((width - e.pageX) / 40);
var amountMovedY2 = ((height - e.pageY) / 30);
var amountMovedX3 = ((width - e.pageX) / 20);
var amountMovedY3 = ((height - e.pageY) / 20);
var amountMovedX4 = ((width - e.pageX) * -1 / 10);
var amountMovedY4 = ((height - e.pageY) * -1 / 20);
$('.shapes1').css('marginLeft', amountMovedX1);
$('.shapes1').css('marginTop', amountMovedY1);
$('.shapes2').css('marginLeft', amountMovedX2);
$('.shapes2').css('marginTop', amountMovedY2);
$('.shapes3').css('marginLeft', amountMovedX3);
$('.shapes3').css('marginTop', amountMovedY3);
$('.shapes4').css('marginLeft', amountMovedX4);
$('.shapes4').css('marginTop', amountMovedY4);
});
