Animon
Animate elements entering the viewport Animon gets out of the way and allows you to describe animations using class names and data-attributes. Based on intersectionObserver, Animon weighs only 0.9kb, with zero dependencies. Learn how to use it. Usage Import the library and its styles from a CDN: <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script src="https://unp
サイトやアプリの使い心地を改善！UIアニメーションを良くする実践テクニック、小技7個まとめ
実際のサンプル例を確認しながら、UIデザインの「良い」アニメーションを「より良く」してみましょう。ほんの少し調整を行うだけで、UIマイクロインタラクションをより魅力的で、ユーザーにも分かりやすく表現できます。 たとえば、リスト形式で並べたコンテンツにちょっとした工夫を加えるだけで、よりつながりのあるUIパターンを演出できたり、コンテンツの関係性を考えたアニメーション遷移、ボタンをクリックするなどユーザーに行ってもらいたいものに注意を引くことも、ほんのわずかなUIマイクロインタラクションによって実現できます。 今回はこれらのサンプル例を作成するために、Material Motion、IBMのアニメーション原則、Motion in Manifestoのガイドラインを参考にしています。 また今回のサンプル例は、InVision Studio（現在は限定ユーザーのみのアーリーアクセスで、メール登録
ニートに学ぶCSS Animation演出講座 １時間目 - 魔法少女サイト
あいさつ ほんとはミライアカリになりきって、記事書きたかったんですが怒られそうだったんでやめます ↓ ニートに教わっても面白くないと思うので、僕のことを美少女だと思い込んで講座を受けてください。 はい。改めまして。 ハロー、yuki540だよ！ﾋﾟﾛﾘﾝ 結構、需要があったみたいなので今回から僕が今まで作ったcss animation作品の演出パターンを解説していくよ！ ホントにやってることは単純でcssの初歩的な知識で再現できるものなので、みんななら10秒あれば理解できると思います！ この講座では、sassとかpugは使わず、あくまで素のhtml, cssを使っていきます。 それでは、早速やっていきまーしょう！ 今回のアニメーション 「ミライアカリに学ぶCSS Animation演出講座」として最初にこれを解説します pic.twitter.com/rgHKA0TWpy— yuki540
JavaScript製アニメーションライブラリの原理を理解しよう - ICS MEDIA
アニメーションは画面の遷移やボタンの演出など、あらゆるウェブコンテンツやアプリケーションで利用されています。CSSならanimationやtransition、JavaScriptであればCreateJSやTweenMaxなどのJavaScriptライブラリを利用して制作している人がおおいでしょう。 私はFlashの全盛期に「Tween24」というアニメーションライブラリを自作していたこともあり、アニメーションには人一倍の思い入れがあります。しかし、その仕組みを理解している方は意外にも少ないのではないでしょうか。 ライブラリやフレームワークといったテクノロジーは、仕組みや原理を理解しておくことで備わっている機能をより活用でき、また応用の幅も広がります。今回はアニメーションライブラリの基礎部分の実装を交えながら、アニメーションの仕組みを紹介します。 ※この記事はアニメーションの原理の説明に焦
Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside
この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
CSSアニメーションを簡単に実装できるライブラリ 10＋ - NxWorld
ここ数年でちょっとしたアニメーションはJSではなくCSSで実装するということが増えたと思いますが、それを手軽に実装したいときに便利なCSSアニメーションライブラリをまとめてみました。 いずれも必要なCSSを読み込んで要素に特定のclassを付与するだけと使い方も簡単で、デモもしっかり用意されているものばかりなので動きの確認も容易です。 また、簡単な操作でCSSアニメーションを実装するのに必要なコードを出力してくれる便利なジェネレータも併せて紹介します。 Animate.css 共通classである.animatedと各アニメーション用のclassを付与することで実装でき、アニメーションをループさせるclass（.infinite）も用意されています。 76アニメーション用意されており、ライセンスはMITです。 cssanimation.io 基本的には共通classである.cssanima
CSS3でアニメーション！transitionとanimationまとめ（サンプル付き） フラップイズム
こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ - Speaker Deck