ブレイントラスト EC LEARNING(ec・ラーニング)

ビギナーにも使えるヒントが満載。 ネットショップコンサルのプロがノウハウをお届け。

開店構築費5万円、最短5	営業日で完成! ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング ECサイトの更新、コンサルティング
楽天でパララックスを使用することはできますか?

楽天でパララックスを使用することはできますか?

楽天GOLDを使えば自由度のあるページが制作できるようになるので、jsを利用して実装する事は可能です。パララックスについては様々なプラグインがあるので、それを使うといいでしょう。
GOLD使わない場合は、jsを利用した時のような複雑なアニメーションのパララックスは難しいですが、cssのみのパララックスなら実装可能です。
cssで背景画像を固定するだけの簡易なパララックスなら「各セクションの背景画像をbackground-position: fixed;で固定配置」する事と「テキストやイメージ画像などのコンテンツをposition: absolute;で絶対配置」する事で、ページをスクロールしても背景画像は動かず、そのまま次のセクションに隠れるといった表現が実現できるようになります。

●html—————-
<header></header>
<div class=”one”></div>
<div class=”two”></div>
<div class=”three”></div>

●css—————-
header {
background: url(“../images/bg_header.png”) no-repeat;
background-attachment: fixed;
height: 500px;
}
.one {
background: #333333;
height: 500px;
}
.two {
background: url(“../images/bg_two.png”) no-repeat;
background-attachment: fixed;
height: 500px;
} .three {
background: #666666;
height: 500px;
}

この方法ならば楽天の各ページでパララックスを導入できるので、是非試してみて下さい。