「ボディーガードのベン」のウェブサイトで有名になった効果を再現しようとしています。
具体的には、ページを垂直方向にスクロールするときに、画面上でスプライト画像を水平方向に移動させようとしています。つまり、2 段階の効果です。
- 横スクロール
- スプライトをアニメーション化します (これは彼らが使用しているものですhttp://benthebodyguard.com/images/thiefsprite.png )
ページを「そのまま」ローカルに複製することができましたが、カスタマイズしようとすると、一部の機能が失われたり、アニメーションが非常に奇妙になったりします。
ここで検索すると、これが見つかりました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()});
});
});
しかし、スクロールの開始と停止を制御する方法と、さらに重要なことに、背景の位置を動的に変更するスプライトをアニメーション化する方法がわかりません。