当垂直滚动时水平移动和动画精灵

move and animate sprite horizontally when scrolling vertically

本文关键字：动画 精灵 移动 水平 垂直 滚动      更新时间：2023-09-26

我想复制"ben the bodyguard"网站的成名效果。

特别是我试图有一个精灵图像水平移动在屏幕上时，垂直滚动的页面。这是一个两步效果:

  • 水平滚动
  • 动画精灵(这是他们正在使用的http://benthebodyguard.com/images/thiefsprite.png)

我设法在本地复制页面"原样"，但每当我尝试自定义它时，我就会失去一些功能或动画变得超级奇怪。

搜索这里在SO我发现这个http://jsfiddle.net/pGvgc/2/

$(document).ready(function(){
var windowWidth = $(window).width();    
$("#block").css({ "right": windowWidth}); 
$(window).scroll(function(){       
    $("#block").css({ "right":  windowWidth  - $(window).scrollTop()});
});
});

，但我不明白如何控制滚动的开始和停止，更重要的是，如何动态地改变背景位置的精灵动画

我正在尝试做类似于benthebodyguard的事情，并且我试图找到可用的最佳解决方案。到目前为止，我已经尝试了脚本，如scrollpath, skrollr和crspline。但是我最近发现了raphael.js，基于这个[jsfiddle]，我决定用它来制作动画。也许它也可以帮助你的滚动动画。精灵动画，至少对我来说，它会更复杂一点，因为我有一个更复杂的道路，角色必须遵循!

相关文章：