Parallaxをやってみましたよ、jQueryを使って

@CyberMameCANです。
パララックスというものを以前から試したかったので、本日やってみました。
マウスに追従する動き、楽しいですね。

勉強に読ませていただいたサイト
マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」

デモはこちら。

HTML

インクルードファイルです。

[xhtml]


[/xhtml]

本体です。

[xhtml]

[/xhtml]

JavaScriptもhtmlファイルの最後の方にでも記述します。

[javascript]
$(‘#header’).parallax( {
‘elements’: [
{
‘selector’: ‘#green_egi’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 400, ‘multiplier’: 0.1 } },
‘y’: { ‘background-position-y’: { ‘initial’: 50, ‘multiplier’: 0.5 } } } },
{
‘selector’: ‘#ika01’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: -500, ‘multiplier’: 0.7, ‘invert’: true } },
‘y’: { ‘background-position-y’: { ‘initial’: -100, ‘multiplier’: 0.7, ‘invert’: true } } } },
{
‘selector’: ‘#ika02’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 200, ‘multiplier’: 0.4, ‘invert’: true } },
‘y’: { ‘background-position-y’: { ‘initial’: 200, ‘multiplier’: 0.4, ‘invert’: true } } } },
{
‘selector’: ‘#ika03’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 600, ‘multiplier’: 0.07 } },
‘y’: { ‘background-position-y’: { ‘initial’: -50, ‘multiplier’: 0.07, ‘invert’: true } } } },
{
‘selector’: ‘#ika04’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 50, ‘multiplier’: 0.1 } },
‘y’: { ‘background-position-y’: { ‘initial’: 30, ‘multiplier’: 0.1 } } } },
{
‘selector’: ‘#bg03’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 0, ‘multiplier’: 0.05 } },
‘y’: { ‘background-position-y’: { ‘initial’: 0, ‘multiplier’: 0.05 } } } },
{
‘selector’: ‘#bg01’,
‘properties’: {
‘x’: { ‘background-position-x’: { ‘initial’: 0, ‘multiplier’: 0.2 } },
‘y’: { ‘background-position-y’: { ‘initial’: 0, ‘multiplier’: 0.2 } } } }
]
} );
[/javascript]

CSS

[css]

html,
body {
color: #fff;
height: 100%;
}
#header {
width: 940px;
background: #fff;
}
#bg01 {
background: url(../images/bg03.png);
height: 300px;
}
#bg02 {
background: url(../images/bg02.png);
height: 300px;
}
#bg03 {
background: url(../images/bg001.png);
height: 300px;
}
#green_egi {
background: url(../images/greenegi.png) no-repeat;
height: 300px;
}
#ika01 {
background: url(../images/ika1.png) no-repeat;
height: 300px;
}
#ika02 {
background: url(../images/ika2.png) no-repeat;
height: 300px;
}
#ika03 {
background: url(../images/ika3.png) no-repeat;
height: 300px;
}
#ika04 {
background: url(../images/ika4.png) no-repeat;
height: 300px;
}
[/css]

たったこれだけで出来てしまうなんて、素晴らしいです。
パラメータを変えたら、リアルな動きも出来そうですね。

いずれはこういうパララックスを生かしたサイトも作れるようになりたいな。


出水市でWeb屋やってます。Webサイト作ったり、サーバ設定したりしている釣りの好きなMacユーザーです。 ドラクエ5のキラーパンサーにはゲレゲレと名付けました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください