Web制作ナビWeb制作ナビWeb制作に役立つ情報やサービスを紹介。まとめ2016年に人気だったJavaScriptライブラリ、jQueryプラグインを紹介します。最近は、jQueryなどの外部ライブラリを必要とせず、単独で動作するものが増えてきましたね。軽量で高速な画像ギャラリーを実装することができるjQueryライブラリです。レスポンシブ、タッチデバイスに対応しています。画像以外にもYouTubeやVimeo、HTML5の動画をギャラリーに表示することができます。ズームやフルスクリーン表示、ダウンロード、ソーシャル共有なども実装でき、高機能です。対応ブラウザはIE9以上です。デモ写真をグループ化してスライド表示することができます。画像拡大Drift.jsDrift.jsECサイトでよく見かける商品画像や写真の拡大表示を実装することができるJSライブラリです。Images画像をカッコよくズーム表示することができます。デモ画像を素早くズームできるちょっとおしゃれなJSライブラリです。ズームした解像度の大きい画像を上下左右にスクロールして見ることができます。デモ画像の読み込み順序を指定することができます。使い方HML5動画再生プレイヤーのJavaScriptライブラリです。高機能で、YouTubeで見かける、埋め込み機能、シェア機能、フルスクリーン表示、音量調整など必要な機能が揃っています。見た目のカスタマイズも可能です。対応ブラウザはIE8以上で、動作も安定しています。デモスマホで動画を埋め込み表示することができるJSライブラリです。使い方Twitter、Instagram、YouTube、GoogleMapなどサイトにあらゆるものを埋め込むことができます。使い方リッチなアラートメッセージモーダルを実装できるJSプラグインです。豊富な機能を備えており、モーダルでやりたいことが、一通りできます。デモシンプルで軽量なJSモーダルです。モーダル内でGIFアニメを再生したり、iframeで外部サイトを表示することもできます。tingle.jstingle.jsピュアJavaScriptのモーダルです。大きなコンテンツをモーダル内でスクロール表示することができます。Mapを自由にカスタマイズしてJavaScriptコードを生成することができるオンラインツールです。豊富なデザインが用意されていて、1クリックで選ぶことができます。Mapをカスタマイズすることができます。使い方iframeやVideoなど非レスポンシブ要素をレスポンシブ対応に変えることができるJavaScriptライブラリです。YouTubeのような埋め込みコンテンツを完璧な比率、サイズで表示することができます。使い方iframe、object、embed、videoをレスポンシブ対応にできる軽量のjQueryプラグインです。デモiframeをレスポンシブ対応にすることができます。デモボタンや画像へのマウスオーバーやクリックで、mp3やoggの音声ファイルを再生することができます。インタラクティブなサイトを作成するときに使えます。デモ映画のオープニングなどで見かける、タイプライター風にテキストを表示するアニメーションを実装することができるJSライブラリです。Riverコンテンツをエンドレスに横スクロール表示することができるjQueryプラグインです。写真や商品をエンドレスに自動スクロール表示させたいときに使えます。デモ入力されたテキストに応じてパターン画像を生成するJSライブラリです。記事タイトルによって自動的に見出しの背景画像を変えるなどの使い方ができます。Guidesのページでは実際にこのような使われ方をしています。デモスクロール量に応じて進むプログレスバーを実装することができるjQueryプラグインです。jQuery.contextMenuCommonjQuery.contextMenuCommonコンテキストメニューにラジオボタンやチェックボックスを追加したり、FontAwsomeなどのアイコンを表示することができるjQueryプラグインです。Control風のon、offボタンを実装することができます。noUiSlidernoUiSliderスライダーをスマホやタブレット用に最適化することができます。MultirangeMultirange軽量なHTML5のスライダーです。デモチェックリストつきの進捗状況画面を実装することができます。使い方スクロールに応じてアニメーションを実装できるJSライブラリです。フェード、フリップ、ズームなど、様々なアニメーションを実装することができます。アニメーションの速度や種類をシンプルに設定することができ、モバイル端末や画面の横幅が一定以下の環境ではアニメーションを無効にできるなど、必要なオプションが揃っています。紹介モーショングラフィックを実装することができるJSライブラリです。パワフルで、クリエイティブなモーションを実装することができます。デモページ内コンテンツの高速リアルタイム検索が可能です。デモフォームに入力したテキストと一致する部分をハイライト表示することができます。コード表示microlight.jsmicrolight.jsコードをハイライト表示することができます。使い方Twitterのツイート数をカウント、表示することができます。使い方チャートC3.jsC3.jsインタラクティブなグラフを表示することができるライブラリです。2019.03.24Top。