TAG : パララックス

jquery パララックス効果を使ってみる

2013年12月29日

パララックスをあまりよく理解できていないので練習を兼ねたメモ。 サンプル スクロールにより背景画像を動かす スクロールしてある位置まで来ると、背景画像を動かす単純な例。 「div1 」の位置までスクロールすると、「クラス picture」の背景画像を下方向に動かす例。 背景画像は 960×800 のサイズの画像を用意 画像を表示する領域「クラス picture」の高さは500px background-position は「0 0」(left top) サンプル 1 HTML CSS スクロール量が「div1 」の位置に達したら、「クラス pi…

続きを読む

jquery 背景画像を使ったパララックス

2013年12月28日

背景画像を使ったパララックスに関するメモ。 参考にさせていただいたサイト: 「HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本」 CSSを使ったパララックス jQuery を使用しないで CSS で単純なパララックス(背景画像を固定して表示)を実現する方法。 各 div 要素(#first, #second, #third, #end)に背景画像(960 x 800)を用意 「background-attachment プロパティ」の値を「fixed」に指定(背景画像はブラウザの表示領域に対して固定される)…

続きを読む

jquery パララックス(基本的なことに関するメモ)

2013年12月28日

jQuery と CSS を使っての基本的なパララックス効果に関するメモ。 参考にさせていただいたサイト:「パララックスサイトを作ろう」ドットインストール スクロールで要素を動かす 以下は、スクロールすると3つの要素がそれぞれ動くようにするサンプル。 サンプル用の構造 jQuery を読み込む jQuery を記述する pallarax.js を読み込む CSS(pallarax.css) を読み込む 3つの div 要素に class で、幅、高さ、位置(top)、ポジション(fixed)を指定 3つの div 要素に id で位置(left)、色を指…

続きを読む