Как в js, вместо тега body вставить определенный класс html?

Пытаюсь сделать эффект движения элемента за курсором. У меня есть объект, нужно чтобы, когда курсор находиться в определенной зоне (bg), при движении мыши, объект слега двигался за ним. Я нашел некий код, вот только не могу понять как в нём подставить определенный класс, так как тег body меня не интересует. Могли бы вы помочь?

У меня .page-header - это фон, если в нём будет мышь то если ей двигать должен двигаться слега элемен ниже

.ship_head img - это элемент должен слега двигаться от движения мыши.

ссылка на сам код примера: https://jsfiddle.net/f320bmuu/26/?utm_source=website&utm_medium=embed&utm_campaign=f320bmuu

html

css

1 ответов

(function(){
  var body = document.body,
      startX = -100,
      startY = -100,
      w = document.documentElement.offsetWidth,
      h = document.documentElement.offsetHeight;

	body.addEventListener('mousemove', function(evt){
    var posX = Math.round(evt.clientX / w * startX)
    var posY = Math.round(evt.clientY / h * startY)
    body.style.backgroundPosition = posX + 'px ' + posY + 'px'
  })
})()

Body можно заменить другим любым тегом, просто на body листенер вешается для захвата движения мышью. Где-то в javascript курсе было про обращение с помощью javascript к dom, это так делается:

<div id="superelement">....</div>

var vmestobody = document.getElementById('superelement')

vmestobody - это переменная, вместо body, где обращаемся к div с id superelement, то есть можно заменить в коде везде переменную body на vmestobody ну и стили задать див скорее всего придется (я про width).

Примерно так:

<div class="page-header">
  <div id="superelement" class="ship_head"></div>
</div>

html, body {
  height: 100%;
}

.ship_head {
  background: url(https://images.wallpaperscraft.ru/image/les_derevia_tuman_124708_1920x1080.jpg) -100px -100px no-repeat;
  transition: background-position .5s ease-out;
  width: 500px;
  height: 300px;
}

(function(){
  var vmestobody = document.getElementById('superelement'),
      startX = -100,
      startY = -100,
      w = document.documentElement.offsetWidth,
      h = document.documentElement.offsetHeight;

  vmestobody.addEventListener('mousemove', function(evt){
    var posX = Math.round(evt.clientX / w * startX)
    var posY = Math.round(evt.clientY / h * startY)
    vmestobody.style.backgroundPosition = posX + 'px ' + posY + 'px'
  })
})()

Пример (на Run нужно нажать):

https://jsfiddle.net/3mjdnbwv/