「動き」のあるWebサイトを支えるCSSアニメーション技術｜yui540昨日、PIXIV TECH FESで登壇させていただいたときに発表したスライドの内容になります。 当日、来れなかった方はぜひこちらをご覧ください！ そして、当日お越し下さった皆さま本当にありがとうございました！ Twitterで「CSSアニメーション」「CSSヤクザ」というワードがたくさん飛び交って、とても嬉しいです。 これからもCSSと共に新しい表現を模索していきますのでぜひお楽しみに！
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ 2016年12月度
思わずクリックしてコンテンツを読み続けたくなるような、コピー&ペーストで利用できる最新 HTML/CSS スニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、今後のデザイン制作に活用してみてはいかがでしょう。 「Run Pen」をクリックすることで読み込みが開始されます。右下に表示された「Return」で再読み込みし、左上のHTML/CSS/JSタブを切り替えることで、それぞれのスタイリングを確認できます。実際にカスタマイズしたいときは、右上の「Edit on Codepen」をクリックしましょう。 詳細は以下から。 ウェブをもっと面白く！コピペ可能なHTML/CSSスニペット45個まとめ Fixed Disappearing Scrolling Header スクロールすると表示されている文字テキストがフェードアウト
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[CSS]画像やボタンなどのクリック・ホバー時にCSS3アニメーションを簡単に与えることができる -All Animation
画像やボタンなどの要素にclassを与えるだけで、さまざまな面白いCSS3アニメーションを利用できるスタイルシートを紹介します。 トリガーにjQueryを使うことで、クリックやホバーなどのアクションでも簡単に利用できます。 All Animation All Animation -GitHub All Animationのデモ All Animationの使い方 All Animationのデモ デモでは数多くのCSS3アニメーションが楽しめます。 ほんの少しですが、gifアニメーションにしてみました。 ぶるぶる震えて拡大して、フェードでスライドして、ぱたっと開いて、ぷら〜んと落ちます。 実装できるアニメーションの一覧 All Animationの使い方 アニメーション自体はCSSで、クリックなどのトリガーにjQueryを使用します。 もちろん、ホバーなど他のアクションを利用することもでき
Magic CSS3 animations by miniMAC - minimamente
Come sapete, amo molto il linguaggio CSS ed in particolare mi piace sempre andare oltre, in questo caso ho voluto creare un pacchetto di animazioni in CSS3 che potrete usare liberamente per i vostri scopi e quindi nei vostri progetti web, si chiama Magic! Il progetto è hostato anche su GitHub, questo per avere i migliori pareri dai migliori sviluppatori e quindi migliorare il codice, renderlo il p
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】jQueryでパラパラアニメを実現するプラグイン | バシャログ。
ノストラダムスのことも思い出してあげてください。minamiです。 jQueryを使ってちょっとしたアニメーションを作ることも多いかと思いますが、jQuery.animateのようにCSSのプロパティをいじってアニメーションするのに加えてちょっとだけgifアニメのようなことができたらな～ということでjQueryのプラグインを作ってみました。 まずはサンプルをごらんください。 サンプル アニメーションの出来はともかくとして、動いています。STOPボタンを押すと途中で止めることもできます。 しくみ 用意するもの アニメーション用png（スプライト） jQuery※サンプルではv1.8.2 jquery.backgroundpos.min.js jquery.limitAnime.js まずアニメーション用の画像ですが、下記のようにコマを均等な幅で作った一枚の画像を用意します。これを要素の背景画
[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ
CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。
[JS]木の葉が木枯らしに舞うように軽やかなアニメーションでコンテンツを次々に表示するスクリプト -Windy
画像や見出し・パラグラフなどを配置したパネルを木枯らしに舞う葉っぱのようなアニメーションで次々に表示するjQueryのプラグインを紹介します。 Demo 3: jQuery UI Sliderを使ったタイプ Windyの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.windy.js"></script> Step 2: HTML コンテンツはリスト要素で、各アイテムに画像や見出し・パラグラフを自由に配置できます。 <ul
緩急をともなったイージングのアニメーションを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のスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
[DEMO]jQueryで作るアニメーションするマウスオーバーボタン基本５種 | webOpixel
jQueryで作るアニメーションするマウスオーバーボタン基本５種 フェードイン・フェードアウトで切り替わるナビゲーション くるっと切り替わるナビゲーション 何かが追尾するナビゲーション 拡大するナビゲーション 横からぐいんって伸びるナビゲーション 横からぐいんって伸びるカスタム
[JS]画像にモザイクをかけたり、点描状にするちょっと面白いスクリプト -SeuratJS
アニメーションで点描に paper.seurat({ imageSource: 'circus.png', attributes: {r: 2, stroke: "none"}, animator: function(elm, x,y,step){ var anim = Raphael.animation({r: 7}, 350); elm.animate(anim.delay(35*y)); }); 点描をアニメーションで動かします。 点描のアニメーション paper.seurat({ imageSource: 'eiffle-tower.png', animator: function(elm,x,y,step){ var anim = Raphael.animation({cx: 2, cy: 2, r: 1}, 2e3, function(){ var anim = Raphael
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://ameblo.jp/ca-1pixel/entry-11497184837.html
CSS3の制作をぐっと楽にする厳選20のオンラインツール
[JS]これはワクワクする、3Dのスペースに美しい光のエフェクトを与えるスクリプト -Photon