parallax mousemove

Question

Я хочу сделать эффект параллакса как тут:

(function() {
  // Add event listener
  document.addEventListener("mousemove", parallax);
  const elem = document.querySelector("#parallax");
  // Magic happens here
  function parallax(e) {
    let _w = window.innerWidth / 2;
    let _h = window.innerHeight / 2;
    let _mouseX = e.clientX;
    let _mouseY = e.clientY;
    let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
    let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
    let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
    let x = `${_depth3}, ${_depth2}, ${_depth1}`;
    elem.style.backgroundPosition = x;
  }

})();

body {
  margin: 0;
  background-color: #1d1e22;
}

#parallax {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-3.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-2.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;
}

h1 {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: "Arial";
  text-transform: uppercase;
  opacity: .2;
  font-size: 70px;
}

<div id="parallax">
  <h1>Parallax</h1>
</div>

Но я не понимаю как написать изменение процентов правильно

const block = document.querySelector('.block');
const reqAnimFrame = (function() {
  return requestAnimationFrame ||
    mozRequestAnimationFrame ||
    webkitRequestAnimationFrame ||
    oRequestAnimationFrame ||
    msRequestAnimationFrame ||
    function(callback) {
      setTimeout(callback, 1000 / 60);
    }
})();
let myReq,
  widthBlock = block.scrollWidth,
  heightBlock = block.scrollHeight,
  widthWindow = window.innerWidth,
  heightWindow = window.innerHeight,
  perPageX = widthWindow / widthBlock,
  perPageY = heightWindow / heightBlock;


window.addEventListener('resize', () => {
  widthWindow = window.innerWidth;
  heightWindow = window.innerHeight;
  perPageX = widthWindow / widthBlock;
  perPageY = heightWindow / heightBlock;
});

window.addEventListener('mousemove', animate);
window.addEventListener('mouseout', () => {
  cancelAnimationFrame(myReq);
});

function animate(e) {
  myReq = reqAnimFrame(loop);

  function loop() {
    const x = e.x;
    const y = e.y;
    const factor = 1;
    const percentX = (x / widthWindow) * factor;
    const percentY = (y / heightWindow) * factor;
    let resultX = -perPageX * percentX * 50;
    let resultY = -perPageY * percentY * 50;
    if (x > widthWindow / 2) { // если в правой части по X
      resultX = perPageX * percentX * 50;
    }
    if (y > heightWindow / 2) { // если в нижней части по Y
      resultY = perPageY * percentY * 50;
    }
    block.style.transform = `translate(${resultX}%,
		${resultY}%)`;
  }
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
}

.block__parent {
  position: relative;
  height: 100vh;
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  width: 100px;
  height: 100px;
  background-color: black;
  border-radius: 50%;
}

<div class="block__parent">
  <div class="block"></div>
</div>

Answer 1

Раз

const block_1 = document.querySelector('.block-1')
const block_2 = document.querySelector('.block-2')
onmousemove = (e) => {
  const x = innerWidth / 2 - e.x
  const y = innerHeight / 2 - e.y
  block_1.style.transform = `translate(${x / 3}px, ${y / 3}px)`
  block_2.style.transform = `translate(${-x / 2}px, ${-y / 2}px)`
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
}

.block__parent {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
}

.block-1 {
  background-color: lightgreen;
}

.block-2 {
  background-color: lightblue;
}

<div class="block__parent">
  <div class="block block-1"></div>
  <div class="block block-2"></div>
</div>

Два

const block_1 = document.querySelector('.block-1')
const block_2 = document.querySelector('.block-2')

let y = 0,x = 0,endX = 0,endY = 0

onmousemove = (e) => {
  endX = innerWidth / 2 - e.x
  endY = innerHeight / 2 - e.y
}

function parallax() {
  x += (endX - x) / 20
  y += (endY - y) / 20

  block_1.style.transform = `translate(${x / 3}px, ${y / 3}px)`
  block_2.style.transform = `translate(${-x / 2}px, ${-y / 2}px)`

  requestAnimationFrame(parallax)
}

requestAnimationFrame(parallax)

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  overflow: hidden;
}

.block__parent {
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
}

.block-1 {
  background-color: lightgreen;
}

.block-2 {
  background-color: lightblue;
}

<div class="block__parent">
  <div class="block block-1"></div>
  <div class="block block-2"></div>
</div>

БЛОГ НА HUSL

parallax mousemove

Ответы (1 шт):