スクロールで背景画像を別々に動かすパララックス効果
通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。 今回は、パララックス効果のある2種類のサンプルとコードを紹介します。 スクロールすると雲の背景画像が横に動く 元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。 サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。 このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。 スクロールすると背景が右に2pxづつ移動します。 htmlコード htmlのコードは記事の外側
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
