使用jquery滚动时的图像运动

Question

有人可以建议教程/资源或使用jquery给出基本图像运动的示例。我已经通过谷歌搜索了几个星期并尝试了各种教程和模板，我很难找到一个我认为简单动画的例子。

我试图找出如何创建效果，以便向下滚动页面，一个小图像从A点移动到B点。运动可以是对角线，水平，垂直等。我只想指定开始位置和结束位置以及滚动开始和结束以到达目的地。

我的想法是，我将采用一些不同的线框CAD图像并进行爆炸装配/重组滚动效果。向下滚动时，CAD组件会爆炸。向后滚动时，过程会反转，组件会重新组装。

Answer 1

有一个没有jQuery的基本w3school教程：

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

使用jQuery：

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

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

修改

http://stephen.band/jparallax/

Answer 2

$(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>