jQueryのDeferredを用いたモダンなAjax処理の書き方
目次 jQuery 1.4以前の書き方jQuery 1.5以上の書き方jQuery 1.8以上の書き方【発展編1】Deferredを用いた書き方 deferredとは何か？【発展編2】$.when() を用いた書き方参考本エントリは軽めのjQuery Advent Calendar 2012の14日目の記事として書きます。軽めといいながら少し重めになってしまった感がありますが、初めてのAdvent Calendar参加ということでご勘弁を。 ※ Twitter API仕様変更によりTwitter APIを使ったコード例は現在動作しなくなっていることにご注意。 jQuery 1.4以前の書き方まずは、少し古めのコード、昔のjQueryの本とかでよく見る書き方。 $.ajax({ url: "ajax.html", success: function(data) { alert('succes
HTML5 × CSS3 × jQuery – #20 文字をランダムでカシャカシャ動かしながらテキストを表示させるプラグインを作る | DevelopersIO
リリィ・シュシュのすべて という映画をご存知でしょうか？2001年に公開された岩井俊二監督の作品で、当時は結構好きで何度も観返したものでした。 劇中にて文字がカシャカシャとランダムに動きながら文章が表示されていくエフェクトがあるのですが、これを JavaScript で作ってみました。Flash 全盛のころから Web コンテンツにはよく取り入れられてるエフェクトではありますが、使い所さえ間違えなければ今でも充分に通用するカッコよさを持っています。 今回は jQuery を使わずに素のJavaScript (Vanilla JavaScript) だけでプラグインを作りました。このシリーズの趣旨から大きく外れてますが、そこは仕方ないね。 LetterTicker - 文字をランダムでカシャカシャ動かしながらテキストを表示させる Step.1 | とりあえず動くものを作ってみる まずは動くも
jQuery window の幅と高さを正確に出す方法
jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法をφ(..) jQueryで、ウィンドウ幅と高さを取得するには、 var w = $(window).width(); var h = $(window).height(); こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。 var w = window.innerWidth ? window.
LetterFX jQuery Plugin | TuxSudo Web Development
LetterFx jQuery Plugin A jQuery plugin to apply animated visual effects to text - letters, words & custom patterns. LetterFx works by temporarily injecting markup into the text of an $("element") and sequentially adding & removing transition-based CSS classes. Please use responsibly. demo: 1 2 3 4 5 6 7
プラグイン作成
query_plugin_authoring_ja.md 元文書: Plugins/Authoring - jQuery Wiki(t) プラグイン/作成 jQueryを使うことが快適になってきたら、プラグインの作り方を知りたくなるでしょう。それは正解です！プラグインとメソッドでjQueryを利用することは、非常に協力で、さらに、プラグインの中に最も有効な機能を抽象化することで、開発にかける時間を大幅に節約出来ます。この記事は、プラグインを書き始める際の基本的な概要とベストプラクティス、さらに気をつける必要のある一般的な落とし穴についての記事です。 目次 さあはじめよう コンテキスト 基本 メソッドチェーンの維持 デフォルトとオプション 名前空間 6.1. プラグインのメソッド 6.2. イベント 6.3. データ 概要とベストプラクティス 翻訳 さあはじめよう jQueryプラグインを書
jQuery TwentyTwenty Plugin | Playground from ZURB
Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! Download TwentyTwenty The Problem We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. We even thought about having one image fade into another. B
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
[JS]軽快なアニメーションでグリッドに配置したパネルをパズドラのように移動したり、追加・削除できるスクリプト -Gridly
デモのアニメーション Gridlyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script> <script src="javascript/jquery.gridly.js" type="text/javascript"></script> <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" /> Step 2: HTML 各パネルはdiv要素で実装し、それらをラッパーで包みます。 <div class=
【jQuery】フレームレートを変更するAPI「jQuery.fx.interval」 | バシャログ。
なるべく扇風機で過ごしたいhakoishiです。 すでにムリっぽい。 さて、今回はjQueryのアニメーションのフレームレートを変更できるAPIのご紹介です。 負荷下げたい、とかシンプルな動きにしてデバッグしたい、とかに使えるのでは。 フレームレートを下げる、と書きましたが、正しくは1フレームあたりのミリ秒数を指定するものとなります。 jQuery.fx.interval = 【1フレームあたりのミリ秒数】; デフォルト値は13ミリ秒。 1秒が1,000ミリ秒ということは、1000 / 13 = 約77fps …デフォルトのフレームレート、結構すごかった。 影響範囲はjQueryで制御しているアニメーションとなります。 CSSアニメーションには干渉しません。 サンプルを作りましたので、よろしければポチっと。 jQuery.fx.interval サンプル - jsdo.it 1秒かけて、四
BigVideo.js - The jQuery Plugin for Big Background Video
BigVideo.js The jQuery Plugin for Big Background Video (and Images) 12-30-2015 Update This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links: CSS Tricks - Should I use a video as a background? Dudley Storey - Create Fullscreen HTML5 Page Backgr
[作って学ぶ！jQuery] 第6回 プラグインを作ってみよう! | バシャログ。
ゴールデンウィークはお台場でリアル脱出ゲームに参加して脱出できなかったminamiです。 jQuery連載も最終回、最後はプラグインを作ってみましょう！ プラグインとは？ jQueryのプラグインとは、 jQuery本体と併せて使うライブラリのことです。 様々な拡張機能を手軽に使うことが出来ます。 例えば以下のページにも多数のjQueryプラグインが登録されています。 自分で作ったプラグインを公開することもできます。 http://plugins.jquery.com/ プラグインの使い方 プラグインを使うために必要なのは以下の手順です。 1.jQuery本体を読み込む 2.プラグインを読み込む 3.プラグインを実行する 拍子抜けするくらい簡単ですね!ソース上では以下のような記述になります。 <!-- 1.jQuery本体を読み込む --> <script type="text/javas
![[作って学ぶ！jQuery] 第6回 プラグインを作ってみよう! | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
jQuery 2.0を利用するために注意すること
jQuery 2.0を利用するために注意すること 4月18日にjQuery 2.0がリリースされました。これまで1.x系でバージョンアップを進めてきたjQueryでは初のメジャーバージョンアップとなります。 jQuery 2.0がjQuery 1.x系と大きく異なるのは、これまでjQueryはIEのバージョンは6以上をサポートしてきましたが、jQuery 2.0ではIE9のバージョンは9以上がサポートとなります。 誤解しないようにして欲しいのはjQuery がIE8以下を切り捨てたわけではないということ。jQuery 1.x系は今後もバージョンアップされていき、jQuery 1.x系はjQuery 2.x系と基本的には同じ機能が実装される予定です。ちなみにjQuery 1.x系の次のバージョンはjQuery 1.10です。 jQuery 1.x系とjQuery 2.x系の使い分け 追記:正
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
jQueryについての所感
昨今jQueryについての所感とつきあい方を考える はじめはPHPとa-blog cmsがメインだったこのブログも、いつの間にかJavaScript（jQuery）とご飯レシピブログという謎な方向への珍走を遂げています。 そんな中、個人的にjQueryとのつきあい方について色々聞いたり思ったりで、だらだらとアウトプットしてみます。オチはつきませんでした。ﾀﾞﾗｧ...('A`) ってこれ、今年の3月に大半書いていて、なぜか8月も末の今頃に加筆修正かけたので色々アレなところあったらごめんなさい！！！もったいないから公開させてください、、てへぺろ(・ω<) なぜjQueryなのか jQuery周辺のノリ（何でもjQuery・コスト感なくjQuery・jQueryスニペット信仰）などに、正直ネガティブな感情抱くこともありますが、素直な気持ちで見ればjQueryはとても効率的だと思います。Web上
jQueryでスクロールバーのデザインを変更する | WEBZARU
新着情報一覧などのように全て見せる必要がない(スクロールして閲覧可能)場合に、そのコンテンツだけスクロールさせて見せることがよくあります。 CSSで高さを固定してやることによりそれ以上の高さが必要な場合には、自動的にスクロールバーが表示されるのですが、何よりも見た目がダサいです。そんな時、jScrollPaneを使うとスクロールバーのデザインを変更することができます。 jQueryのプラグインであるjScrollPaneの使い方をご紹介。 jScrollPaneとは スクロールバーのデザインを変更するためのjQueryのプラグインです。本体のJavaScriptとCSSの他にjquery.mousewheel.jsも併用し動作します。 現時点で最新版の「v2.0.0beta11」を例としています。ダウンロードは、本家サイトから行ってください。 jScrollPaneの使い方 <!DOCTY
jQueryコーディングの基本的なことからプラグイン化までの注意書き（Webデザイン）
jQuery でのプログラミングの、基本的なことからプラグインを作るところまで、初心者の頃につまずいた部分を中心にまとめてみました。公式ドキュメントなどで使われている、少し難しい印象の専門用語も織り交ぜながら書きました。jQuery で Webデザインのパーツを作るときの注意書きという感じです。 Webサイトを作るとき、私的にはとってもよく使っている jQuery。jQuery を勉強しだしたころは、自分の書いたコードが動いたりするのが、とっても楽しくて嬉しかった覚えがあります。私はあまり JavaScript でのコーディングが得意ではないので、今でもよく jQuery を使ってコーディングしてます …。 以前：CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました という記事を書いたのですが、今回はその復習 & jQuery
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stronghold
GitHub - morr/jquery.appear: jQuery plugin for tracking element's appearance in browser viewport
jQuery Content Slider | Responsive jQuery Slider | bxSlider
Thumbnail Proximity Effect with jQuery and CSS3