高速かつシンプルで使いやすいJavaScriptアニメーションライブラリ・「luge」
lugeは高速かつシンプルで使いやすいJavaScriptアニメーションライブラリです。プラグインを追加して拡張する事も可能です。 読み込むだけでhtmlタグに自動でデバイスやブラウザのclassも付与されるので異なる環境での挙動の微調整等もしやすくなっています。 <link rel="stylesheet" href="luge.css"> <script src="luge.js"></script>使い方も簡単です。上記のようにファイルを読み込んで指定されたカスタムデータ属性を付与する、といった流れで実装出来ます。ただし、CSSは組み込みのアニメーションが不要なら読み込む必要はないそうです。 サイトプリローダー、スクロールに応じたアニメーション表示、ページ遷移のエフェクトなど、よく見かけるアニメーションのあれこれを管理できるのでアニメーションに時間を取られたくない開発者の方にお勧めで
「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）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「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」をどのように使えばいいのか詳しく見ていきましょう！ 利用するにあたり、ユーザー登録や面倒な設定は一切不要です。ブラウザからサイトにアクセスするだけで以下のような編集エディタが表示されます。 このエディタ内はマウスやタッチ操作で自由に線を描画できるようになっています。 そこで、まずは次のよ
CSSのみで、クリックするとGIFアニメが再生されるやつ
Result 画像をクリックするとGIFアニメが再生される、みたいなやつです。 マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと。 方法はこの手のトリックではお馴染みのinputを利用する形となります。 csslabel.clicktogif {/*再生ボタン*/ background: url('image.png') DimGrey no-repeat center center; display: block; float: left; } label.clicktogif:hover, label.clicktogif:focus-within {/*再生ボタン、マウスホバー用*/ background: url('hover.png') DarkSlateGrey no-repeat center center; disp
年間15万円でビジネスアニメが作り放題！パワポのスキルがあれば動画を作れるツール「VYOND」とは
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
SVG+CSS AnimationでLive2Dを動かす - はるさめスープ
年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい！！！ モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴や使い方など | Web Design Trends
Web上でアニメーションを表示するなら「Lottie」がおすすめ！特徴と使い方など Webサイト上でアニメーションを実装する場合、簡易なアニメーションはCSSやJavaScriptで手軽に作ることができますが、リッチなアニメーションを作ろうと思ったらコード量も結構なボリュームになってしまいます。 そんな時におすすめなのが「Lottie」です。LottieはAfter Effectsで作成したアニメーションを簡単にWebやアプリで表示することができ、パフォーマンスにも優れています。 今回は、Lottieの特徴や使用するメリット、使い方などをご紹介したいと思います。 Lottieとは LottieはAirbnbが公開しているアニメーションを表示するためのライブラリです。スマホなどのネイティブアプリがメインのようですが、Webサイト上でも高クオリティのアニメーションを簡単に表示することができ、非
2019年注目のJavaScriptアニメーションライブラリ11選 - Qiita
こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。 そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの、非常に便利ないくつかのライブラリをまとめてみました。 アドバイス: JSコンポーネントを個別にパッケージ、公開するのにはBitを使いましょう。異なるプロジェクトやアプリケーション間で共有したりすることができ、チーム内でより迅速にアプリケーションを構築するこ
ブラウザでイラストを複数描いてGifアニメーションやmp4でダウンロードできるオープンソースのソフトウェア・「ANIMATE IT」
ANIMATE ITはブラウザでイラストを複数描いてGIFアニメやmp4の動画ファイルとしてダウンロードできるアニメーションドローツールです オープンソースとしてソースコードも公開されています。mp4には音声も含める事が出来るみたいです。複雑な機能はない、シンプルな作りですがそれゆえ誰でも簡単に作成できる印象でした。 また、Blockstackとも連携可能で、データの保存もブロックチェーン技術を使ってセキュアに行われるよう設計されています。 使ってみる 試しにその場で思いついたオリジナルキャラの、中身が出かけているチョコレートまんじゅう君を書いてみました。 この手のツールに不慣れな僕でもHelpを読まずにどう操作すればいいかある程度把握できる程度には簡単そうです。(絵を描けるとは言ってない) まぁこの手のアプリで絵を描けるような方はそもそもこういうものを作れるソフトウェアを日々使っていると
これなら簡単！CSSのみで、ボタンやアイコンに気持ちいいさまざまなアニメーションを加える -UI interactions
ボタンやアイコン、アロー、ハンバーガーメニューなど、UIでよく使用される要素にインタラクションを加えるスタイルシートを紹介します。HTMLはbutton要素だけのシンプルな構成で、classを与えるだけで簡単に利用できます。 UI interactions UI interactions -GitHub UI interactionsは、CSSのみでUIにインタラクションを加えるスタイルシートです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 UI interactionsの使い方 すべてのコンポーネントには、デフォルトとアクティブの2つの状態があります。状態の切り替えは、is-activeのclassに基づいて発生します。 HTML HTMLは、button要素にclassを与えるだけでのシンプルな構成です。
Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
JavaScriptでソースコードやコマンド操作をアニメーション動画に変換できるライブラリ「Glorious Demo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、数行のJavaScriptを記述するだけでソースコードやターミナルからのコマンド操作をアニメーション動画に変換できるライブラリをご紹介します！ 非常にシンプルな記述で誰でもすぐに試すことが可能なうえ、HTMLファイル1つだけあれば実行できるのでWebサイトやブログなどにも公開できるスグレモノです。 なお、JavaScriptはpaizaラーニングの「JavaScript入門編」で学ぶことができます。そちらも合わせてチェックしてみてください。 【 Glorious Demo 】 ■「Glorious Demo」の使い方 それでは、最初に「Glorious Demo」を使えるように導入準備をしていきましょう！ 方法は2種類ありまして、1つ目はnpmからインストールして使う方法です。 npm install @glorious/demo --
誰でも超ハイクオリティなデータの可視化が実現できるWebサービス「Flourish」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも簡単にクオリティの高いデータの可視化（データビジュアライゼーション）を実現することができる無料サービスのご紹介です！ アニメーションも自動生成されるうえ、ネット上に公開したり自分のブログやサイトに挿入することも簡単にできます。 また、上級者向けにJavaScriptを活用した独自テンプレートの作成機能が用意されているなど、自由度の高いサービスなのでご興味ある方はぜひトライしてみてください！ 【 Flourish 】 ■「Flourish」の使い方 それでは、実際に「Flourish」を触りながら、どのように始めたらいいのかを見ていきましょう！ まずは、サイトのトップページにある「Sign up」から無料のユーザー登録をしておきます。 メールアドレス、パスワード、ユーザー名を入力すればすぐに登録は完了します！ すると、自分専用の「マ
誰でもWeb上でリアルに動くHTML5アニメーションを製作できる「Animatron Studio」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも簡単にHTML5で作られたアニメーションを製作できるWebサービスをご紹介します！ Webサイトやサービスに組み込んで動きのあるコンテンツを作成したり、企業ロゴやバナー広告、商品紹介、インフォグラフィック…など、とても幅広い分野に応用することが可能です。 ブラウザさえあれば今すぐアニメーションを作れるので、ぜひみなさんもオリジナル作品を作ってみてください！ 【 Animatron Studio 】 ■「Animatron Studio」とは？ 「Animatron Studio」は、とにかく誰でも簡単にアニメーション製作ができることを前提に設計されています。 豊富なイラストやテンプレートを自在に組み合わせることで、わずかなマウス操作だけで楽しいアニメーションを次々と作っていくことが可能です。 例えば、以下のようなアニ
Micron.JS - a [μ] microInteraction Library
Add Interaction Easily add an interaction to the DOM element with data attributes. You can add the click interaction to every element whether it's Button, SVG or a Paper. Add Interaction to the element with data-micron="interaction" Control Interaction's duration with data-micron-duration="number" Control Interaction's timing-function with data-micron-timing="type" Read Docs Bind Interaction Easil
![Micron.JS - a [μ] microInteraction Library](https://cdn-ak-scissors.b.st-hatena.com/image/square/81e1688be0bdbeea6a1a8d1b185ca66351270e8d/height=288;version=1;width=512/https%3A%2F%2Fwebkul.com%2Fblog%2Fwp-content%2Fuploads%2F2018%2F01%2Fmicron-card.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - Mukosame/Anime2Sketch: A sketch extractor for anime/illustration.
CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」:phpspot開発日誌
コピペで簡単！ボタンやテキストリンク、アイコンで使えるCSSのさまざまなアニメーション -CSSeffectsSnippets
