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

Post on:2014年5月27日

sponsors

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

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

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

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

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

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

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

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

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

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