シンプルな視差スクロール効果のために、jQuery 用の小さなプラグインを作成しました。< ie8 を除くすべてのブラウザで動作します。
$.fn.extend({
//plugin name - parallax ( simpel )
parallax: function(options) {
var defaults = {
speed: 3
};
var options = $.extend(defaults, options);
var o = options;
var obj = $(this);
var s = $(window).scrollTop() / o.speed;
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
obj.css({"top" : -s + "px"});
}else{
obj.css("-webkit-transform", "translateY(-" + s + "px)");
obj.css("-moz-transform", "translateY(-" + s + "px)");
obj.css("-ms-transform", "translateY(-" + s + "px)");
}
}
});
メインのjQueryファイルでは、次のようなコードを使用しています:
$(window).scroll(function(){
$('.headMenu').parallax({speed: 6});
$('.header_img').parallax();
});
何らかの理由で 's' は常に 0 のままです。理由が見つかりません。$(window).scroll が IE8 で機能していないと思います。