人気のJavaScriptライブラリが探し出せるサイト「LIBSCORE」 | ライフハッカー・ジャパン
「LIBSCORE」は人気のJavaScriptライブラリが探し出せるサイトです。多くのJavaScriptライブラリの人気度合いを測定し、ランキング形式で表示してくれます。フロントエンドの開発をしている方は要チェックですね。 以下に使ってみた様子を載せておきます。まずLIBSCOREへアクセスしましょう。検索ボックスからフリーワードでライブラリを検索することができます。 このようにランキング形式で人気順に並べることも可能。たくさんあるJavaScriptライブラリから人気のものを探しだすことができます。クリックするとそのライブラリが公開されているページへアクセスできますよ。JavaScript開発をしている方はライブラリ探しの際に一度使ってみてはいかがでしょうか。 LIBSCORE （カメきち）
jQueryでWebサイト内を無限にスクロール出来るようにする
ちょっと語弊があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。 これを実装しよう、という誰得な話です。 Sample 以下サンプルです。 Sample コード$(function(){ $("body").height($(window).heigh
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」:phpspot開発日誌
Draggabilly 単体で動くドラッグ＆ドロップ用JSライブラリ「Draggabilly」 ドラッグ＆ドロップだけ使いたい場合に使えそう。マウスだけでなく、タッチにも対応しています。 ドラッグ開始、移動中、終了時にイベントハンドラを設定できます スマホサイトで軽く手軽にドラッグを使いたい場合に検討してみてもよさそうですね 関連エントリ ドラッグ＆ドロップでアップロードが簡単実現できるjQueryプラグイン「Dropzone.js」 ドラッグ＆ドロップによるクールなファイルアップロードを実現できる「Dropzone.js」 ドラッグ＆ドロップで並び替えができるダッシュボード作成jQueryプラグイン「sDashboard」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 クロスブラウザでファイルのドラッグ＆ドロップ、Ajaxアップロードを可能にする「FileDrop」
アマゾンのメガドロップダウンメニューを実装できるjQueryプラグイン「jQuery-menu-aim」 | Web活メモ帳
Amazonのドロップダウンメニューを実装できるjQueryプラグインが良さそうでしたのでご紹介。 アマゾンのメニューの特徴は高速な動きと、マウスが離れてもメニューが出たままになるのが特徴で、タブレット端末でも使いやすいように実装されています。 何故アマゾンのドロップダウンメニューは使いやすいのか？ アマゾンのドロップダウンメニューが何故使いやすいのかという記事も非常に参考になります。 BREAKING DOWN AMAZON’S MEGA DROPDOWN サイトは英語ですが、まとめると ・ドロップダウンが超高速である ・ドロップダウンメニューから離れてもメニューが出ている ・ドロップダウンメニューを閉じるのをマウスカーソルの位置を見て遅延させている なるほど〜と言う感じです。GIFアニメでの解説もあるので一度見てみる事をオススメします。 このプラグインのサンプルはサイトからダウンロード
jQueryでCSSのimportantを指定する方法
jQueryでCSSのimportantを指定する方法を紹介します。 １．問題点 jQueryでCSSの設定を行う場合、css()を利用します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('.foo').css('color', '#f00'); }); </script> <p class="foo">Hello!</p> ただし、importantを指定するときに次のように記述しても有効になりません。 <script> $(function(){ $('.foo').css('color', '#f00!important'); }); </script> ２．jQueryでCSSのimportantを指
画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」:phpspot開発日誌
jQuery Photoset Grid - Style Hatch 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 １つのdiv内に<img>で画像を並べるだけで写真をレイアウトしてくれるプラグインです。 コードは以下 次のようにレイアウトされます。 元の写真がいいというのはあるんでしょうけど、写真がよりオシャレに見えますね 関連エントリ テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 CSSレイアウトをWEB上でサクッと作れる「PageBlox」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 画像レイアウト関連で便利なjQueryプラグイン等まとめ これは新しい!パネルレイアウトが美しいスライドショー実装デモ コンテンツ幅に対してテキストを最大にして美し
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法
jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。 hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」（実装解説つき）」を参照してください。 ３．jQuery UI Tabsでhashchangeプラグインを利用する ２項のリンク先の説明ではjQuery
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」:phpspot開発日誌
文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」 2013年03月21日- SPOILER ALERT! 文字や画像にリアルタイムでモザイク処理がかけられるjQueryプラグイン「SPOILER ALERT!」。 $ ('spoiler, .spoiler').spoilerAlert()のように初期化するだけで、画像や文字をモザイク処理することが出来ます。 マウスオーバーでうっすらみえるように、クリックでモザイク解除みたいなことが可能です。 あとはどう使うか？というところですが、実装の際にJS側でやってしまえるというのは楽でいいですね。 関連エントリ アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 高機能なカラーピッカーを実現出来るjQueryプラグイン「Spectrum」 i
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
非同期プログラミングを驚きのシンプルさに (するかもしれない) Flow.js を公開しました。 - latest log
(ε・◇・)з o O ( (ミ・◇・ミ) o O ( あたし。ずっと思ってた… (ミ・◇・ミ) o O ( あたしの脳みそだと Deferred/Promises は、ちょっと難しすぎるって… (ミ・◇・ミ) o O ( jQuery.Deferred 解説記事をいくつかみたけど、すごく… モジモジしてて、ちょっと縦長すぎるんですもの… (ミ・◇・ミ) o O ( だから作っちゃった… ).done(); 非同期処理をシンプルに書ける、とても小さなライブラリをリリースしました。 Deferred/Promises は既存の構造や, そもそもの考え方を大きく改変する必要がありますが、 flow.js はあまり大きな違和感もなく、現在の流れを維持したまま導入できると思います。 使い方はこちらをごらんください http://www.slideshare.net/uupaa/flowjs リポジ
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
jQueryで$(document).readyを複数実行した場合のthisやvarについて - maeharinの日記
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ
jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。 １．機能 名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。 JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。 ２．プラグインのダウンロード githubの「jquery-cookie」のページにある「ZIP」をクリック。 これでアーカイブをダウンロードできます。 ３．基本的な使い方 jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jqu
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
爆速でわかるjQuery.Deferred超入門
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog Yahoo!デベロッパーネットワークの中野(@Hiraku)です。これまで、JavaScriptで非同期処理を書く上での問題として、コールバック地獄やエラー処理に例外が使えないことなどを解説してきました。 これらの問題に対処するライブラリの1つであるjQuery.Deferredに関して、もう少し丁寧に解説いたします。なお、jQueryのバージョンは記事執筆時点の最新である、1.9.1を想定しています。 jQuery.Deferredとは jQuery.DeferredとはjQueryのバージョン1.5から導入された、非同期処理をうまく扱うための標準モジュールです。使いこなすことで、以下のような効果が見込めます。 非同期処理を連結
pickadate.js
There’s a tonne of options to customize the date and time pickers, such as month/year selectors, time intervals, etc. There’s also a rich API to extend the functionality of the picker. Some examples are displayed on Codepen. When using the “classic” theme, it is important to have a wrapper div with position: relative around the source input to ensure the picker is sized according to the input elem
jQueryのコールバック関数の書き方 – creamu
処理が終わった後に実行するコールバック関数は、以下のように記述します。 $(this).fadeTo(600, 1,function() { hideBg(); }); function hideBg() { //上記処理が終わった後の処理を記述 } この場合は、thisが600ミリ秒後に100%の透過度になった後に、hideBg関数が実行されます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
