Moving a DIV horizontally when scrolling vertically

Question

I'm trying to create a script that moves a div from right to left when the user scrolls vertically. It should do this effect to any div with the class of "sidepara". It should only move the div if it is visible (the user has scrolled to it). I'm having trouble getting the math right.... What is the correct formula to move the div horizontally proportionate to the vertical scroll position?

$(function() {
  $(window).scroll(function() {
    console.clear();
    $(".sidepara").each(function() {

      var sY = $(this).position().top - $(window).scrollTop(),
        dY = $(this).position().top,
        wH = window.innerHeight;

      var scrollPercent = (sY / (dY - wH));
      var position = (scrollPercent * ($(document).width()));
      position = window.innerWidth - position;
      $(this).css("margin-left", position);


      console.log("scoll Y: " + sY);
      console.log("div Y: " + dY);
      console.log("div X: " + position);
      console.log("window height: " + wH);
      console.log("scrollPercent: " + scrollPercent);
      console.log("----");

      //print number for debugging
      $(this).html(position);
    });

  })
});

html,
body {
  margin: 0;
  padding: 0;
}

.stretch {
  height: 2000px;
}

.sidepara {
  color: red;
}

.parallaxContainer {
  overflow: hidden;
  width: 100%;
  height: 256px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
<div class="parallaxContainer">
  <!-- <img src="helloworld.png" class="sidepara" /> -->
  <div class="sidepara"></div>
</div>
<div class="stretch"></div>

<div class="parallaxContainer">
  <!-- <img src="helloworld.png" class="sidepara" /> -->
  <div class="sidepara"></div>
</div>
<div class="stretch"></div>

<div class="parallaxContainer">
  <!-- <img src="helloworld.png" class="sidepara" /> -->
  <div class="sidepara"></div>
</div>
<div class="stretch"></div>

I would advise you to apply your math when the div is inside the viewport. To tell if a div is in the viewport or not you may consult to [this answer](https://stackoverflow.com/a/7557433/4543207) — Redu, Aug 15 '17 at 19:43

score 0 · Answer 1 · answered Aug 15 '17 at 20:44

Finally figured out the math! Here is the code for anyone who may like to do something similar.

        $(function () {
            $(window).scroll(function () {
                $(".sidepara").each(function () {
                        var sY = $(this).position().top - $(window).scrollTop(),
                            dY = window.innerHeight,
                            wH = 0;

                        var scrollPercent = (sY / (dY - wH));
                        var position = (scrollPercent * ($(document).width() ));
                        $(this).css("margin-left", position);
                });

            })
        });

        html,
        body {
            margin: 0;
            padding: 0;
        }

        .stretch {
            height: 2000px;
        }

        .sidepara {
font-size: 5em;
            color: red;
            white-space: nowrap;
        }

        .parallaxContainer {
            overflow: hidden;
            width: 100%;
            height: 256px;
            background: black;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stretch"></div>
    <div class="parallaxContainer">
        
        <div class="sidepara">hello world!</div>
    </div>
    <div class="stretch"></div>

    <div class="parallaxContainer">
        
        <div class="sidepara">hellow world!</div>
    </div>
    <div class="stretch"></div>

    <div class="parallaxContainer">
        
        <div class="sidepara">hello world!</div>
    </div>
    <div class="stretch"></div>

Moving a DIV horizontally when scrolling vertically

1 Answers1