スクロールやクリックした際に、おおっ!と思わせるクリエイティブな7つのエフェクトがかっこいいっ!
Post on:2014年5月27日
ユーザーがページを表示し、スクロールやボタンをクリックした際に、おおっ!と思わせるクリエイティブなエフェクトを7つ紹介します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014052701.png)
Inspiration for article intro effects
7つのエフェクトをアニメーションgifにしてみました。
ページはフルスクリーンサイズの画像が最初に表示され、そこをスクロールボタンクリックでさまざまなエフェクトがおきます。派手すぎず、センスあるかっこいいエフェクトばかりです!
各エフェクトのソースは上記ページからまとめてダウンロードできます。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-01a.gif)
画像とタイトルを上に押し上げ、新しいタイトルとコンテンツをスライドインして表示します。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-02.gif)
ブラウザの下部で画像をフェードアウトし、コンテンツを表示します。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-03.gif)
画像を真ん中から水平にスライスし、上に少しだけ画像を残したままコンテンツを表示します。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-04.gif)
画像のメインとなる箇所をクロップし、タイトルをその横にスライドさせます。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-05.gif)
一つ上の「Side」をアレンジし、画像は左側に残したまま、右側にコンテンツを表示します。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-06.gif)
画像を上に動かし、グリッド上のサムネイルに配置します。関連した記事を表示する面白いアイデアですね。
![デモのアニメーション](/wp-content/uploads-201402/2014052702-07.gif)
Jam3のコンテンツページに利用されてるようなエフェクトで、画像は上のバーになり、コンテンツをスライドインで表示します。
sponsors