DOM・イベント
JavaScriptでスクロール連動する目次を実装する方法｜現在の見出しを色で表示
JavaScriptで記事本文のh2・h3から目次を生成し、スクロール位置に応じてis-currentを付け替える方法をWebCantaの実装コードで解説します。requestAnimationFrame、aria-current、position: stickyまで確認できます。
ARTICLES
JavaScript
JavaScriptの基礎、DOM操作、イベント、GSAP、Swiperなど、Webサイトに動きと操作性を加える実装方法を解説します。
JavaScript基礎
JavaScriptのdata属性とは？使い方とアニメーション実装を徹底解説
この記事では、JavaScriptのdata属性の使い方を初心者向けに解説します。data-*属性の基本、datasetで値を取得する方法、違うタグを同じ目印でまとめて扱う考え方、CSSからdata属性へスタイルを当てる方法、クリックやアニメーションへの応用まで理解できます。
DOM・イベント
JavaScriptでできることとは？activeクラスでクリック・スクロールアニメーションを実装する方法
この記事では、JavaScriptでできることの中から、クリックイベントとスクロールイベントで親要素にactiveクラスを付与し、CSSでアニメーションを管理する方法を解説します。JavaScriptはきっかけ作り、見た目の変化はCSSに任せる考え方を理解できます。
GSAP
【Gsap】SVGテキストアニメーション
このコードは、GSAPのScrollTriggerを使用して、スクロールイベントに基づいてSVGテキストの色を動的に変更するアニメーションを設定しています。ユーザーがページをスクロールすると、SVGテキストと黄色のボックスの位置とサイズを取得し、SVGテキストの下端が黄色のボックスの上端に重なるかどうかを確認します。テキストがボックスに重なる場合にはテキストの色を黒に、重ならない場合には白に変更することで、背景に対してテキストが読みやすい色で表示されるようにしています。この動的な色の変更により、スクロールに応じた視覚効果を提供し、ユーザー体験を向上させています。
Swiper
【Swiper】様々なスライダーを実装
このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプション設定、カスタマイズ方法、および応用例が含まれています。スライダーを使用することで、画像やコンテンツを魅力的に表示するインタラクティブなユーザーインターフェースを構築できます。
GSAP
【Gsap】でSVGをアニメーション
Gsapを使って、SVG画像をアニメーションする方法について、このサイトで詳しく説明しています。実装例や具体的なコードを参考にして、Gsapを活用して魅力的なウェブサイトを作成しましょう。Gsapはサイト制作において非常に便利なツールです。
JSライブラリ
AOS.jsの使い方｜CDN・Viteでスクロールアニメーションを実装
AOS.js（Animate On Scroll）は、ウェブページのスクロールに応じて要素をアニメーション表示するための軽量なJavaScriptライブラリです。このライブラリを使用すると、スクロールアニメーションを簡単に実装できます。AOS.jsは、インストールと使用が非常に簡単で、HTMLファイルにスクリプトとスタイルシートを読み込むだけで利用できます。また、多数のアニメーションオプションを提供しており、要素の表示・非表示のアニメーションを細かくカスタマイズできます。 アニメーションはスクロール位置に基づいて自動でトリガー(発火)されるため、ユーザーがページをスクロールするたびに新しいアニメーションが表示されます。AOS.jsはレスポンシブデザインをサポートしており、異なる画面サイズでも適切に動作します。基本的な使用方法としては、まずCDNからAOS.jsを読み込み、JavaScriptコードでAOSを初期化し、アニメーションを適用したいHTML要素にdata-aos属性を追加します。例えば、上方向にフェードインさせたい場合はdata-aos=”fade-up”、アニメーションの持続時間をミリ秒で指定したい場合はdata-aos-duration=”1000″のように記述します。このように、AOS.jsはユーザーエクスペリエンスを向上させるための簡単で効果的なツールです。 今回はAOS.jsをCDNで読み込む方法や、モジュールバンドラを使用した設定。また、カスタマイズについて詳細を記述いたします。参考にしていただければ幸いです。
GSAP
【Gsap】スクロールアニメーション
この一連のコードは、ウェブページの構造、スタイル、および動的なインタラクションを定義するために使用されます。HTMLでページの基本的な骨格を作成し、CSS（Sassを含む）で視覚的スタイルを適用し、GSAPとScrollTriggerを使用してスクロールに基づいたアニメーションを実装しています。
JSライブラリ
【Vanta.js】3Dアニメーション背景生成ライブラリ
Vanta.jsは、ウェブサイトの背景に美しい、インタラクティブな3Dアニメーションを簡単に追加できるJavaScriptライブラリです。このライブラリは、Three.jsやWebGLなどの技術を利用して、鳥の群れ、波の動き、煙、パーティクルシステムなど、様々な効果を実現します。利用者は数行のコードをHTMLに追加するだけで、サイトのビジュアルを引き立てるインタラクティブな背景を簡単に実装できます。Vanta.jsは、カスタマイズが容易で、レスポンシブデザインにも対応しているため、様々なデバイスでの表示に適しています。
DOM・イベント
Javascriptでホバーアニメーションの実装
Javascriptで要素をホバーした際にイベントを発火させる実装をしていきます。CSSでも可能ですが、Javascriptのイベントのほうがより柔軟に対応が可能です。今回はshinyクラスを予め設定し、イベントの発火と共にクラスを付与して、その要素を光らせるアニメーションを実装していきます。