モヤシっ子改造計画

スポンサーサイト

--.--.--.--.--:--
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

共有テンプレを更新しました。

2014.05.17.Sat.10:12
共有テンプレート waterdrop_Ver_0を更新しました。

スクロールしたときの背景のチラつきが気になっていたので、その部分を修正。
背景を固定にしようかとも考えましたが、それでは面白くないと思い
パララックスというものを取り入れました。

パララックスというのは、スクロール量の数値を使って何らかの処理を行うもので
コレを利用してスクロールと背景画像の動きに差をつけました。

javascript コード(jQueryの読み込みが必要)

$(function(){
 $(window).scroll(function(){
  var y = $(this).scrollTop();
  var value = "0 " + Math.round(-(y / 4.5)) + "px";
   $("body").css("background-position", value);
 });
});

スクロール量÷4.5 の量、背景画像を動かしています。

パララックスについては以下のサイトで非常に分かりやすく解説されています。
http://webdrawer.net/javascript/parallax.html

ちなみに、このテンプレートの派生をあと2種類考えていて
それらはVer_0 の更新ではなく Ver_1、Ver_2として出します。

コメント


管理者のみに表示

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。