使用jQuery滚动时的图像运动 [英] Image motion when scrolling using jquery

问题描述

有人可以建议一个教程/资源，也可以举一个使用jquery进行基本图像运动的示例.我已经通过Google搜索了几个星期，并尝试了各种教程和模板，但是我很难找到我认为简单的动画示例.

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.

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

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.

这个想法是，我将拍摄一些不同的线框CAD图像，并产生爆炸的装配/重新装配滚动效果.向下滚动时，CAD装配爆炸.当您向上滚动时，过程将反向进行，装配将重新组装.

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.

推荐答案

$(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滚动时的图像运动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！