Как отследить определенную позицию бэкграунда относительно экрана?

Question

Идея в том что при двигании курсором двигаеться бэкграунд картинка вверх и вниз(эдакий паралакс в вертик.). Но когда не хватает картинки, внизу видно край изображения и дефолтный бэкграунд колор. Как отследить момент когда это происходит чтоб запретить картинке двигаться дальше вверх? контекст:

    <style type="text/css">
    html{
        background-color: black;
        background-image: url('./some_bg.jpg');
        background-size: cover;
        /*background-position: center;*/
        background-repeat: no-repeat;
    }
    <script type="text/javascript">
        let bg = document.getElementById("html_for_bg");
        document.addEventListener("mousemove", function (e) { MoveBackground(e); });
        function MoveBackground(e){
        let offsetY = -(e.clientY / window.innerHeight * 200);
        if(true){bg.setAttribute("style", "background-position: " + 0 + "px " + offsetY + "px;");}
        }
    </script>

Answer 1

Не нужно ни за чем следить. Нужно задавать позицию фона в процентах. При 100% нижняя граница изображения будет на уровне нижней границы блока. И этот момент должен наступить тогда, когда e.clientY / window.innerHeight станет равным 1.

Вот и весь фокус:

window.addEventListener("mousemove", function(e) {
  let move = 100 * e.clientY / window.innerHeight;
  document.body.style.backgroundPositionY = move.toFixed(4) + "%";
});

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: black;
  background-image: url('https://i.imgur.com/JkJ2tap.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
}

БЛОГ НА HUSL

Как отследить определенную позицию бэкграунда относительно экрана?

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