Home > Design > サクッとできるparallax(パララックス)エフェクト4つ
Home > Html & Css > サクッとできるparallax(パララックス)エフェクト4つ
Home > Javascript > サクッとできるparallax(パララックス)エフェクト4つ

サクッとできるparallax(パララックス)エフェクト4つ

公開日:

最終更新日:

parallax_catch

簡単に出来るパララックス効果をまとめてみました。
CSSや短いjQueryで出来るものです。
パララックスって、やりたいな~とは思うけど、コンバージョン考えると使えるサイト少ないですよね。

よくあるやつ

CSSのcoverで作る、よくあるやつです。

Demo

デモはこちら

Html

css

backgroundに画像をcoverで全面に配置してfixedで動くようにしてます。
エリアは100vhでブラウザの高さになるようにしてます。
vh超便利
ちなみに
メディアスクリーンでスマホ用画像です。
background-attachment: fixed;が効かないのでposition:fixed;でやってます。

よくあるやつの動画バージョン

上でやったの動画バージョンです。
背景にしけないので、z-indexで背景ぽく使ってます。
縦長動画もあるなら、media=”screen and (max-width: 768px)”とかで分けてやればいいと思います。

Demo

デモはこちら

html

動画を自動再生・ミュート・ループ再生で設定してます。
デモなので、mp4だけですが、ブラウザによって入れてあげてください。

css

min-width: 100vw;min-height: 100vh;でブラウザサイズをカバーするように設定して、
videoタグにposition:fixed;を付けてブラウザの真ん中に固定してます。
z-indexで後ろにくるようにしてますので、あとの#bと#dの後ろにきます。

背景だけ横に流れるエフェクト

要素は縦スクロール、背景は横スクロールです。

Demo

デモはこちら

html

css

#para1に横スクロールさしたい画像を設定して、coverで全画面、repeat-xで画像を繰り返し、fixedでブラウザに固定させてます。
メディアスクリーンでスマホ用画像です。

jQuery

スクロール値を取得して、background-position-xにスクロール値をマイナス値で設定して動かしてます。

背景がスクロールより、ゆっくり動くエフェクト

そのまんまなのですが、微妙に分かりづらいので、とりあえず下のデモ見て頂くと分かると思います。
画像は縦長の画像を使うのがオススメです。

Demo

デモはこちら

html

動画のやつ以外htmlは、ほぼ一緒です。

css

背景を全画面でfixedにしときます。

jQuery

さっきの横スクロールと同じ感じです。
background-position-yにスクロール値を3で割った数を入れて動かしてます。
animationで100ミリ秒かけてるので、動きがいい感じになります。
いい感じじゃないと思ったら変えてください。

Githubにもあげときました。Github

Comment

よろしければコメントをどうぞ