[B! animation] kasahiのブックマーク

Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita

この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11

kasahi 2022/05/15

リンク

This Anime Does Not Exist

より良く、よりカスタマイズ可能なウェブサイト: Holara AI 創造性コントロール 0.5 より高い創造性の値は、AIがより創造的で詳細であるだけでなく、乱雑で奇妙であることを示します速度コントロール 1.5 スペースキー: 一時停止, 引っ張る: グリッドを移動, クリック: 新しいタブで画像を開く F: フルスクリーンモード, Z: ホバーでズーム, V: ビデオモードアニメとAIに関する最新情報はTwitterで見つけることができますクリエイター: aydaoはAIモデル, nearcyanはウェブサイト, obormotはJS, gwern (TWDNE), arfa (TFDNE, TPDNE), shawwn, skyli0n, tensorfork, TFRC からの助け情報: このウェブサイトについて, 詳細な記事ダウンロード: 画像など

kasahi 2022/04/24

リンク

CSSスプライトとstepsを使ってアニメーション画像を作ろう

2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move

kasahi 2016/01/24

リンク

心地よいアニメーションを求めて - クックパッド開発者ブログ

こんにちは、買物情報事業部の三浦です。日々アプリを使っていて、ふとしたところでさりげないアニメーションや気の利いた効果音があると心地よく感じますね。 UIKitには手軽にアニメーションを実装できるようにAPIが用意されています。少し工夫するだけで効果的な動きを作ることができます。サンプルを見ながらみていきましょう。 Basic まずはUIViewのクラスメソッドのシンプルなアニメーションです。オブジェクトを下にアニメーションさせます。 UIView.animateWithDuration( 0.5, delay: 0.0, options: nil, animations: { () -> Void in self.circle.center = CGPoint(x: 0, y: 100) }, completion: nil) 動きの加減をコントロールするイージングもUIViewA

kasahi 2015/10/07

リンク

[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ

最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

kasahi 2015/07/29

リンク

[iOS]TwitterアプリのようにLaunch Screenがアニメーションするように見せる技 - Qiita

ツイッターの公式アプリを使ったことがある人はこちらの起動画面を見たことがあると思います。ツイッターアイコンが現れ、そのアイコンがそのまま拡大して始まります。Launch Screenがアニメーションするのは海外製のアプリに時々みられる手法です。これと同じようなことを弊社の無料の絵本アプリ PIBO(ピーボ)で実装してみました。そのやり方のサンプルを紹介します。やり方手法は至って簡単です。・①LaunchScreenを設置する・②LaunchScreenと同じViewを起動時に表示する・③そのViewをアニメーションさせるの３工程です。やっていることは結構簡単です。 ①LaunchScreenを設置する普通にLaunchScreenを作ればOKです。・LaunchScreen.xibにImage Viewを追加してlogo画像を設置します。・logoに対しAdd New

kasahi 2015/03/24

リンク

GIFアニメからAPNGの時代に！次世代画像形式APNGを使いこなそう - ICS MEDIA

APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは

kasahi 2014/10/14

リンク

[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス

Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tux sudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p

kasahi 2014/07/20

リンク

CSS3アニメーションの基本

CSS3アニメーションの基本：脱エンジニアっぽさ！クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ）エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。

kasahi 2013/07/21

リンク

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう - ICS MEDIA

HTML5で複雑なアニメーションを実現する最適な方法とは？ CreateJSを使って容量もパフォーマンスも最適化しよう HTML5で複雑なアニメーションを実現する方法にはいつか方法がありますが、それぞれの手法について容量とパフォーマンスのメリット・デメリットを検証してみたいと思います。スプライトシートを使う方法ベクターアニメーションを使う方法スプライトシートビルダーを使う方法おまけ：GIFアニメーションを使う方法おまけ：Flashアニメーションを使う方法スプライトシートを使うスプライトシートとは映画のコマのようにアニメーションの全コマを画像として用意しておいて、順番に高速に切り替えることでアニメーションを実現する方法です。enchant.jsやCreateJSなど多くのJavaScriptのフレームワークで採用されており、もっともスタンダードな方法です。表現の再現性が高いう

kasahi 2013/05/20

リンク

JavaScript アニメーションのデザインパターン

JavaScript でアニメーションを作るアニメーションとは何？ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作るこんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からないこんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w

kasahi 2012/05/15

リンク

【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ

まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる

kasahi 2012/03/30

リンク

はてなブックマーク

タグ

関連タグで絞り込む (17)

animationに関するkasahiのブックマーク (12)

お知らせ

今週のはてなブックマーク数ランキング（2024年8月第3週）

今週のはてなブックマーク数ランキング（2024年8月第2週）

今週のはてなブックマーク数ランキング（2024年8月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス