Image motion when scrolling using jquery

Question

Can someone please suggest a tutorial/resource or give an example of basic image motion using jquery. I have been searching for a few weeks now via Google and trying various tutorials and templates and I am having difficulty finding an example of what I thought would be a simple animation.

I am trying to figure out how to create an effect so as you scroll down the page, a small image moves from point A to point B. The motion could be diagonal, horizontal, vertical, etc. I just want to specify a start position and end position and scroll start and end to reach that destination.

The idea is, I am going to take a few different wireframe CAD images and do an exploded assembly/reassembly scrolling effect. As you scroll down the CAD assembly explodes. As you scroll back up the process reverses and the assembly reassembles.

Answer 1

$(function() {
    
    var animationData = [
    {
      id: "section1",
      startX: 100,
      startY: 50,
      deltaX: +20,
      deltaY: -5,
    },
    {
      id: "section2",
      startX: 75,
      startY: 50,
      deltaX: -20,
      deltaY: -5,
    },
    {
      id: "section3",
      startX: 50,
      startY: 75,
      deltaX: -40,
      deltaY: +15,
    },
    {
      id: "section4",
      startX: 75,
      startY: 75,
      deltaX: +30,
      deltaY: +35,
    },
    ];
    
    // scrollTop() will be in the range of 0 to scrollMax
    var scrollMax = $("#content").height() - $("#scrollarea").height();    
    var scrollArea$ = $("#scrollarea"); // cache ref for efficiency
    
    // position objects and show
    $("#section1").offset({ top: animationData[0].startY, left: animationData[0].startX});
    $("#section2").offset({ top: animationData[1].startY, left: animationData[1].startX});
    $("#section3").offset({ top: animationData[2].startY, left: animationData[2].startX});
    $("#section4").offset({ top: animationData[3].startY, left: animationData[3].startX});    
    $(".section").show();
    
    scrollArea$.scroll(function(){
      
      var scrollPerc = scrollArea$.scrollTop() / scrollMax; // 0.0 to 1.0
      
      var sec1Left = animationData[0].startX + (animationData[0].deltaX * scrollPerc);
      var sec1Top = animationData[0].startY + (animationData[0].deltaY * scrollPerc);
      var sec2Left = animationData[1].startX + (animationData[1].deltaX * scrollPerc);
      var sec2Top = animationData[1].startY + (animationData[1].deltaY * scrollPerc);
      var sec3Left = animationData[2].startX + (animationData[2].deltaX * scrollPerc);
      var sec3Top = animationData[2].startY + (animationData[2].deltaY * scrollPerc);
      var sec4Left = animationData[3].startX + (animationData[3].deltaX * scrollPerc);
      var sec4Top = animationData[3].startY + (animationData[3].deltaY * scrollPerc);
      
      $("#section1").offset({ top: sec1Top, left: sec1Left});
      $("#section2").offset({ top: sec2Top, left: sec2Left});
      $("#section3").offset({ top: sec3Top, left: sec3Left});
      $("#section4").offset({ top: sec4Top, left: sec4Left});

    });
});

.section {
  position: absolute;
  width: 25px;
  height: 25px;
  display: none;
}

#section1 {
  background-color: red;
}

#section2 {
  background-color: blue;
}

#section3 {
  background-color: yellow;
}

#section4 {
  background-color: green;
}

#content { 
  width: 100%;
  height: 300px;

}

#scrollarea {
  overflow-y: scroll;
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scrollarea">
  <div id="content">
    <div id="section1" class="section"></div>
    <div id="section2" class="section"></div>
    <div id="section3" class="section"></div>
    <div id="section4" class="section"></div>
  </div>
</div>