比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。

もくじ

ファーストビュー

• １．スライドを立体的に切り替え
• ２．クリックで滑らかにページ遷移させる
• ３．背景にスライド、フルスクリーンで固定させる
• ４．横に移動するフルスクリーンスライド
• ５．キューブ系のスライドを表示
• ６．下方向へドラッグするとページを再読み込みする
• ７．要素を上下にフワフワ動かす
• ８．外部要素をクリックで表示
• ９．タイピングエフェクト

動作

• １０．サーチボックスを画面全体にオーバーレイさせる
• １１．デイトピッカー
• １２．ドラッグ＆ドロップ 画像をアップロードするタイプ３つ

通知

• １３．ツールチップを様々な方向へ出す
• １４．ノーティフィケーション
• １５．マウス動作によって様々な形で通知する
• １６．タイトルを動的に変更する
• １７．スライディングメニュー

スクロール

• １８．チルト
• １９．アニメーション スクロール
• ２１．フルスクリーンでスクロール

プレースホルダ、他

• ２２．ラベル アニメーション
• ２３．カード入力プレビュー
• ２４．おしゃれなセレクトボックス

ファーストビュー

１．スライドを立体的に切り替え

横方向へ立体的にスライドさせます。キーボードの⇔を使っても動かせるようになっています。3D系のスライドは他にもありますが、こちらは比較的今っぽい動きなのでメモしておきます。

• [デモ] Kontext
• [ダウンロード] hakimel/kontext · GitHub

２．クリックで滑らかにページ遷移させる

要素をクリックすることで滑らかにページ遷移するタイプ。UIの応答時間を改善し、ページ間をスムーズに移行させたいときに。

• [ダウンロード] Home – jQuery.smoothState.js
• [参考] How To Add Page Transitions with CSS and smoothState.js | CSS-Tricks

３．背景にスライド、フルスクリーンで固定させる

トップページのファーストビューにてフルスクリーンで背景を固定させ、スライド画像をフェードさせる方法。スクロールさせるとコンテンツだけ上に上がっているように見えます。

• jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法 | BlackFlag

４．横に移動するフルスクリーンスライド

以前ご紹介しましたがトレンドの見せ方が出来そうだということで。横幅いっぱいに要素を広げスライドさせるプラグイン。

• [デモ・ダウンロード] Skippr
• [使い方] シンプルかつフラットなスライドショー『Skippr』の使い方 | Web制作会社スタイル

５．キューブ系のスライドを表示

キューブだけではなく、フェードやナビ付きのスライド。左右上下回転させることが可能。軽量で自由度が高いスライダーです。

• [デモ・ダウンロード] slidr js
• [使い方] slidr.js·軽量、自由の高いスライダーライブラリ MOONGIFT

６．下方向へドラッグするとページを再読み込みする

スマホのように下方向へドラッグするとページを更新させます。PCだとスクロール後にページ上部まで戻るとリロードされます。

• [デモ・ダウンロード] Hook js

７．要素を上下にフワフワ動かす

矢印やロゴなどを上下にアニメーションさせるエフェクト。もう一つはjqFloat jsを使い画像などを動かします。

• jQuery-ループするアニメーションで要素を動かす
• 画像（要素）をフワフワ浮かして動かすjQuery「jqFloat.js」 | web CoCoon

８．外部要素をクリックで表示

クリックにより外部化した要素を読み込み表示する方法。

• jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】 | BlackFlag

９．タイピングエフェクト

タイピングしているかのような動作をテキストに付与します。ファーストビューでスライドの画像上に被せたり、スクロールでページが見えた時に要素の上に表示しても面白そうですね。

• [デモ] t js
• [ダウンロード] mntn-dev/t.js · GitHub

動作

１０．サーチボックスを画面全体にオーバーレイさせる

こちらはプラグインではありませんが新鮮なエフェクトだったのでご紹介。検索ボックスをクリックすると、フルスクリーンに拡大しオーバーレイさせるコード。ボックス内では関連性の高いコンテンツや検索結果を表示します。

• Simple Morphing Search | Codrops

１１．デイトピッカー

カレンダーに時間も表示してくれる非依存型のデイトピッカー。

• [デモ] Rome
• [ダウンロード] bevacqua/rome · GitHub

１２．ドラッグ＆ドロップ 画像をアップロードするタイプ３つ

最もメジャーな軽量なアップローダー。複数ファイル対応、画像プレビュー、削除に加えてインターフェイスも綺麗。

• [デモ] Dropzone js
• [ダウンロード] enyo/dropzone · GitHub

こちらはプログレスバー付きのアップローダー。複数のファイル追加、キャンセル、削除が可能。

• [デモ] blueimp
• [ダウンロード] blueimp/jQuery-File-Upload · GitHub

シンプルで綺麗なのが特徴。

• [デモ] Tutorialzine Demo
• [ダウンロード] Tutorialzine

通知

１３．ツールチップを様々な方向へ出す

クリックすることで左右上下にツールチップを表示します。

• Toolbar js

１４．ノーティフィケーション

ウェブページ内にて遅延させながら通知を出します。

• [デモ] Notification Styles Inspiration | Growl-Style Scale
• [ダウンロード] Notification Styles Inspiration

１５．マウス動作によって様々な形で通知する

モーダルウィンドウやツールチップをホバーやクリックによって、様々な方向や形で表示します。

• [デモ] jBox
• [ダウンロード] GitHub

１６．タイトルを動的に変更する

GmailやFacebookのようにブラウザタブの未読数などを動的に変更させるプラグイン。

• [デモ・ダウンロード] TitleNotifier js
• Webページのタイトルに未読数等を動的に追加表示する軽量スクリプト・TitleNotifier.js – かちびと.net

１７．スライディングメニュー

メニューをクリックすると横にスライドしながら、サブカテゴリを表示します。

• jQuery Sliding Menu Plugin

スクロール

１８．チルト

スクロールで画像を上下に傾けます。

• [デモ] jQuery Tilted Page Scroll
• [ダウンロード] tiltedpage_scroll · GitHub

１９．アニメーション スクロール

ページ内リンクをクリックすると、目的の箇所を一度通りすぎてバウンスさせたり、一風変わった動きを実現させます。

• AnimateScroll – jQuery Plugin for Animating Scroll
• 手軽にスムーズなスクロールを実現·AnimateScroll MOONGIFT

２１．フルスクリーンでスクロール

レスポンシブ対応でフルスクリーンのままブロックごとにスクロール出来るプラグイン。プロダクトページなどに使いたいですね。

• block-scroll

プレースホルダ、他

２２．ラベル アニメーション

入力欄にテキストを打ち込むと、様々なアニメーションでラベルを表示します。

• [デモ] flyLabel js
• [ダウンロード] athaeryn/flyLabel.js · GitHub

２３．カード入力プレビュー

こういった見せ方が珍しかったので。クレジットカード番号を入力するとカード会社を判別してプレビューが変更されます。

• Card

２４．おしゃれなセレクトボックス

ゴーストボタン風のセレクトボックス。要素内をクリックするとメニューを表示させます。

• Select or Die

スポンサード リンク