// tixy - creative code golfing // click the dots for more info // use 32 characters or less
トランジション周期表は、クライアントワークでよく使われる画面切り替え表現を抽出し、元素記号表のようにルールをもとに並べたものです。
先日、当ブログで紹介したThe State of CSS 2020（紹介記事）に使用されているホバーエフェクトが話題になっていたので、紹介します。 テキストリンクをホバーすると、ラインを引くまでは普通のアニメーションですが、ホバーを外した時に通常とは逆方向で元の状態に戻ります。 ラインが一方向にスーッと通り過ぎるような感じです。
年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)
デモページ ソースダウンロード 線を使ったアニメーションは、流れ星や紙吹雪、風の動きなど、さまざまなモチーフの表現をより豊かにしてくれます。 今回はTHREE.MeshLineを使い、リボンのように滑らかに線が動くアニメーションを作る方法を、5つのデモとともにご紹介します。オリジナルのアニメーションを作る際は、ぜひ参考にしてみてください。 THREE.MeshLineとは 筆者は2年前から、Jaume Sanchez EliasがThree.js用に作成したライブラリ『THREE.MeshLine』を使用して、WebGLでヌルヌルと動く線を作りはじめました。 THREE.MeshLineの特徴は、Three.jsが長年抱えてきた「線の幅が変更できない」という問題に取り組んでいる点にあります。MeshLineは、幅のパラメーターをサポートしていないGL_LINEメソッドのかわりに、ビルボード
tone.js demos by @mattdesl Some examples using Tone.js for interactive and procedural sound. Click the play buttons to hear the audio.
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
CSSアニメーションCSSアニメーション サンプル集の続編です。 1日1個30分、CSS3でアニメーションパーツをひたすら作り続けるというもの。 前回の記事からサンプルが増えてきたので、第二弾としてまとめました。 Rainbow Ring LoadingローディングアイコンはCSSアニメーションの練習テーマとしてベスト。 mix-blend-mode と fliter を駆使して、虹のような表現ができる。 See the Pen OnlyCSS: Rainbow Ring by Yusuke Nakaya (@YusukeNakaya) on CodePen. mix-blend-mode は、フロントエンドエンジニアとデザイナーの摩擦を改善する、超画期的なプロパティ。 もう乗算でもスクリーンでもなんでも来い！ Night Rider Loading往年のナイトライダー風CSSローディング
a { background: linear-gradient(to bottom, var(--mainColor) 0%, var(--mainColor) 100%); background-position: 0 100%; background-repeat: repeat-x; background-size: 3px 3px; color: #000; text-decoration: none; } a:hover { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.
![[CSS]テキストリンクのホバー時に、波線をうにょうにょとアニメーションさせるスタイルシートのテクニック | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/d41a2b3d32f975af021789ebc336e7dd920a95d7/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201804%2F2018101603.gif)
ボタンや画像にカーソルを乗せた時の反応って大事ですよね。リンクするエリアにカーソルを合わせた時に、カーソルが指のアイコンに変わったり、テキストの色が変わったりすれば、カーソルが乗ったという事が認識しやすくなります:)。 それに加えて、ちょっとしたエフェクトがあれば、温度や感触や、世界観まで伝えられるかも。 ふわっとする 下のサンプルみたく、:hoverを使ってスタイルを指定しておけば、カーソルが乗った時に、そのスタイルが適用されます。 けどそれだけだと、カチッと切り替わるだけ。 a:hover { color: #dc6688; text-decoration: inherit; } サイトの雰囲気にもよるけれど、もちょっとだけ柔らかい印象にしたいなって時には、ふわっとするとよいかもです。文字色の変わり方と、下線の消え方を滑らかにすることで、ふわっとした感じになります:)。 この切り替わり
Easily add high-quality animation to any native app. Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images. Get Started Learn more › Why Lottie? Flexible After Effects features We currently support solids, shape layers, masks, alpha mattes, trim paths, and dash patterns. And we’ll
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
GMUNK is a visionary whose creativity and innovation span a diverse range of mediums, and has established himself as one of the top visual design directors in the world. Utilizing a fusion of psychedelic themes and richly textured palettes, his signature style is enigmatic, atmospheric, and metaphysical – much like the Munky himself.
The original english version of this page is newer and may contain information this translation does not have! Click here to view the english version. vvvvは多目的なツールキットです。 グラフィカルにプログラムを組み立てる開発環境です。 非営利目的の使用は無料です。 vvvvはオーディオ、ビデオ、３Dアニメーション、インターネットといったコンピュータで扱う一般的なメディアを使ったワクワクするような作品制作に適しています。前述のメディアコンテンツを作成・変換するのに加え、vvvvは様々な外部デバイスからの入力を受け取ったり出力を生成したりするのも得意です。以下にvvvvの主な能力や特徴を紹介しましょう： ランタイムグラフィカルプログラミング
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
