スクロールやクリックした際に、おおっ!と思わせるクリエイティブな7つのエフェクトがかっこいいっ!

ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ!と思わせるクリエイティブなエフェクトを7つ紹介します。

サイトのキャプチャ

Inspiration for article intro effects

7つのエフェクトをアニメーションgifにしてみました。
ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです!

各エフェクトのソースは上記ページからまとめてダウンロードできます。

デモのアニメーション

Push

画像とタイトルを上に押し上げ、新しいタイトルとコンテンツをスライドインして表示します。

デモのアニメーション

Fade Out

ブラウザの下部で画像をフェードアウトし、コンテンツを表示します。

デモのアニメーション

Sliced

画像を真ん中から水平にスライスし、上に少しだけ画像を残したままコンテンツを表示します。

デモのアニメーション

Side

画像のメインとなる箇所をクロップし、タイトルをその横にスライドさせます。

デモのアニメーション

Fixed Side

一つ上の「Side」をアレンジし、画像は左側に残したまま、右側にコンテンツを表示します。

デモのアニメーション

Grid

画像を上に動かし、グリッド上のサムネイルに配置します。関連した記事を表示する面白いアイデアですね。

デモのアニメーション

JAM3

Jam3のコンテンツページに利用されてるようなエフェクトで、画像は上のバーになり、コンテンツをスライドインで表示します。

top of page

©2017 coliss