calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ

  • 作成：2015/03/2
  • 更新：2016/06/29
  • Web制作 >
jQuery_Plugins_CSS

今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

インタラクティブ

フルスクリーンの見栄えをよくする

ドロワーメニュー

スクロールエフェクト

図柄

インタラクティブ

マウス動作に応じてアニメーションが発生するようなエフェクトを多く見かけるようになりました。動きのない要素にエフェクトを取り入れることで、商品やサービスの価値を伝えやすくすることも出来ます。以下では、比較的最近リリースされたもの中心に面白い効果をご紹介します。

１．クリック時のエフェクト

effect-click

Codropsから、最新の気になるエフェクトを抜粋。クリック時に円形の波紋が広がるようなエフェクト。

２．フォームクリック時のエフェクト

effects-formclick

outline:none;を使って、入力フォーム内のspan要素を移動させたり、ユニークな動きを演出しています。フォームに少し動きを出したい時に。

３．テキストに１１種の動きを出すエフェクト

effects-movement-text_plugin

テキストに動きを出して、より直感的に情報を伝えたい、ファーストインプレッションで興味を持たせたい、そんな時はこちらの文字に動きを出すエフェクト。テキストだけで強烈なインパクトを出すことができます。

４．分離するエフェクト

effects-separated

ネバネバしたような動きと面でユーザーにメニューの役割を伝えやすくしている面白いエフェクト。

フルスクリーンの見栄えをよくする

シングルカラムのレイアウトが増え、ブランドや商品の訴求力を上げるために、高品質な写真やイラスト・動画をファーストビューにて見せるサイトがどんどん増えてきています。こちらではフルスクリーンのままブロックごとに縦方向にスライドさせるものや、オーバーレイ、ローディングなどトレンドを抑えたプラグインを中心にメモ。

５．フルスクリーン 縦スライド３つ

fullscreen-slide_plugin

フルスクリーン型にすると、コンテンツを大きく配置できるので表現の幅が広がります。フルスクリーンの中でもユーザーがスクロール回数を減らせる縦方向への移動、スクロールごとに1ページのコンテンツを表示させる代表的なプラグインを３つご紹介します。

fullscreen-slide-second

１ページに表示されるコンテンツのブロックがブラインドを上げるようにめくれていきます。この手の中で一番見栄えと使い勝手が良さそうです。IE８対応。

fullscreen-slide-third_plugin

セクションごとに背景色を変えて、情報を区別したり、下にスクロールさせやすいように配慮したり。こちらはスライド＋スマホ対応。

６．全画面+オーバーレイ

fullscreen-overlay_plugin

画像のライトボックスのようにクリックでページ全体に透過色をのせて、モーダルウィンドウを表示させるシンプルな方法。

７．フルスクリーン背景＋ローディング

fullscreen-bgloading_plugin

フルスクリーンを使用する場合の注意点として、ファーストビューで表示する写真や動画サイズの肥大化により、読み込み時間が増加してしまうことがあります。こういった時に、ユーザーにローディング中だと知らせたい。フルスクリーンでローディング画像を表示するプラグインの中でオススメのものがあったのでメモしておきます。

８．写真から背景色を抽出

extract-photo_plugin

ターゲットの画像の色を元に背景色を作る面白いプラグイン。自動で画像の色を判別し色を抽出するので配色設定が楽になりそうです。

９．background-size 対策

background-size-measures_plugin

IE8などの旧ブラウザで、background-sizeを表示させる為に使いたいプラグイン。用途に合わせてどうぞ。

ドロワーメニュー

三本の線で表現されたアイコンを押すとサイドから出現するメニュー。ただ、メニューと気づかれない場合もあるので、アイコンを目立たせたり注釈を入れたりユーザーがメニューと認識しやすいような配慮が必要。最近リリースされたWordPressテーマを眺めていると、ドロワーメニューを使っているテーマも異様に増えているなぁと感じたので、いくつか使いやすいものをメモしておきます。

１０．ドロワーメニュー３つ

drawermenu-three_plugin

画面の可変に対応したレスポンシブ ドロワーメニュー。アイコンをクリックすることでメニューを右側か左側からスライドさせ、コンテンツをrgbaでオーバーレイさせています。

drawermenu-three-second_plugin

こちらはアイコンをクリックすることで、メニューをスライドさせコンテンツにブラーをかける方法です。アイコンの線はクリックでrotateを指定し斜めに要素を回転させています。

drawermenu-three-third_plugin

こちらはjQuery非依存ライブラリでPCにも対応。

スクロールエフェクト

ファーストビューやメニューのトレンドを抑えたら、お次はコンテンツということでスクロールによって要素をディスプレイさせる方法、画像の読み込み後に命令を実行させるものなど抑えておきたいもの。他にコンテンツを立体的に見せたり遊び心を取り入れたい時のプラグインなど。

１１．スクロール中に要素を表示

display-during_plugin

ThemeForestを見ていると、これでもかというくらいに見かけます。スクロールの位置によって画面に要素を出現させる方法。wrapperの位置を判別して透明度を１に変化させていきます。

１２．立体的に本をめくるように見せる

show-book_plugin

画像上のスクロールかクリックによって、本をめくるようなエフェクトを付与するプラグイン。

１３．コンテンツを立体的に移動させる

content-dimensions_plugin

スクロールによって、コンテンツを立体的に移動させているように見せるエフェクト。

１４．画像読み込み後、実行

after-readrun_plugin

画像を読み込ませた後に命令を実行させるプラグイン。他の使い方としては、Masonryを使う機会が多かった時に、画像の表示崩れを解消するために導入しました。

１５．フリック可能なスライド

flickpossible-slide_plugin

フリックが可能なレスポンシブ対応のシンプルなスライドを探しているのならこちら。modernizrとHammer.jsの記述が必要です。

flickpossible-slide-second_plugin

ドラッグするかのようにスワイプできるフリック操作可能なスライド。

図柄

ジグザグ線、ひし型や三角形などで構成された模様を背景やパーツの一部に使うサイトもチラホラ見かけるようになりました。

１６．線画でロゴを動かす

line-drawing_plugin

SVGからアニメーションを作るLazy Line Painterを使った方法。作成した線画をSVG形式で読み込み、０から徐々に線画が完成されていくような過程をアニメーションで実現します。確実に視線が止まりそうです。

１７．菱形

diamond-jq_plugin

画像を菱型に並べて整列させるプラグイン。

１８．レスポンシブ対応 チャート

responsive-chart_plugin

チャートを表示させるレスポンシブ対応のプラグイン。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。