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.

This is not parallax. Parallax scrolling is having different layers animated at different speeds. What you are asking is how do I move objects based on the page's scroll position. Best to edit your question to get more appropriate answers — K Scandrett
– K Scandrett, Commented Feb 16, 2017 at 0:48

K Scandrett · Accepted Answer · 2017-02-17 01:50:37Z

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>

answered Feb 17, 2017 at 1:50

K Scandrett

16.6k4 gold badges43 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Atomiklan Over a year ago

WOW... That's about all I can say. That has got to be one of the most word for word precise answers to a question I have ever received in all my time on StackExchange. You literally replicated the exact desired result. BRAVO! I will have to take this now and make it work in my application, but what a fantastic stating point. Thank you very much! I wish I could give you more credit! As the OP, everyone should up vote this answer!

Atomiklan Over a year ago

@K Scandrett is it possible to have this example flow with the page using the pages normal scroll instead of a dedicated scroll? Also, it seems the blocks are static in position. The idea is for them to move vertically on the page as you scroll until they are ultimately out of frame. Basically the ultimate plan is to start scrolling down the site, the assembled object appears from bottom, fully explodes by the time it reaches top of page, and then disappears off screen as you continue scrolling down the site.

K Scandrett Over a year ago

Yes, just change "scrollarea" to window - jsbin.com/ceqalerici/edit?html,css,js,output

Atomiklan Over a year ago

Ok excellent, let me try that again. Yes sorry, I missed that link. I deleted my previous comment just as you re posted.

Atomiklan Over a year ago

Yes this is looking really good. I really appreciate you helping me with this solution. The only last problem I see is, the sections dont appear to stop spreading. There doesn't appear to be an upper limit, ie, they are not stopping at their assigned deltas, they just keep expanding off screen which is expanding the sites width up until you run out of vertical scroll space.

|

Giorgio B · Accepted Answer · 2017-02-15 21:03:44Z

1

There is a basic w3school tutorial without jQuery:

https://www.w3schools.com/howto/howto_css_parallax.asp

Using jQuery:

http://www.youon.it/parallax-scroll-in-css-jquery-tutorial-delleffetto-in-parallasse/

http://devfloat.net/jquery-parallax-scrolling-tutorials/

Edit

http://stephen.band/jparallax/

edited Feb 15, 2017 at 21:03

answered Feb 15, 2017 at 20:45

Giorgio B

1936 bronze badges

2 Comments

Atomiklan Over a year ago

I have looked at all those examples in the past (and again recently). Those are basic parallax examples regarding transitions. I have not been able to apply those examples to image motion in different directions.

Atomiklan Over a year ago

Well that is very very cool. That would be a different way of setting things up, but not exactly what I had in mind. Let me add an update above with some images to explain.

Collectives™ on Stack Overflow

Image motion when scrolling using jquery

2 Answers 2

12 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related