これならコピペで簡単！ HTMLはシンプル、CSSで実装された超軽量のおしゃれなローディング・スピナー -UI Ball
コピペで簡単に使用できる、HTMLとCSS（複雑なものはSVG）で実装されたWebサイトやスマホアプリ用のローディングアニメーションを紹介します。 さまざまなローディングやスピナーが揃っていますが、画像は一切使用されていません。必要な時にさくっと実装できるので、スニペットに登録しておくと便利です。 下記は静止画ですが、もちろん全部アニメーションで動きます。 Loaders -UI Ball Loaders -GitHub ほかにもCSSで実装されたローディングをチェックしたい人は、下記もどうぞ。 CSSで実装されたローディング・スピナーのアニメーションのまとめ UI Ballのローディングはすべて1Kb未満の超軽量で、依存関係はゼロなので、HTMLとCSSをコピペするだけで簡単に使用できます。カラー・サイズ・アニメーションの速度などはCSSで簡単にカスタマイズできます。 MITライセンスで
高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script>使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧めで
あなたのプロジェクトを煌やかにするアニメーションライブラリ18選 - Qiita
Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo 以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Projectの日本語訳です。 help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。 元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。 18 amazing 🤩 GitHub repositories that will hel
スクロールに連動するアニメーションを実装する時は、JSのIntersection Observerを使用すると簡単に実装できる
スクロールに連動するアニメーションはIntersection Observerを使用すると、簡単に実装できます。カードUIがスクロールしてビューポートに表示されると、カード内の要素がアニメーションするUIを実装する方法を紹介します。 ライブラリなどは必要なく、数行のJavaScriptで簡単に実装できます。 Animate on scroll using Intersection Observer by Keerthi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Step 1: カードUIをHTMLとCSSで実装する Step 2: CSSに基本的なアニメーションを追加する Step 3: Intersection Observerを使用する前に、HTMLに変更を加える Step 4: JavaScriptのInt
複数枚の画像や動画をドラッグ&ドロップするだけでSlackやGitHubに投稿可能なAPNGやアニメーションGIFを作成してくれるMac用アプリ「A frames」がリリース。
複数枚の画像や動画をドラッグ&ドロップするだけでSlackやGitHubに投稿可能なAPNGやアニメーションGIFを作成してくれるMac用アプリ「A frames」がリリースされています。詳細は以下から。 A frames(Animated Image Creator)はPhotoプロテクターアプリなどを開発しているTomoya Onishiさんが新たに開発＆公開したAPNG/アニメーションGIF作成アプリで、複数枚の画像か動画ファイルをドラッグ&ドロップするだけでアニメーション画像を生成してくれる機能があります。 A framesはAPNGやGIF作成のための軽量でシンプルなツールです。 APNGかGIFを選択し、複数枚の画像か、動画ファイルをドラッグ＆ドロップすると目的のアニメーション画像が生成されます。SlackやGitHubに投稿すると便利です。 A frames – Mac Ap
CSSの実装方法を少し改善するだけで、Webページの読み込み・表示を最適化するテクニックのまとめ
CSSの記述方法やレイアウトの構築方法で、ページの表示速度、読み込み時に発生するレイアウトのずれ、Webフォントの表示、CSSアニメーション、アクションを起こした時の反応の速度など、ウェブバイタルに大きな影響を与えます。 ウェブバイタル（Web Vitals）を最適化するためのCSSのテクニックを紹介します。 CSS for Web Vitals by Katie Hempenius, Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レイアウトのCSSを改善 画像のCSSを改善 画像によるレイアウトシフトのCSSを改善 WebフォントのCSSを改善 アニメーションのCSSを改善 クリティカルCSS 終わりに はじめに CSSの記述方法やレイアウトの構築方法で、コアウェブバイタル（Core
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
Vue.jsでカテゴリー分けされた画像リストを実装
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
動きが超リアル！「らくがき」を1クリックで高度な3Dモデルに変換できる「Monster Mash」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単に「らくがき」から高度な3Dモデルを作成してアニメーション化までおこなえる無料のWebサービスをご紹介します。 ブラウザからアクセスするだけですぐに使えて、マウスかタッチ操作で適当な「らくがき」を作ったらリアルに動く3Dモデルを一瞬で生み出すことができます。 書き出しオプションも豊富なので、ご興味ある方はぜひ参考にしてみてください！ 【 Monster Mash 】 ■「Monster Mash」の使い方 それでは、「Monster Mash」をどのように使えばいいのか詳しく見ていきましょう！ 利用するにあたり、ユーザー登録や面倒な設定は一切不要です。ブラウザからサイトにアクセスするだけで以下のような編集エディタが表示されます。 このエディタ内はマウスやタッチ操作で自由に線を描画できるようになっています。 そこで、まずは次のよ
Ubisoft、ゲームキャラを自然に動かせる低コストな深層学習モデルを開発
Innovative Tech： このコーナーでは、テクノロジーの最新研究を紹介するWebメディア「Seamless」を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 仏Ubisoftと米コンコーディア大学による研究チームが開発した「Learned Motion Matching」は、ゲーム内キャラクターアニメーションのための深層学習モデルだ。自然なキャラクターアニメーション生成の計算コストを大幅に削減できるという。 従来のモーションキャプチャーデータから場面に適したキャラクターの歩行や走行を行う手法「モーションマッチング」は、柔軟性や前処理時間の短さ、視覚的な品質などで人気が高い。しかし、処理するための負荷や計算コストも大きいのが難点の、ある意味“力技”だ。 今回は、モーションマッチングの良さを維持しつつ、深層学習によってメモリ使用量の削減を目指す。モ
東映、アニメ背景制作をAIで効率化 写真をイラスト風に自動変換、前処理を1/6に短縮
東映アニメーションは3月12日、AIベンチャーのPreferred Networks（以下、PFN）のAI技術を活用してアニメ制作を効率化する実験を行ったと発表した。背景写真をアニメ調やサイバーパンク調に自動変換することで、美術クリエイターが画像の前処理にかける時間を従来の約6分の1に短縮できた。 長崎県佐世保市を舞台にした実験作「URVAN」（ウルヴァン）の制作に、画像処理AIを搭載したPFNの背景美術制作支援ツール「Scenify」（シーニファイ）を活用。佐世保市で撮影した風景写真をアニメ用の背景美術に自動変換し、美術クリエイターの負担を削減した。 背景美術の制作工程は、写真の配置、色調補正、アニメ調に変換、微調整、サイバーパンク調に加工の5段階。Scenifyはアニメ調に変換するとともに、キャラクターの前面に来るパーツと背面パーツに分ける作業や、空白部分を自然に塗りつぶす作業などを担
写真の人物にAIで命を吹き込む｢Deep Nostalgia｣、誰でも無料でお試し可能
写真の人物にAIで命を吹き込む｢Deep Nostalgia｣、誰でも無料でお試し可能2021.03.06 21:0034,926 Andrew Liszewski - Gizmodo US ［原文］ （ mayumine ） ディープラーニングで、故人の顔の表情を蘇らせます。 祖先検索やオンライン家系図を作成サービスを提供するイスラエルの企業｢MyHeritage｣は、先祖などの古い写真の顔を、ディープラーニングの技術で動かすことができるサービス｢Deep Nostalgia｣をリリースしました。まるで、写真を撮られる前のポーズの準備をしているような感じで、AIとはわかっていても、まるで故人がそこで生きているように感じます。 カメラのシャッターを切った前後の1.5 秒ずつの動画が記録される、iOSやiPadOSのLive Photosっぽくもありますね。Live Photosは、シャッタ
キャラクター画像一枚でより表情豊かなアニメーションを生成するシステムを作ってみた
上の動画中のキャラクターはバーチャルYouTuberまたはそれに関連したキャラクターです。この記事中の画像や映像は彼らのファンアート・二次創作です。[footnote] ほとんどの動画内のバーチャルYouTuberはいちから、カバー、774 inc.、のりプロ、KMNZ等の企業様に所属してます。しぐれうい様、神楽めあ様、伊東ライフ様、兎鞠まり様、ノート竹花様、なつめえり様、名取さな様、ユキミお姉ちゃん様、聖女れりあ様、楪穂波様、幽ヶ崎海愛様、花雲くゆり様、ケリン様、ふくやマスター様の画像も使わせていただきました。誠に申し訳ございませんが、切り抜き動画やMADや同人ゲーム等の二次創作と同じように使用許可は全く取っておりません。2019年の記事を（まだ世に出ていない）学術論文にした時は一部の企業様に連絡して許可を頂きましたが、この記事で使用する許可は取っておりません。 私は２０１９年に一枚のキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
音声に合わせ顔の動きを深層学習で作成 Adobeなど「MakeItTalk」開発
2Dアニメーション作成ツール「OPTPiX SpriteStudio」が64bit版macOSに対応／個人アニメーター・ゲーム制作者は無償ライセンスで利用可能
GitHub - Mukosame/Anime2Sketch: A sketch extractor for anime/illustration.
画像を漫画やアニメ用の線画に変換する『Line Drawer』| cre8tiveAI
CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」:phpspot開発日誌