[JS]jQueryのプラグイン100選 -2013年総集編
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
jQuery Snippets - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。 May 08, 2017 追記 「jQuery Snippets #10」を追加しました。 May 07, 2017 追記 「jQuery Snippets #9」を追加しました。 September 16, 2016 追記 「jQuery Snippets #8」を追加しました。 April 25, 2016 追記 「jQuery Snippets #7」を追加しました。 February 04, 2016 追記 「jQuery Snippets #6」を追加しました。 January 05, 2016 追記 「jQuery Snippets #5」を追加しました。
背景写真に「ぼかし効果」を巧く使ったWebデザイン事例（簡単なチュートリアル付き）｜Tips*Blog｜株式会社コプロシステム
こんにちは、コプロシステムWebデザイングループの石川です。 先月7月29日付のエントリーで、美しくて・フルスクリーンな写真イメージをWebサイトの背景に使用する手法が2013年のトレンドになっている ということで、いくつかの事例をまとめました。 →思わず魅入ってしまう、美しく大きい写真素材を巧みに使ったフルスクリーンデザインのWebサイト・23選（2013/7/29） 背景に写真イメージを活用したデザイン手法として、フルスクリーンデザイン以外にも、「ぼかし効果（ブラーエフェクト）」を取り入れているWebサイト、最近では特に「元の素材が何なのかがわからないくらい強くぼかした写真イメージ」を取り入れているWebサイトのデザインが海外サイトを中心に増えている気がします。 これは、写真そのものの美しさ というよりも、 ぼかすことで新たな美しさを表現したり 奥行き感を表現したり そこに乗っかってい
ホバー時に様々な効果を付けるjQueryプラグイン「Hoverizr」 | Blog
ダウンロード こちらからプラグイン「jquery.hoverizr.js」をダウンロードします。 設置方法 <head>内でjQuery本体とダウンロードした「jquery.hoverizr.js」を読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/jquery.hoverizr.js"></script> 続けて以下のように記述すると、ホバー時にグレースケールから元画像に変わるという効果が付きます。 <script type="text/javascript"> $(window).load(function() { $('画像のclass名かid名').hoverizr(); }); </script> オプショ
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」:phpspot開発日誌
エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」 2013年05月17日- Slickhover.js エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」。 画像等のエレメントにオーバーレイすると、アニメーションしつつフェードアウトし、上に画像をかぶせる的なエフェクトを作るためのjQueryプラグイン。 それ以外は何もやってくれませんが、こういう細かなアクションも意外と１から実装しようとすると面倒だったりするものですが、このプラグインで簡単に実装できます 他のプラグインと組み合わせることでクールな演出ができそう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 selectボックスをリッチかつク
[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ
HTML 各デモのベースとなるHTMLです。 div要素のclassを変更して利用します。 <div class="pic"> <img src="image.jpg"> </div> 各デモで共通で使用するスタイルです。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #333; } .pic { border: 10px solid #fff; float: left; height: 300px; width: 300px; margin: 20px; overflow: hidden; -webkit-box-shadow: 5px 5px 5px #111
2011年にリリースされた、使えるjQueryプラグイン50「The 50 Most Useful jQuery Plugins from 2011」
2011年にリリースされた、使えるjQueryプラグイン50「The 50 Most Useful jQuery Plugins from 2011」 WEB制作の現場で利用されているjQuery。非常に軽量かつ、高機能なjavascriptライブラリで、世界中で様々なプラグインがリリースされていますが、今日紹介するのは2011年にリリースされた、使えるjQueryプラグインをまとめたエントリー「The 50 Most Useful jQuery Plugins from 2011」です。 Response Javascript 全部で50ものプラグインがまとめられていますが、今日はその中から特に気になったものを紹介したいと思います。 詳しくは以下 Minimit 様々な動きが実現できるjQueryギャラリープラグイン。 Overscroll スマートフォンやタブレットの操作感をWEBで実
これは使いやすい、HTML5+jQueryのプレゼンテーション用ツール -Deck JS
当サイトでもいくつか紹介したHTMLベースのプレゼンテーションツールですが、これ一番いいかもというのがリリースされたので紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
少ないコードでページ内を自在にスクロールさせるjQuery [虚仮の一念…SMILEWORKS BLOG]
Minimit Gallery Plugin