使用 jquery 滚动时的图像运动

Question

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

我正在尝试弄清楚如何创建一种效果，以便在您向下滚动页面时，一个小图像从点 A 移动到点 B。运动可以是对角线、水平、垂直等。我只想指定开始位置和结束位置并滚动开始和结束以到达该目的地。

我的想法是，我将拍摄一些不同的线框 CAD 图像并进行分解 assembly/reassembly 滚动效果。当您向下滚动时，CAD 组件会爆炸。当您向上滚动时，过程反转并且组件重新组装。

Answer 1

w3school基本教程没有jQuery:

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>

使用 jquery 滚动时的图像运动

Image motion when scrolling using jquery

jquery

html

parallax