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]

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

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



こういうブログもありました。

人気のあるブログ:

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


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