アメブロでパララックス効果！
Parallax Background with Javascript and CSS （別窓 ）
上記エントリ（以下サンプル）を参考にアメブロでパララックス効果を実現する方法を紹介してみます。
パララックス効果につきましてはこのブログの前回のエントリ をご覧下さい。
1.まずはアメブロのHTMLの構造を確認
全てのデザインで共通かは分かりませんので、今回はスタンダードデザインを前提に説明します。
スタンダードデザインでのHTMLの構造は大きく以下のような感じになっています。
body#mainIndex
├div#frame
│ └div#subFrame
｜ ├div#overHeader
｜ └div#wrap
└div#footerArea
今回重要なのはbody#mainIndexとdiv#frameです。
これがサンプルで言うところのbody#groundとdiv#cloudsにあたります。
2.画像を用意する
cssの編集に入る前にその前にまずは背景と前景の画像を用意しちゃいましょう。
サンプルでは背景のチェック模様（bg-green.gif）と透過処理が施された雲（clouds.png）が使われています。
また、透過PNGに対応していないIE6のためにgif版の雲も用意されています。
とりあえず試してみたい、という方はまずはこの画像を拝借して試してみるといいのではないでしょうか。
画像の用意が出来たらアメブロの画像フォルダにアップロードし、それぞれのURLをメモっておいて下さい。
3.CSSの編集
デザインの変更→スキンCSSの編集からCSSの編集に入ります。
まずはbodyの後あたりに以下のコードを追加します。
#mainIndex{
background-image: url(背景画像のURL);
background-repeat: repeat;
background-attachment: fixed;
}
次にその下にある#frameの内容を以下のものに変更し、ついでにIE6の対策もしておきます。
#frame{
background-image: url(前景画像のURL);
background-repeat: repeat;
background-attachment: fixed;
}
* html #frame {
background-image: url(前景画像gif版のURL);
}
もともとdiv#frameでは横幅やマージンの指定をしていたので、このままだとデザインが崩れてしまいます。
なのでその下にあるdiv#subFrameでこれを補ってやります。
#frameの下あたりに以下のコードを追加しましょう。
widthの値はご自身のブログに合わせて変更してください。
#subFrame{
width: 800px;
margin:0 auto;
}
これでcssの編集は完了です。
4.JavaScriptの編集
最後にお待ちかねのJSです。
こちらはフリープラグインを利用します。
サイドバーの設定からフリープラグインの編集画面へ行き、以下のコードを追加します。
<script type="text/javascript">
<!--
function calcParallax(tileheight, speedratio, scrollposition) {
// by Brett Taylor http://inner.geek.nz/
// originally published at http://inner.geek.nz/javascript/parallax/
// usable under terms of CC-BY 3.0 licence
// http://creativecommons.org/licenses/by/3.0/
return (tileheight - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
window.onload = function() {
window.onscroll = function() {
var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;
var ground = document.getElementById('mainIndex');
var groundparallax = calcParallax(53, 8, posY);
ground.style.backgroundPosition = "0 " + groundparallax + "px";
var clouds = document.getElementById('frame');
var cloudsparallax = calcParallax(400, .5, posY);
clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
}
document.getElementById('javascriptcode').onscroll = function() {
var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
var j = calcParallax(53, 16, posX);
console.log('scroll js: '+ j);
document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
}
}
-->
</script>
これまでフリープラグインを利用していなかった方はサイドバーの配置からフリープラグインを有効にするのを忘れないようにしてください。
5.完成
ﾔﾀｰﾊﾟﾗﾗｯｸｽ効果ﾃﾞｷﾀﾖｰ。
アメブロでは自分でHTMLの構造を編集することは出来ないので自由度は下がりますが、前回エントリのサンプルサイトを参考に画像を変更して遊んでみると面白いかもしれませんね！