アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
![[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/4df978511120c0727c18646f1d386ecdc2ab3a59/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072304.png)
アニメーション最強のVelocity.jsの使い方 - Qiita
はじめに 今話題のVelocity.jsについて初歩の初歩だけまとめました。 ※追記：↓対抗馬のanime.jsについて記事書きました※ アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装！ Velocity.jsとは jQueryのプラグイン。 $.animateと互換性を持ち、さらに高機能で非常に軽快なアニメーションをする。 アニメーション技術補足 jQuery Animation 便利だが重い。コマ落ちし過ぎ。 CSS Transition, CSS Animation 軽いが、アニメーションを繋ぐなどが出来なかったりなど使い勝手が悪い。 結局、JavaScriptを頼らないと使い物にならないことが多い。 Transit.js 有名なアニメーションライブラリのひとつであるjQueryプラグイン。 CSS Animationを制御しているため、軽快。 そして、3d-
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions
デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。 ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitionsを紹介します。 Meaningful Transitions アニメーションは、目的ごとに6つのカテゴリに分けられています。 下記に、6種類のアニメーションのカテゴリと事例をいくつか紹介します。 Orientation Spatial Extension Awaking Controls Highlight Feedback Feedforward Orientation オリエンテーションは表示されているオブジェクトから別のオブジェクトを表示するもので、スクロール、ポップアップ、ス
[CSS]デザインは美しく、かわいいアニメーションを備えたナビゲーションを実装するデモ
シンプルなリストを使って、アイテムがホバー時に吹き出し状にポップアップするかわいらしいアニメーションを備えたナビゲーションを実装するスタイルシートのデモを紹介します。 アニメーションもかわいくて素敵ですが、半透明のグラデーションもとても美しいナビゲーションですね。 デモは、最新のモダンブラウザでご覧ください。 Menu 実装は下記のようになっています。 HTML シンプルなリストで実装されています。 <nav> <menu> <li><a href="#">☀</a></li> <li><a href="#">✈</a></li> <li><a href="#">❄</a></li> <li><a href="#">☎</a></li> </menu> </nav> <nav class="menu2"> <menu> <li><a href="#">home</a></li> <li><
jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル:phpspot開発日誌
jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ
[jQuery/Javascript]jQueryによる無限ループするアニメーションと三角関数の話 | Wood-Roots:blog
DEMO 最近はキービジュアルにFlashを使用せずにJavascriptによるアニメーションを使うことが増えてきました。GalleryViewのようなスライドショーふうのプラグインを設置するだけのケースも多いですが、ちょっとでも凝ったことをしたいと思い考えたり調べたりしていると三角関数がなかなか使えるということが分かってきました。 正直苦手な内容の話なのですが、簡単な処理のために使う程度ならコピペで何とかなりました。 余談ですが・・・三角関数とは 言うまでもありませんが、サイン・コサイン・タンジェントというやつです。確か高1か高2の数学で習うものだったように思います。アニメーションで使用するのは大抵sinとcosです。 y = sin(x) という式の場合、xが増えていってもyは-1と+1の間の値しか取りません。グラフにあらわすと波線（正弦波といわれるもの）になります。 要素を回転させ続
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]アニメーションのエフェクトが抜群にかっこいい、レスポンシブ用ナビゲーションのデモ -Off Canvas Menu
[CSS]これは素敵なアイデア！borderを使ったCSS3アニメーションのテクニック
Simple yet amazing CSS3 border transition effects デモ 実装 デモ デモはFirefox, Chrome, Safariなどのモダンブラウザでご覧ください。 IEはたぶん10でしょうか。 デモは大きく分けて、3種類です。 デモ下段 最後は矩形のデモ、円形とは異なるアニメーションが楽しいです。 実装 HTML HTMLは非常にシンプルでa要素にclassを指定するだけです。 <a href="#" class="one"></a> <a href="#" class="two"></a> <a href="#" class="three"></a> ... ... CSS まずは、共通のスタイルシートから。 かわいい車の画像はdate:imageです。 a { background-image: url(data:image/gif;base
緩急をともなったイージングのアニメーションをCSSやJSで実装する時のスニペットのまとめ -Easing Functions
にょい～ん、ぐい～んなどの緩急をともなったアニメーションを実装するCSSやJavaScriptのスニペットをまとめたEasing Functionsを紹介します。 Easing Functions Cheat Sheet Easing Functions -GitHub イージングのアニメーションの動きを確認 イージングのアニメーションの種類 イージングのアニメーションの実装 イージングのアニメーションの動きを確認 イージングとは動きに加速や減速を加え等速で動くのとは違ったエフェクトを与えるもので、最初ゆっくりでだんだん早くしたり、床にバウンドするような動きを与えます。 登録されているイージングのアニメーションの動きは、それぞれのグラフをホバーするとレッドのアローがその動きをします。
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開
また新しいHTML5オーサリングツール「Ninja」、タイムラインでアニメーションも作成可能。Motorola Mobilityがオープンソースで公開 Motorola Mobilityが今月公開したHTML5オーサリングツール「Ninja」のバージョン0.7は、SVGやCanvas、WebGLなどを用いたHTML5でのアニメーション効果の開発を得意としたオーサリングツールです（それにしてもNinjaという名称は海外で人気がありますね……）。オープンソースソフトウェアとして開発されています。 Ninjaは、同じくMotorola MobilityがリリースしたHTML5対応のフレームワーク「Montage」をベースにしています。Montageは、Adobe Flash/Flexのような形でHTML5のアプリケーション開発ができるようにという意図で開発されたフレームワーク。 Ninjaの画面
[DEMO]jQueryで作るアニメーションするマウスオーバーボタン基本５種 | webOpixel
jQueryで作るアニメーションするマウスオーバーボタン基本５種 フェードイン・フェードアウトで切り替わるナビゲーション くるっと切り替わるナビゲーション 何かが追尾するナビゲーション 拡大するナビゲーション 横からぐいんって伸びるナビゲーション 横からぐいんって伸びるカスタム
jQueryのアニメーション関連いろいろまとめ :: 5509
jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。 TIPS/チュートリアル プラグイン/animateメソッドの拡張など プラグイン/単体で使えるものなど プラグイン/スクロール系 TIPS/チュートリアル animate(params, options) http://semooh.jp/jquery/api/effects/animate/params,+options/ まずはjQuery animateの基本を押さえましょう。 Using jQuery Stop http://css-tricks.com/examples/jQuery
[JS]動画もFlashも使わずに、商品をぐるぐるとアニメーションで回転させるスクリプト - fc.tape
CSSスプライトを使って、映画のフィルムを再生するように画像をアニメ化するjQueryのプラグインを紹介します。 操作は下記キャプチャのようにボタンをはじめ、ドラッグにも対応しており、アニメーション再生のスムーズ機能も備えています。 デモで使用している画像の一部 この画像をCSSスプライトで表示し、アニメーションをコントロールします。 画像の作成には「ImageMagickを使用すると、フォルダ内の全ての画像からスプライト用の一枚の画像を生成できます。 実装の基本 アニメーションを配置するdiv要素、サイズなどを指定するスタイルシート、コントロールするスクリプトが基本構成です。 HTML <div class="tape"></div> CSS .tape { width: 420px; height: 315px; background: url(tape.png) 0px 0px no
一枚の画像をjQueryでアニメーションさせるプラグイン「jAni 」 | Web活メモ帳
jAniは背景画像をアニメーションさせるjQueryのプラグインです。 通常であれば画像をアニメーションさせるにはアニメーションGIFを使用するのが一般的ですが、256色しか使用できないという制限もあります。 このプラグインを使用すると、アニメーションGIFの制約がなくなるため綺麗なアニメが制作可能です。 まずはデモをご覧下さい。 jAni jQuery Plugin Demo 用意するのは縦長の画像一枚のみ 実際に必要な画像は縦長の画像一枚のみです。 設定でアニメーション速度（画像の切替速度）を変更する事ができます。 設置の仕方 設定も簡単にできるようです。 まずはjsを読み込みます。 次にCSSを設定します。 htmlに表示する位置をdivで指定します。
[CSS]これは使ってみたい、繊細で美しいツールチップを実装するチュートリアル
How to create animated tooltips with CSS3 [ad#ad-2] デモ 実装 デモ デモはCSS3アニメーション、擬似要素を使用しているため、Firefox, Chrome, Safariでご覧ください。 Demo 4 最初にぼんやりと大きなツールチップが表示され、縮小とともにはっきりとツールチップを表示します。 実装 HTML ツールチップはリスト要素で、各アイテムはa要素で実装されています。 <ul class="tt-wrapper"> <li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li> <li><a class="tt-twitter" href="#"><span>Twitter</span></a></li> <li><a class="tt-dribbble
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
GPUアクセラレーターが使える環境で強制的に有効にできるCSSの指定方法 :: 5509