Webサイトにアニメーションは必要あるのか。ないのか。どっちなのか。｜Takumi HASEGAWA (unshift Inc.)
まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト 嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ
Live2D Cubism | イラストに命が宿る感動を - 描かれた「絵」そのものを自在に動かす表現技術。
2024.03.28ニュースCubism 5.1 alpha版リリースのお知らせ～ダウンロード方法もご紹介！～2023.09.21ニュースLive2Dの世界一を決めるコンテスト『Live2D Creative Awards 2023』作品募集開始！10月16日(月)まで2023.09.21ニュース[期間限定] Live2D JUKU 基本講座無料公開中！2023.09.21セールCubism 5 リリース記念セール実施中！2023.09.21アップデートCubism Editor 5.0.00 正式版リリース！2023.11.16ニュースLive2D主催のイベント 『alive 2023』参加申し込み受付中！2023.11.24ニュースLive2D Creative Awards 2023 ファイナリスト21名を公開！表彰式は12月1日(金)開催の『alive 2023』にて実施！2023
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
マイクロインタラクションからクリエイティブ表現まで！Tween24.jsを使った演出表現 - ICS MEDIA
ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
スクロールに連動するアニメーションを実装する時は、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
変幻自在なグラフィック表現！CSS, SVG, Canvasでマスクを使いこなせ - ICS MEDIA
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例（背景画像の一部を表示している） - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 - ICS MEDIA
「Tween24.js」の新機能！ループやテキストアニメーションなど、ウェブサイトの演出に役立つ機能を追加 「Tween24.js」はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装可能なJavaScriptライブラリです。このライブラリを筆者が開発しているのですが、今年4月に公開したところ大変好評いただきました。 たくさんの要望もいただき、新しい機能を追加したのでアップデート内容を紹介します。今回はアニメーション制作において必要度の高い機能追加をメインに、各機能のブラッシュアップを行っています。 基本的な使い方や導入方法は、前回の記事「新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました」をご覧ください。 今回のアップデート内容 新機能：トゥイーンを繰り返すloop() 新機能：トゥイーンを連続で遅延させるlag() 遅延させ
トレンドウェブサイトから学べ！ JavaScriptで作る本格スクロール演出 - ICS MEDIA
「かっこいいウェブサイト」とはどのようなものでしょう？ ICS MEDIAを見てくださるみなさんであれば、ダイナミックなアニメーションや3次元的な動きがあるウェブサイトに「おっ」と惹きつけられた経験は一度や二度ではないかと思います。たとえば、スクロールに連動したインタラクティブな動きは冒険するようなワクワクした気持ち、没入感を与えてくれます。 『ポーラ2029年ビジョン』 本記事の前半では、話題になったウェブサイトからかっこいいスクロール演出の事例を取り上げ、それらを分析します。 さらに記事の後半では、「自分でも作ってみたいなぁ、でもどうやって実装しているんだろう？」と悩むみなさんに向け、オリジナルのデモを用いて実装を紹介します。 本記事を読んだ後には、「どうやって実装しているんだろう？」と未知の技術に感じていたスクロールアニメーションも、「こうやっていたのか！」と身近に感じられるようにな
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
anime.jsとanimete.cssを使ってサイトを作ってみた。 - Qiita
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve"> <g> <path class="st0 p1" d="M499.2,437.9c0.2,8.2,1,19.2,2.4,32.8v0.6c0,1.1-1.2,1.7-3.5,1.7c-0.9,0-1.4-0.5-1.7-1.5c-3.5-10.6-8.7-18.5-15.7-23.7 c-6-4.6-12.8-6.8-20.4-6.8c-8.9,0-15.9,2.7
【Anime.js入門】軽量で、美しいアニメーションJavaScriptライブラリの使い方 | UX BEAR【ゆえっくま】
【Anime.js入門】軽量で、美しいアニメーションJavaScriptライブラリの使い方by UXBEARJavaScript, テクノロジー2019年9月11日2021年2月2日 最近「jQueryはもう必要ない」という話をよく聞くようになりました。 ただし本格的にReactやVueを使うほどではなく、ちょっとした実装がしたいなと思った時に、単体で読み込むだけで利用でき便利なのが、軽量でシンプルな「マイクロライブラリ」です。 「Anime.js」は、美しいアニメーションを、軽く、高速、かんたんに実装できるJavaScriptライブラリです。 概要
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
需要が高まっているアニメーションを取り入れたWebサイトのデザインプロセスを大公開！【実例あり】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのまきこです。春っていいですよね……ほんとに。 さて、わたしは先日、「JOYSOUND」のスペシャルサイトのデザインを担当させていただきました。カラオケに関するさまざまなデータをインフォグラフィックにして視覚化し、アニメーションさせて楽しげに伝えるような、そんなサイトです。 今回は、そのインフォグラフィックやアニメーションにフォーカスし、デザイナー目線での制作プロセスをご紹介していきます。 視覚化や動きのあるサイトのデザインの仕方などを、LIGのサイト制作例として参考にしていただけると嬉しいです！ はじめに お客様はこんな会社さま 今回、制作をご依頼いただいたお客様は、株式会社エクシングさま。通信カラオケ「JOYSOUND」の運営などを行い、カラオケのさらなる楽しさを追求・提案している企業さまです。 エクシングさまとのおつきあいは、弊社サイトを通じて制作のお問い合わせ
CSSアニメーションでmarquee - Qiita
「ページのこの部分を流れる文字にしたいです」と言われてしまった <marquee>は使いたくない… ときのための、CSSアニメーションを使ったスタイル指定のサンプルです。 ※「【CSS3】全ブラウザ対応！ CSS3 で作る marquee の実装。 - ONZE」さんのコードをもとに可変幅にして依存する前提を極力少なくしたものになります。例示用としてベンダープレフィックス(-webkit-等)も外しています。 /** マーキーさせたい部分 */ .marquee { overflow: hidden; /* スクロールバーが出ないように */ position: relative; /* マーキーの内容部分の位置の基準になるように */ } /* マーキーの内容部分の高さ確保 */ .marquee::after { content: ""; white-space: nowrap; di
jQuery／CSSアニメーション15選【コピペでサイト制作】
【Day 128】 ポートフォリオサイト公開 / 何のアイデアもないまま作り始めたのに、気づいたら没頭しちゃってました。 たくさん足して、たくさん引きました。 1番気に入ってるのはフォントです、ホントです！ よかったら覗いてみてください↓https://t.co/0G6AE2dlQC#100DaysOfCode #Progate — 爆遅でも止まらない35歳ニート (@HEBOCHANS) 2018年12月28日 まずは私のポートフォリオサイトをご覧いただけるとイメージしやすいと思います。 とにかく「カンタンに実装できて動きのあるサイトを作る」がコンセプトでした。 この記事はこんな人にオススメ
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
JavaScript library to animate elements as they scroll into view. スクロールして表示される要素をアニメーション化するJavaScriptライブラリ 要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。 「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。 公式サイト：https://scrollrevealjs.org/ ScrollRevealの使い方 ライブラリ読み込み 使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。 CDNは公式サイトのインストールから読み込みます。 // 最新バージョンの場合 <script src="https://unpkg.com/scrollreveal
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する
