使用jquery滚动时的图像运动

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

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

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

---

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

---

使用jQuery:

编辑

$（函数（）{
var animationData=[
{
id:“第1节”，
startX:100，
startY:50，
deltaX：+20，
德尔泰-5，
},
{
id:“第2节”，
startX:75，
startY:50，
deltaX:-20，
德尔泰-5，
},
{
id:“第3节”，
startX:50，
startY:75，
deltaX:-40，
德尔泰：+15，
},
{
id:“第4节”，
startX:75，
startY:75，
税收：+30，
德尔泰：+35，
},
];
//scrollTop（）将在0到scrollMax的范围内
var scrollMax=$（“#content”）.height（）-$（“#scrollarea”）.height（）；
var scrollArea$=$（“#scrollArea”）；//缓存引用以提高效率
//定位对象并显示
$（“#section1”）.offset（{top:animationData[0].startY，left:animationData[0].startX}）；
$（“#section2”）.offset（{top:animationData[1].startY，left:animationData[1].startX}）；
$（“#section 3”）.offset（{top:animationData[2].startY，left:animationData[2].startX}）；
$（“#section4”）.offset（{top:animationData[3].startY，left:animationData[3].startX}）；
$（“.section”）.show（）；
scrollArea$.scroll（函数（）{
var scrollPerc=scrollArea$.scrollTop（）/scrollMax；//0.0到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}）；
});
});
部分{
位置：绝对位置；
宽度：25px；
高度：25px；
显示：无；
}
#第一节{
背景色：红色；
}
#第2节{
背景颜色：蓝色；
}
#第三节{
背景颜色：黄色；
}
#第四节{
背景颜色：绿色；
}
#内容{
宽度：100%；
高度：300px；
}
#滚动区{
溢出y：滚动；
宽度：200px；
高度：200px；
}

我在过去（以及最近）看过所有这些例子。这些是关于转换的基本视差示例。我还没能把这些例子应用到不同方向的图像运动上，这很酷。那将是一种不同的安排方式，但并不完全是我所想的。让我在上面添加一个更新和一些图片来解释。这不是视差。视差滚动有不同的层，以不同的速度设置动画。您要问的是如何根据页面的滚动位置移动对象。最好编辑你的问题以得到更合适的答案。谢谢你的建议。哇。。。我只能说这些了。这肯定是我在StackExchange上收到的对一个问题最逐字逐句的精确回答之一。你完全复制了你想要的结果。好极了！我现在必须接受它，并使它在我的应用程序中工作，但这是一个多么美妙的观点。非常感谢你！我希望我能给你更多的信任！作为OP，每个人都应该投票选出这个答案@K Scandrett是否可以使用页面普通滚动而不是专用滚动，使此示例在页面中流动？而且，这些块似乎是静止的。这样做的目的是让它们在页面上垂直移动，直到它们最终脱离框架。基本上，最终的计划是开始向下滚动站点，组装的对象从底部出现，在到达页面顶部时完全爆炸，然后在继续向下滚动站点时从屏幕上消失。是的，只需将
“scrollarea”
更改为
窗口
-好的，让我再试一次。是的，对不起，我错过了那个链接。就在你发帖的时候，我删除了我以前的评论。是的，这看起来真的很好。我真的很感谢你帮我解决这个问题。我看到的最后一个问题是，这些部分似乎没有停止蔓延。似乎没有上限，也就是说，他们并没有停在指定的增量上，他们只是在屏幕外不断扩展，这会将站点宽度向上扩展，直到您用完垂直滚动空间。