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]
たったこれだけで出来てしまうなんて、素晴らしいです。
パラメータを変えたら、リアルな動きも出来そうですね。
いずれはこういうパララックスを生かしたサイトも作れるようになりたいな。
