イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。

イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを(例えばペンのような)放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
Foggy Foggy is a jQuery plugin for blurring page elements. It supports IE (8 and up), Firefox, Safari and Chrome. Here, both paragraph text and image in the background have been blurred with Foggy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis commodo massa viverra diam pharetra quis dictum mauris bibendum. In eget tortor id risus suscipit facilisis. Duis luctus tortor non sem moll
By default, the plugin will prepend the menu to the BODY and hide it from sight. When the menu is being opened, the page slides out of view, revealing the menu and blocking the page from interaction. In other forms, the menu can be revealed by sliding in view, hiding the page behind it. This kind of behavior is called an "off-canvas" menu. An "on-canvas" menu on the other hand, is always opened an
Webページの要素にアニメーションが付けられるjQueryプラグインについてまとめました。デザインでのちょっとしたアクセントになるだけでなく、使いようによってはユーザビリティ向上にもつなげられます。とはいえ、使いすぎは禁物です。使いどころをよく考えながら、上手に使っていきましょう。 Animate.css » Animate.css その名の通り、アニメーションが実装できるjQueryプラグインです。使えるアニメーションの数がとても多いことが特徴的でしょう。 「Bounce(バウンス)」や「Fading(フェードイン、フェードアウト)」などのよく知られたものから、「hinge(ヒンジ)」などおもしろいアクションも使えます。 Hover.css » Hover.css – A collection of CSS3 powered hover effects その名の通り、要素にホバーした時の
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> body { background-color: #999999; } .sampleContents { width: 100%; height: 600px; background-color: #fff; } </style> </head> <body> <div class="sampleContents adaptive-target"> <img src="https://qiita-image-store.s3.amazonaws.com/0/83231/c60f3d3c-4e6c-fc3c-8b99-a9724408fff3.png" class="sampleImage" data-adaptive
Here's The Deal CLNDR is a jQuery plugin for creating calendars. Unlike most calendar plugins, this one doesn't generate markup. Instead you provide an Underscore.js HTML template and in return CLNDR gives you a wealth of data to use within it. CLNDR is free of opinions about markup and style: it is the high-speed chassis on which you build the vehicle of your dreams. For a little backstory and a
JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどうしたらいいのか調べてみた。 するとJavaScriptでは割と有名なシャッフルするアルゴリズムがあるようなので調べたところ「配列を拡張してみた。Array.shuffle() Array.clone() – JavaScript」というサイトで見つかりました。 アルゴリズムの難しい話は置いておいて、今回はこのアルゴリズムを利用して、配列をシャッフルした後にjQueryも使ってランダムに表示させていたいと思います。 Array自体をprototypeで拡張する まぁそのまんまjavascriptのarray要素自体をprototypeで拡張させます。Fisher–Yatesアルゴリズムらしいです。 拡張したshuffleメソッドは普通のpush()のように使えます。 //シャッフルのアルゴリズム prototyp
Upload in HTML5 We are using HTML5 APIs. Always. Plupload is based on multi-runtime pollyfills for XMLHttpRequest L2, File and Image APIs. So when there's no HTML5 available in the browser, we emulate it ourselves. mOxie (combined code-name for pollyfills) is completely standalone and available separately. Drag'n'Drop Files from Desktop Files not only can be picked from browse dialog, but also can
About me Renowned for his expertise in programming, Professor Brian Detering is a distinguished faculty member at USC Marshal, with a teaching career spanning over two decades. He is highly respected in his field, with research interests in programming languages, software engineering, and artificial intelligence. His numerous contributions through papers have earned him recognition, with hundreds
仕事の傍ら、暇つぶしとかでwebアプリを構築したりするわけですが、どうにもUIセンスがなさすぎて、カッコイイサイトとかを参考に真似したりしても、なぜか自分でアレンジするととてつもなくダサくなる、ということを繰り返してきました。 で、もうこうなったら自分で考えずに、すべてライブラリに頼ろう!と思ってwebサイトを構築した時に使ったcssやjsのフレームワーク、ライブラリなんかを、簡単なコメント添えてまとめておこうと思います。 css自分で一切書かなくても、このぐらいのUIまではいけそうです。 フレームワーク Bootstrap ベースはtwitter bootstrapの恩恵に授かります。 GoogleMaterialDesignLiteも見た目はかっこいいんですが、色々コンポーネントがたりなかったりして、結局いくらか自分でデザインしないとどうにもならなくなる印象です。 jQuery 今更書
jQuery File Upload Demo File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads. Pintura
Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source
とりあえずRequireJS0.14.5+jQuery1.4.3,RequireJS0.15.0+jQuery1.4.4で発生。 IEは6~8っぽい。 なんで気づいたかというと IEでjQueryUI等の動作がおかしくなった CSS Box Modelがサポートされている状態なのに$.boxModel(=$.support.boxModel)がtrueでない falseですらなくundefinedだった $.boxModelの検出はjQuery(function(){})内で行われていた。 $(document).ready()と同じ 検証 対象:RequireJS0.15.0+jQuery1.4.4 環境:IE7(+CompanionJS) 今、仕事で作ってるアプリで使っているallplugins-require.jsとjquery-1.4.4.jsに 以下のようにconsole.log
Windows版IE6, IE7, IE8 での<label>タグがきかない不具合に対応する。 チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、 フォームの横の文字もクリック出来るようにしておくととても便利です。 それを実現するのが<label>タグなのですがIEでは以下の2つの不具合があります。 ■ 1.IE6では<label></label>でテキストを囲んだだけでは動作しない 以下のコードはIE6では動作しません。 <label><input type="checkbox" />チェックボックス1</label> <label><input type="checkbox" />チェックボックス2</label> 以下のように全ての<checkbox>にidをセットして、<label>タグでそのIDを指定します。 <input type="checkbo
CORS(Cross-Origin Resource Sharing)って何? CORS(Cross-Origin Resource Sharing)は、その名の通り、ブラウザがオリジン(HTMLを読み込んだサーバのこと)以外のサーバからデータを取得する仕組みです。各社のブラウザには、クロスドメイン通信を拒否する仕組みが実装されています。これは、クロスサイトスクリプティングを防止するためです。Aというサイトに訪問したのに、Bというサイトに向けて個人情報を送っていたというのは困りますよね。例えば、オリジンから読み込んだHTML内のJavaScriptでJSONデータを読み込むとしましょう。JSONデータが同じサーバにあれば普通に読み込めますが、別のサーバにある場合は読み込めません。まぁ実際のところはJSONPという仕組みを使ってできちゃったりしますが、抜け道的なやり方で使われていました。CO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く