jqueryrotateは、画像を回転させられるjQueryプラグインです。 ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。 jqueryrotate
jqueryrotate – 画像を回転させられるjQueryプラグイン – creamu
jqueryrotateは、画像を回転させられるjQueryプラグインです。 ループでずっと回すことができたり、hover時に360度回転させることも可能なようです。 jqueryrotate
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
パララックスでのイベントの考察。scroll / throttle / debounce / touchmove / mousewheel | codechord
Posted 12月 17th, 2012 by codechord. 0 Comments Tweet Tweet [追記：2015/05] 2012年12月の投稿なので情報がかなり古いです。iOS7ではスクロールイベントが取りやすくなってます。とはいえ、スマホのパララックスは要注意。 こんにちは。Advent Calendar 2012 軽めのjQuery の17日目を担当します。 http://www.adventar.org/calendars/29 パララックスエフェクトを実装するためのイベントについて少し触れてみたいと思います。 パララックスエフェクトで考えること パララックスエフェクトのような動きを考える時、いくつかの項目を考慮する必要があるとおもうんですが、例えば イベント発火のタイミング パララックスエフェクトの実装 スマホで動作する際の妥協点。 如何に心地よくぬるぬると
jQuery 1.8でDeferred.thenの挙動が変わった
jQuery 1.8でDeferred.thenの挙動が変わった JavaScriptを書いていて楽しいのがDeferredの処理。その仕組みはjQueryでも実装されていますが、このDeferred、1.8からDeferred.thenの挙動がDeferred.pipeと全く同じになりました。それまでのthenは単純にdeferred.done().fail().progress()のエイリアスでした。 #11010 (Make Deferred.then == Deferred.pipe like Promise/A) – jQuery Core - Bug Tracker このせいで非同期処理が動かず、いつもならさくっと上げられるバージョンがまだ1.7系のままです！ 具体的に困るのはthenの後にdone、failを続けている場合にコールバック引数が渡らなくなること。 var d =
HTML5アプリで簡単にジェスチャーを実装できるライブラリ QUOjs 【18日目】 | DevelopersIO
と同じで最初に呼び出されます。 イベントハンドラの渡し方なども先頭が$$になっている以外はjQueryと同じです。 ブラウザのジェスチャ機能と競合する場合があるので、ブラウザのジェスチャ機能を無効にする必要があります。 タッチサンプル <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>タッチサンプル</title> <script src="quo.js"></script> <script> $$(document).ready(function(){ $$('#button1').touch(function(){ ale
A Creative Year: Distinctive Web Designs of 2012 | Codrops
An inspirational collection of the most impressive and distinctive web designs from the year 2012. 2012 was clearly an interesting year design-wise. The responsive boom in web design gave birth to brilliant redesigns; clever layouts emerged with a focus on clear typography and impactful, contrasty colors. Large background images with a mood-setting character and sharp edges on unusual shapes were
[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Backbone.Modelのattributesにオブジェクト入れるときの注意 - Webtech Walker
Backbone.js Advent Calendarの15日目です。軽めにいきます。 Backbone.Modelのattributesにオブジェクトを設定するときの注意点など。attributesはsetとかで設定される値をオブジェクトして持っているやつです。 まず次のようにsetでattributesを設定します。 var MyModel = Backbone.Model.extend(); var m = new MyModel(); m.set('hoge', 'fuga'); m.set('foo', { bar: 'baz' }); このようにhogeには文字列、fooにはオブジェクトを設定しました。そしてtoJSONでattributesを取得して値を更新してみます。 var attrs = m.toJSON(); attrs.hoge = 'new fuga'; attr
[JS]jQueryのプラグイン100選 -2012年総集編
2012年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年目立ったのは、やはりレスポンシブ、そしてCSS3アニメーションでしょうか。 スライダーやギャラリー系もレスポンシブ・アニメーション対応、ナビゲーションやPinterst風のレイアウトなど、多くのプラグインにそれら二つの要素が組み合わさっています。 動画関連 画像ギャラリー関連 画像拡大関連 画像配置・キャプション関連 背景画像関連 コンテンツスライダー・カルーセル関連 ナビゲーション関連 レイアウト関連 レスポンシブ関連 パネル・ボックス関連 ツールチップ・ティッカー関連 アニメーション関連 エフェクト関連 スクロール操作・スクロールコンテンツ関連 リスト関連 テーブル関連 フォーム関連 テキスト関連 見出し抽出関連 ローディング関連 エレメント・コンテンツ生成 その他 動画関連
jQuery で HTTP 接続するときの書き方: Days on the Moon
12 月 13 日に Kyoto.js の第 3 回 meetup で、「jQuery で HTTP 接続するときの書き方」と題した 5 分間のライトニングトークを行いました。以下にその内容を一部再構成して収録します。 こんにちは、nanto_vi です。今日は jQuery で HTTP 接続をするときの書き方について話します。 皆さん jQuery を使うことも多いかと思います。jQuery で HTTP 接続をするとき、古いサンプルだと次のような書き方が載っています。 $.ajax({ url: '/foo/bar', data: { baz: 'qux' }, success: function (data) { console.log(data); }, }); 接続完了時の処理をコールバック関数として $.ajax() に渡してやる形ですね。しかし、現在この書き方は非推奨となっ
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
JSテストツールJasmineをCoffeeScriptで使う（少し応用的な使い方） - Qiita
以下のSlideShareが大変参考になったので備忘を兼ねてCoffeeScript版を書いてみた。 JS開発におけるTDDと自動テストツール利用の勘所 http://www.slideshare.net/KojiNakamura/jstdd 目次 1. Matcher概観 2. beforeEach / afterEach 3. Spy 4. Async Test 5. jQuery code test 1. Matcher概観 notで否定のMatcherとなる expect(x).toEqual(y) expect(x).not.toEqual(y) expect(x).toBe(y) toBeは === による等値チェック expect(x).toMatch(pattern) expect(x).toBeDefined() expect(x).toBeUndefined() expec
レスポンシブなjQueryスライドショープラグイン2012年保存版
RefineSlide / Cycle2 / iosscripts.com &ndas...他...全18件
jQueryのエフェクトに変化を加える「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを作成してみた
様々な効果でWebページのUIをリッチにしてくれるjQuery。 今回は、そのjQueryのエフェクト動作を加速／減速させるためのプラグイン、「jQuery Easing Plugin」の使い方と、全33種類のエフェクトサンプルを（自分用に）作ってみましたのでシェアしておきます。 「jQueryってなんじゃらほい」という方は先日書きました7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座をご一読ください。分かりやすいと僕の中で大評判です。 easingとは、エフェクトの動きを加速/減速させるための関数です。 （中略）特別なことをしなくても使うことの出来るeasingは”linear”と”swing”の2種類だけですが、プラグインなどを入れることで多くのeasingを利用することができます。 このeasingプラグインでは、version 1
Fullscreen Pageflip Layout | Codrops
A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left. We have received a couple of requests on how to use the BookBlock plugin in fullscreen. So, we decided to create a fullscreen layout, apply BookBlock to it and add a sidebar menu. We’ll show you how to c
jQueryのgetJSON()でエラーをハンドリングする
jQuery.getJSON()でエラーをハンドリングする方法を紹介します。 １．はじめに JSONの取得でエラーをハンドリングにはjQuery.ajax()を利用するか、googleで公開されているjquery-jsonpプラグインを利用するといった先入観がありましたが、公式サイトのドキュメントを読むと1.5からサポートされているようで、まったく気がついてませんでした。 jQuery.getJSON() As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.getJSON() implements the Promise interface, giving
$.eachのループを途中で止める (軽めのjQuery Advent Calendar 2012 7th day)
$.eachを回して途中で止める $.eachはたとえば複数の要素を示すjQueryオブジェクトをループして、ひとつひとつに対して処理を適用することができます。jQueryプラグインなぞを開くと、かなりの高確率で使用されている人気のAPIです。 そんな$.eachは、return falseでいわゆるbreak（中断）をすることができます。知ってると便利かも、ぐらいの軽いおはなし。 orange pineapple apple たとえばこのようなコードでは、orange・pineapple・appleの順に並んだ要素をループして検査し、pineappleであれば、ループを止めてそうでなければ背景に色をつけています。この例で期待される動作は、最初のorangeだけに色がつくのが正しいです。 実行結果は以下 Iterate by $.each こんな感じになります。期待通りの動作ですね。 do
[JS]jQueryのプラグイン33+1選 -2012年12月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 videoBG 動画をページの背景（あずきの水玉）でもdiv要素の背景（暗いトンネル）でも配置します。 Superslides フル
CYOKOLOG — jsdo.it みたいなことが簡単にできる jQuery プラグイン作ってみた
jQuery プラグイン作った時とかに説明用とデモ用のソースを別々に用意するのが面倒で、なんとか一本化できないかなぁとあれこれしてたら、jsdo.it とか jsFiddle みたいなことができるようになってた。 jquery.ex-demo - GitHubjQuery ver 1.7 以上、jQuery Compatible を併用すれば Ver 1.2.x で動作可。 2013/09/25追記 Google Code Prettify と統合しました。詳細は以下をご覧ください。 [Ex Code Prettify] その場で編集／実行できるシンタックスハイライター jQuery プラグインデモページに使用デモページに使う場合は以下のような感じ。 HTML <!-- 実行結果の表示場所を用意（必須ではない） --> <div class="result"></div> <!-- CSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
