Движение элементов background
На многих креативных сайтах можно наблюдать, как элементы фонового изображения передвигаются по странице, явно слушаясь движений мыши. Тут я попробовал реализовать данный тип верстки. Конечно без JS тут не обошлось.
<div class="page flex flex-center flex-column">
<div class="bg-layer">
<div class="image img-1" data-pos="1"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cloud-download-64.png" alt="" ></div>
<div class="image img-2" data-pos="2"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-cloud-upload-64.png" alt="" ></div>
</div>
<div class="container">
<h1>Движение мышью влияет на фоновые элементы...</h1>
</div>
</div>
.page{
position: relative;
background-color: #000;
color: #fff;
}
.image{
position: absolute;
width: 100px;
height: 100px;
filter: invert(100%) blur(8px);
opacity: 0.3;
// transform-origin: center;
}
img{
width: 100%;
height: 100%;
}
.bg-layer{
position: absolute;
inset: 0;
}
.img-1{
left: 20%;
top: 20%;
}
.img-2{
right: 20%;
bottom: 20%;
width: 150px;
height: 150px;
}
h1{
text-align: center;
}
let img1 = document.querySelector('.img-1');
let img2 = document.querySelector('.img-2');
window.onmousemove = function(e){
img1.style.translate = `
${(e.clientX - img1.offsetLeft) / 70}px ${(e.clientY - img1.offsetTop) / 70}px
`;
img1.style.filter = `invert(100%) blur(${
((e.clientX - img1.offsetLeft) / 70 + (e.clientY - img1.offsetTop) / 70) / 2 > 0 ? ((e.clientX - img1.offsetLeft) / 70 + (e.clientY - img1.offsetTop) / 70) / 2 : -((e.clientX - img1.offsetLeft) / 70 + (e.clientY - img1.offsetTop) / 70) / 2
}px)`;
img2.style.translate = `
${(e.clientX - img2.offsetLeft) / 10}px ${(e.clientY - img2.offsetTop) / 10}px
`;
img2.style.filter = `invert(100%) blur(${((e.clientX - img2.offsetLeft) / 70 + (e.clientY - img2.offsetTop) / 70) / 2 > 0 ? ((e.clientX - img2.offsetLeft) / 70 + (e.clientY - img2.offsetTop) / 70) / 2 : -((e.clientX - img2.offsetLeft) / 70 + (e.clientY - img2.offsetTop) / 70) / 2}px)`;
}