DOM・イベント
JavaScriptでスクロール連動する目次を実装する方法｜現在の見出しを色で表示
JavaScriptで記事本文のh2・h3から目次を生成し、スクロール位置に応じてis-currentを付け替える方法をWebCantaの実装コードで解説します。requestAnimationFrame、aria-current、position: stickyまで確認できます。
ARTICLES
DOM・イベント
クリック、スクロール、マウス操作など、DOMとイベントを使ってWebページを動的に制御する方法を解説します。
DOM・イベント
JavaScriptでできることとは？activeクラスでクリック・スクロールアニメーションを実装する方法
この記事では、JavaScriptでできることの中から、クリックイベントとスクロールイベントで親要素にactiveクラスを付与し、CSSでアニメーションを管理する方法を解説します。JavaScriptはきっかけ作り、見た目の変化はCSSに任せる考え方を理解できます。
DOM・イベント
Javascriptでホバーアニメーションの実装
Javascriptで要素をホバーした際にイベントを発火させる実装をしていきます。CSSでも可能ですが、Javascriptのイベントのほうがより柔軟に対応が可能です。今回はshinyクラスを予め設定し、イベントの発火と共にクラスを付与して、その要素を光らせるアニメーションを実装していきます。
DOM・イベント
コピペでOK!スクロールに追従するメニューの実装
スクロールイベントを監視し、メニューの表示状態を切り替えるためのコードを書いていきます。CSSを使用して、メニューのデザインや配置を調整することもできます。この実装により、ユーザーがページをスクロールするたびに、メニューが自動的に表示または非表示になるようになります。
DOM・イベント
【クリックイベント】Javascriptでテキストの変更
このテキストは、ユーザーがクリックした際にテキストが変わるWebデザインの実装方法について説明しています。HTML, CSS, JavaScriptを用いて、タブをクリックすると関連するコンテンツが表示される仕組みを作る方法を示しています。また、WordPressでの応用方法や、具体的なコードの例が記載されており、WordPressでショートコードを使った実装方法も紹介していきます。
DOM・イベント
メインコンテンツとサイトバーの高さを動的に調整する
このウェブサイトでは、サイドバーにある目次は「position: sticky;」を用いて固定されており、メインコンテンツの高さに合わせて調整されています。メインコンテンツの高さは記事の内容次第で変わるため、CSSでの調整が難しいです。そこでJavascriptを使用します。ページが読み込まれた時に、メインコンテンツの高さを取得し、それに合わせてサイドバーの高さを設定するコードを書いていきます。
DOM・イベント
コピペでOK！マウスの動きに合わせてデザインを移動させる方法
本ページで実装中のマウスの動きに合わせて、円を移動させる方法を解説します。こちらのJavascriptを用いてアニメーションさせています。
