calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ

jQuery_plugin_trends

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

ファーストビュー

動作

通知

スクロール

プレースホルダ、他

ファーストビュー

1.スライドを立体的に切り替え

sterically-switching-slide_jquery

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

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

smooth-transitions-m

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

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

slidebg-fixed_jquery

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

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

flatfull-slide_jquery

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

5.キューブ系のスライドを表示

cube-slide-m

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

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

drag-downward_jquery

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

7.要素を上下にフワフワ動かす

fluffy-elements_jquery

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

8.外部要素をクリックで表示

external-elements_jquery

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

9.タイピングエフェクト

typing-effects_jquery

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

動作

overlay-search-box

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

11.デイトピッカー

datepicker_jquery

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

12.ドラッグ&ドロップ 画像をアップロードするタイプ3つ

drag-dropupload_jquery

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

blueimp_jquery

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

Tutorialzine_jquery

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

通知

13.ツールチップを様々な方向へ出す

tooltip-various_jquery

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

14.ノーティフィケーション

notification_jquery

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

15.マウス動作によって様々な形で通知する

mouse-movements_jquery

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

16.タイトルを動的に変更する

change-title_jquery

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

17.スライディングメニュー

sliding-menu_jquery

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

スクロール

18.チルト

tilt-scroll_jquery

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

19.アニメーション スクロール

animation-scroll_jquery

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

21.フルスクリーンでスクロール

scrollfull-screen_jquery

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

プレースホルダ、他

22.ラベル アニメーション

label_jquery

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

23.カード入力プレビュー

card-preview_jquery

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

24.おしゃれなセレクトボックス

fashionable-selectbox_jquery

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

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする