[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。

便利でちょっとずるいスクリプトのまとめ

ScrollTrigger

ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーションを楽しみ、上にスクロールすると何も起きず、再度下にスクロールしても何も起きない、よく見かけると思います。それならそもそもいらないんじゃないかとも思えます。

ScrollTriggerはrequestAnimationFrameを使用し、要素のスクロール ポジションに基づいてアニメーションを適用させるので、下にスクロールした時だけでなく、上にスクロールした時、繰り返し下にスクロールした時にも同様に適用することができます。

デモのキャプチャ

ScrollTrigger
ScrollTrigger -GitHub

デモでは下にスクロールした時はもちろんのこと、上にスクロールした時にもアニメーションを適用できます。

デモのアニメーション

デモページ: 下にスクロール

デモのアニメーション

デモページ: 上にスクロール

ScrollTriggerの使い方

Step 1: 外部スクリプトとJavaScript

当スクリプトを外部ファイルとして記述し、スクリプトを初期化します。

初期化時のパラメータは「bindTo」と「scrollIn」の2つで、オプションです。
「bindTo」はトリガーとなるHTML要素で、デフォルトは「document.body」で、特定の要素を指定することもできます。「scrollIn」はスクロールのポジションを得る要素で、デフォルトは「window」で、スクロールするdiv要素などを指定することもできます。

Step 2: HTML

アニメーションを適用する要素にdata-scrollを与えます。

Step 3: アニメーションの設定

アニメーションはCSSで設定します。
その要素がビューポート上にない時は「.invisible」で、ある時は「.visible」が与えられるので、それぞれのclassにアニメーションを定義します。

上記の指定はフェードのアニメーションで、要素がビューポートにスクロールして入ると次第にはっきりとします。

Scrollbear

ページを表示する時に、そのページ内にある画像が読み込まれるにつれ、スクロールバーのサイズが変わり、ポジションが変化してしまいます。少しだったらそんなに気にならないかもしれませんが、画像がたくさんあるページだとイラっとする人もいるかもしれません。

Scrollbearはコンテナの高さをトレースし、画像が読み込まれてコンテナの高さが変化する時でもスクロールのポジションを維持することができるスクリプトです。

サイトのキャプチャ

Scrollbear
Scrollbear -GitHub

Scrollbearの使い方

Step 1: JavaScript

当スクリプトを外部ファイルとして記述し、適用するコンテンツを指定します。

Step 2: HTML

Scrollbearで範囲を指定できるようにidやclassを与えます。

Barba.js

Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか?

Barba.jsはPJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトです。

サイトのキャプチャ

Barba.js
Barba.js -GitHub

Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。
ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。

サイトのキャプチャ

Poignée de main virile

ページの移動時に、スクリプトが利用されています。

Barba.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

JSファイルは、CDNでも配布されています。

Step 2: HTML

通常のHTMLに、スクリプトを適用する要素にclassを与えます。

#barba-wrapperはラッパー用、.barba-containerはコンテナ用です。

Step 3: JavaScript

スクリプトを初期化して、実行します。

エフェクトやイベントの実装方法は、下記ページをご覧ください。

Isometric Grids

Isometric GridsはまるでPSDのモックアップを見ているかのような3Dのアイソメトリックのグリッドにパネルやカードを配置し、インタラクションも備えたスクリプトです。

サイトのキャプチャ

Isometric Grids -GitHub

デモではその大胆なデザインを活かした2通りのレイアウトが用意されています。一つ目は3Dのグリッドがそのままスクロールするデモです。

デモのキャプチャ

Demo: Scrollable Grid

二つ目は固定タイプで、ヒーローヘッダのように使われています。

デモのキャプチャ

Demo: Static Grid

Isometric Gridsの使い方

Step 1: 外部ファイル

外部ファイルを</body>の上に記述します。

Step 2: HTML

各パネルをリスト要素で配置します。

Step 3: JavaScript

ラッパーを指定し、スクリプトを実行します。

Multiple.js

Multiple.jsは複数のパネルを半透明の美しいグラデーションにまたがり、背景を続き画像として配置することができます。非常にシンプルなHTMLで実装でき、デモを実際に見るとその美しさに感動すら覚えます。

サイトのキャプチャ

Multiple.js
Multiple.js -GitHub

スクリプトにはオプションが用意されており、さまざまなレイアウトに簡単に変更することができます。

デモのキャプチャ

デモページ: ギャップ調整

背景画像やグラデーションを変更することも可能です。
右上のパネルは左のパネル群の続き画像になっています。

デモのキャプチャ

デモページ: 背景画像とグラデーションの変更

Multiple.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

各パネルをdiv要素で実装し、classを加えます。

Step 3: JavaScript

適用する要素を指定し、スクリプトを実行します。

パネル毎に不透明度をしたい時は、個別に記述します。

anime.js

anime.jsはその名の通りWebページにアニメを適用する軽量のスクリプトで、CSSアニメーションを使ってDOM要素やSVG、JavaScriptのオブジェクトで機能します。

サイトのキャプチャ

anima.js
anima.js -GitHub

デモではanime.jsを使った楽しいアニメーションを楽しめます。

サイトのキャプチャ

デモページ

anime.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

Step 2: HTML

HTMLは非常にシンプルで、アニメーションさせたい要素を指定できるようclassやidを付与しておきます。

Step 3: アニメーションの設定

JavaScriptでアニメーションを適用する要素を指定し、アニメーションを定義します。

top of page

©2017 coliss