最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
作成:2015/04/6 更新:2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション 1.粘性 2.移動するプレースホルダー 3.滑らかにページ移動させる 4.パスワード強度を可視化 5.オートコンプリート 6.テキスト入力 7.Google Map(吹き出し・マーカー) 8.オートページャー 9.プログレス12パターン 10.ノーティフィケーション レタリング 11.1文字ごとに指定 フルスクリーン 12.モーダルウィンドウ(全画面) 13.フォーム(全
「Particleground」は、Webページの背景にパーティクルアニメーション(爆発時の飛散物のように、たくさんの点が同時に動くアニメーション)を表示するプラグインです。ユーザーの目を引くおしゃれな背景を手軽に導入でき、マウスカーソルに追従して動く視差効果(パララックス)の機能もあります。 ParticlegroundプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 9以降、スマートフォンではiOS 7.1のSafari、Android 4以降の「ブラウザ」に対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、 Particlegroundを配布ページからダウンロードします。ページ中央の「Downl
2013年12月20日 ExcelのコネクタのようなことができるjQueryプラグイン【jsPlumb】 アドウェイズエンジニアのイシマルです。 あっと気づけば、もう12月。忘年会のシーズンになりましたね。 飲みなどでハメを外すこともあるかと思いますが、程々に^^; では、本題のjQueryのプラグインjsPlumbの紹介に入りたいと思います。 Web系エンジニアの皆様、Web上で画面遷移図を描いたり、樹形図を描いたりしたいと思ったことはありませんか? 「えっ、ないですって!?」 そのうち描きたくなると思うので、勝手に紹介させていただきます(笑)。 ■jsPlumbを利用した遷移図サンプル jsPlumbを利用すると、こんな図が簡単に描けます! ■pluginのダウンロード 今回は、以下のように、jsPlumbのデモサイトからjsを取ってきました。 $ wget ht
12月になり今年も残りわずということで、これまでリリースされたサービスの中で 利用された「JSライブラリ」「jQueryプラグイン」のまとめを行いたいと思います。 現在JavaScriptを利用して、いろいろな事がWebブラウザ上で出来るようになりました。 しかし、1からすべてコーディングなんて面倒いと思う開発者がほとんど(?)だと思います。 そんな人達の為に、先人達は数多くのライブラリやプラグインを作成してくれています。
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 1)3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
Ajax風(?)なファイルのアップローダーは多々あります。その中でも、この「Uploadify」はかなり使いやすそうです。 画面遷移なしでファイルをアップロードできるのはもちろんのこと、アップロードの進行状況も見られたり、複数ファイルのアップロードにも対応していたりと、非常に良い感じです。また、アップロード完了後やファイルの選択後の振るまい、重複ファイルのチェックなど、色々とオプションの設定が出来るのも嬉しいです。 jQuery のプラグインということもあり、敷居も低い気がします。 まずは試してみる まずは、「uploadify - a multiple file upload plugin for jquery」からファイルをダウンロードします。 解凍したフォルダの中の「example」フォルダをサーバーにアップロードします。 これで準備完了ですので、exampleフォルダ内のindex
lightboxといえば、結構前から現在でもサイトでよく使われているjavascriptプラグインです。 似たようなものがいくつかあり、それらをまとめてモーダルボックスやlightboxといったりしますが、 その中で、シンプルで、使いやすくて、ちょっとかっこいいプラグインをご紹介します。 その名も「Shadowbox.js」です! 特徴としては、 ・画像の表示、複数画像のスライド ・外部サイト、共有動画サイトの表示 ・インラインコンテンツ(ページ内のhtml要素)の表示 ・flash(swf)や動画ファイル(SWF,FLV,WMP,QuickTime)の表示 ができるということです。 動画やインラインのものを表示できるものってそう多くはないのではないかなぁと思います。 (他のプラグインを詳しく見てはないのではっきりとはわかりませんが・・・) DEMOを作成しているので、ぜ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く