フロントエンドから始めるアニメーション 最強のライブラリGSAP3を手に入れよう - ICS MEDIA
今日では、ほぼすべてのウェブサイトにアニメーションが使われていると言っても過言ではないでしょう。派手な3Dアニメーションから、UIのマイクロインタラクションまで、その物量や時間のスケールはさまざまです。 アニメーション技術もCSSやSVG、Canvasと多岐に渡り、こんな表現まで！？ と驚くようなものも増えました。 しかし、複雑なアニメーションになるほどコードは煩雑になり人間の手には負えなくなります。イメージはあるのに具現化できない！ そんな悔しい思いを抱えたまま諦めるしかないのでしょうか？ いえ、道具です。道具を使うのです。本記事ではイメージをダイレクトに表現する手段としてのアニメーションライブラリGSAP 3について紹介します。 本記事を読むことで、以下の知識が手に入ります ウェブにおけるアニメーションの重要性 アニメーションライブラリとは？ 強力なアニメーションライブラリGSAP 3
アニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSS・「Bar chart race generator」 - かちびと.net
Bar chart race generatorはアニメーションしながら動的に順位が入れ替わるバーチャートを生成できるOSSです。Bar chart raceって言うんですね。初めて知りました。 JavaScriptとCSSで作られています。CSVからデータを読み込み、アニメーションするバーチャートを生成する事が出来ます。 見せ方としてはなかなか面白いんじゃないかなぁと思います。サービスとして展開するならEmbed出来ると良いですね。ライセンスはMITです。 Bar chart race generator
Homepage | GSAP
GSAP allows you to create jaw dropping scroll effects with minimal code for maximum impact. Scroll Plugins Infinitely Flexible, Highly Optimised Debounced events, pre-calculated intersection points, synced updates and throttled resize recalculations. We tackle performance headaches so you can focus on the fun stuff.
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説
JavaScriptの非同期処理Promise、AsyncとAwaitの仕組みをGIFアニメで解説した記事を紹介します。 ⭐️🎀 JavaScript Visualized: Promises & Async/Await by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コールバック地獄 Promiseの構文 イベントループ: Microtasksと(Macro)tasks AsyncとAwait はじめに JavaScriptのコードが期待通りに実行されないことに悩まされたことはないですか？ おそらく、関数が不規則に実行されたり、予測できないタイミングで実行されたり、実行が遅れたりしたことがあるかもしれません。そして、ES6で導入された新機能Promiseが原因かもしれません！ 何年も
文章内に折れ線グラフを挿入する
Result 非依存のvanillaなコードで動作します データを元にグラフをcanvasで生成し、挿入します。データは配列で管理します javascript/** * データとclass */ let stonks = document.querySelectorAll(".stonk"); data = [ [ 420, 700, 500, 480, 460, 490, 390, 420, 550, 340, 320, 240, 180, 160, 200, 40, 0 ], [1, 3, 2, 3, 1, 2, 3], [13, 30, 12, 3, 51, 20, 31] ]; /*グラフのスタイル*/ const options = { lineWidth: 2, color: "#E3342F" }; /** * Class */ class Stonk { construct
タグマネージャとJavaScriptを使って構造化データを生成する方法をGoogleが解説
[レベル: 上級] JavaScript を利用して構造化データを生成する方法を解説するドキュメントを Google はデベロッパーサイトで公開しました。 Google タグマネージャおよびカスタム JavaScript を使ったやり方を説明しています。 タグマネージャで構造化データを動的に生成 手順の詳細はドキュメントを読んでいただくとして、この記事では特に気にかけておくべき点に触れておきます。 カスタム HTML で作成 タグマネージャで、構造化データ用に構成するタグはカスタム HTML です。 ページ内容に応じて動的に構造化データを生成するために変数を使えます。 変数の例はドキュメントで参照できます。 SSR の利用可能 サーバー サイド レンダリング (SSR) を実装している場合は、構造化データの生成も SSR に含めることができます。 Googlebot のレンダリングにかかる
JavaScript・GTM を使った構造化データの実装 | Google 検索セントラル | ドキュメント | Google for Developers
フィードバックを送信 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 JavaScript を使用して構造化データを生成する 最新のウェブサイトでは、多くの動的コンテンツの表示に JavaScript を使用しています。JavaScript を使ってウェブサイトに構造化データを生成するには、注意点がいくつかあります。このガイドでは、おすすめの方法と実装の手順について説明します。構造化データを初めて使用する場合は、構造化データの仕組みについてをご覧ください。 JavaScript を使って構造化データを生成する方法はいろいろありますが、一般的なのは次の方法です。 Google タグ マネージャー カスタム JavaScript Google タグ マネージャーを使用して動的に JSON-LD を生成する Google タグ マネージャーは、コードを編集するこ
地味に便利！ダミー画像をSVGで生成するスクリプト、ローカルでもオンライン環境でも利用できる -holder.js
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです！ holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
任意の画像と同じ色の影を作るシンプルなスクリプト・「cosha」
coshaは任意の画像と同じ色の影を作るスクリプトです。上サンプルのようにステンドグラスのように同じ影が出来ています スクリプトは非常に軽量で依存性もありません。手軽で使いやすい印象です。だいぶ前ご紹介したImage-shadowよりも少ないコードで実装されていました コンテンツ次第では自然にも不自然にもなるので使い方に注意という感じでしょうか。ライセンスはMITとの事 cosha
Webページやスマホアプリにパノラマ画像のコンテンツを簡単に実装できる軽量スクリプト -Panolens.js
360度のパノラマ画像をブラウザ上で表示できる、軽量スクリプトを紹介します。 パノラマ画像を見るだけでなく、パノラマ動画、リンクコンテンツ、物語コンテンツなど、インタラクティブなさまざまなコンテンツを実装できます。 Panolens.js Panolens.js -GitHub Panolens.jsの特徴 Panolens.jsのデモ Panolens.jsの使い方 Panolens.jsの特徴 Panolens.jsはイベント駆動型で、WebGL対応のパノラマビューアーです。 パノラマは水平方向をはじめ、垂直方向・拡大縮小にも対応しています。 Three.JS（3Dフレームワーク）をベースに実装された軽量のスクリプトで、カスタマイズも優れています。 Panolens.jsのデモ デモではPanolens.jsで実装されたさまざまなパノラマを楽しめます。
Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid
カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、静的コンテンツにも対応しています。 Magic Grid Magic Grid -GitHub Magic Gridの特徴 Magic Gridのデモ Magic Gridの使い方 Magic Gridの特徴 Magic Gridは、高さが異なるアイテムでもグリッドに揃えてレイアウトすることができます。高さを調整するために、下部に異なるスペースは必要ありません。 高さが揃っていたり、たくさんの行にそれぞれが何行にまたがっているか定義できる場合はCSS GridやFlexb
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方
今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、どうしてもjQuery等のライブラリに頼らざるを得ません。 この手のライブラリの有名どころは［jQuery Masonry］ですが、［Magic Grid］は同じように簡単に実装できる点が大きな魅力です。 ［Magic Grid］の挙動のサンプル ［Magic Grid］を実際に試しているGif画像です。 ウィンドウ幅を変更すると、配置されたカード型の要素が移動して再配置されます。 スムーズで気持ちいい動作ですね。 GitHub : Magic Grid JavaScript
JavaScriptでエラーの原因となるHoisting（巻き上げ）、その仕組みをGIFアニメで分かりやすく解説
JavaScriptでエラーの原因となるHoisting（巻き上げ）はなぜ起こるのか、その仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🔥🕺🏼 JavaScript Visualized: Hoisting by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScript Hoisting（巻き上げ）の仕組みをGIFアニメで分かりやすく解説 Hoisting（巻き上げ）は、JavaScriptでのエラーの原因をGoogleで検索しても分からず、StackOverflowなどで質問した際に目にする用語の1つです。「そのエラーはHoisting（巻き上げ）が原因で発生している🙃」と言われることがあります。 Hoisting（巻き上げ）とは何のことでしょうか？
あまり知られていないかもしれない、CSS-in-JSを実装するライブラリでできる5つの便利なテクニック | コリス
CSS-in-JSはJavaScriptを使用してコンポーネントをスタイルするテクニックです。 Reactには従来のCSSに加えて、スタイリングのオプションとして、インラインスタイルとCSS-in-JSがあります。 CSS-in-JSを実装するライブラリでできる5つの便利なテクニックを紹介します。 5 things you can do in CSS-in-JS that you didn’t know about originally published at LogRocket 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 他のスタイル付きコンポーネントを参照 2. ライブラリの機能をJSSで拡張 3. 複数のアニメーションをキーフレームで連結 4. グローバルスタイルを宣言 5. スタイルによるコンポーネ
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
画像を遅延読み込みしてみよう！Intersection Observer編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
年齢なんか関係ない！ 人生史上今が一番！ Webのパフォーマンスもブチ上げていきたい、フロントエンドエンジニアのザワです。 lazyload（レイジーロード）、Web業界では耳慣れたワードになってきたのではないでしょうか。 Webページの表示を高速化するために、ページロード初期時には画像は読み込まず、表示したいタイミングでロードを開始するアレです。「lazyload」だの「遅延読み込み」だのいってますが同じことを指しています。気分と話し相手によって変えていきましょう。 今回は2つの方法を2回に分けて実践していきます。 Intersection observerを使用する方法 loading属性にlazyを適用する方法 Intersection observerが一般的になる以前は、scrollイベントで随時要素の位置を取得して、みたいなことをやっていたと思いますが、そんなオールドスクールな
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2021年最新】GSAPの「ScrollTrigger」を使って爆速でスクロールアニメを実装する
Revealing Hero Effect in CSS and JavaScript | CodyHouse
Stacking Cards | CodyHouse