• Popular
  • Category
  • Tags
  • アーカイブ

News

follow us in feedly
Toggle

モジュール・ライブラリ

[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

[JS]背景画像を区分けして浮かび上がるパララックス効果を付けてくれる「Segment Effect」

1枚の背景画像をいくつかのセグメントに区割りして、それぞれがちょっと浮き上がるような面白いオープンソースのJavascriptモジュールを見つけたのでご紹介します。

このモジュールは、Filippo Bello’s Portfolio から着想を得て作られたとのこと。


ダウンロード、ソースコードはこちら。

表示例

ベーシック(オプション指定なし)な表示例

See the Pen Background Segment Effect Sample #1 by digistate (@digistate) on CodePen.


「Segment Effect」を利用するには、ダウンロードファイルに含まれる以下のスクリプトをロードしておきます。

  • imagesloaded.pkgd.min.js : 画像ファイルの読み込み完了を検知するために必要なスクリプト。
  • anime.min.js : アニメーション用のスクリプト。
  • main.js : 「Segment Effect」のメインスクリプト。

CSSは「component.css」が必要です。

エフェクトを施す背景画像の指定はフルスクリーンサイズにした要素に任意のセレクタやID(以下では class=”segmenter”)を付けてbackground-imageで画像を指定するだけです。

オプションなしで、ページロード後にエフェクトを実行する一番シンプルな記述は以下のようにします。

「Segment Effect」で用意されているオプションとデフォルト値は以下のとおり。

オプションを指定して実行する場合は以下のようにします。

四隅にセグメントを分けてパララックス効果を施した例

See the Pen Background Segment Effect Sample #2 by digistate (@digistate) on CodePen.

左上から右下にセグメントをずらしながら重ね合わせた例

See the Pen Background Segment Effect Sample #3 by digistate (@digistate) on CodePen.

ぶれ(ブラー)効果を施した例

See the Pen Background Segment Effect Sample #5 by digistate (@digistate) on CodePen.

9つのセグメントに分けて浮き上がる深度を深くした例

See the Pen Background Segment Effect Sample #6 by digistate (@digistate) on CodePen.

URL
TBURL

COMMENT ON FACEBOOK

Return Top