JavaScript応用– tag –
-
JavaScriptのIntersectionObserverで柔軟なパララックス表現
パララックス効果とは？ パララックス（Parallax） とは、スクロール時に背景と前面のコンテンツが異なるスピードで動くことで、奥行きや立体感を演出する視覚効果のことです。Webデザインでは、背景画像をゆっくり動かすことで「動きのある背景」や「没入... -
JavaScriptのライブラリ（jQueryの基本操作）
jQueryとは？ jQuery（ジェイクエリ）は、JavaScriptをより簡単に書けるようにした「軽量なライブラリ（部品セット）」です。 document.querySelector() → $('#id') addEventListener() → .on('click', ...) .classList.add() → .addClass() のように、よ... -
JavaScriptの本格的なスライドショー（Swiper.js）
JavaScriptライブラリ「Swiper.js」のCDNを使うことで、本格的なスライドショー自動再生・ループ・ナビゲーションボタン・ドット（ページネーション）が簡単に実装できます。 公式サイト：https://swiperjs.com/ CDNとは？ CDN（Content Delivery Network... -
JavaScriptで作成スライドショーとスライダー
風景がフェードインするスライドショー JavaScriptで設定した画像を、フェードイン・フェードアウトしながら切り替えるシンプルなスライドショーを作成します。 See the Pen Untitled by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen. HTML <h1 st... -
JavaScriptのスクロールイベント（IntersectionObserver を使った動き）
scrollYと「IntersectionObserver」の違い 比較項目scrollYIntersectionObserver処理方法毎回スクロールのたびに自分で位置を判定ブラウザが「見えたタイミング」で自動通知パフォーマンス頻繁なスクロール処理は負担がかかる効率的で軽量、ブラウザ最適化... -
JavaScriptのスクロールイベント（scrollY を使った動き）
スクロールする度に、固定されているボタンがふわっと表示されたり、最初は出ていて、スクロールすると消えるヘッダーがある位置に来たら上部に固定するなどはJavaScript scroolYというプロパティを使います。たとえば「上へ戻る」ボタンがスクロール後に... -
JavaScript応用
この「JavaScript応用」では、基礎やDOM操作で学んだ知識をもとに、より実践的でデザイン性の高い動きを実装していきます。まずは、クリックで開閉する ハンバーガーメニュー の作成を通して、イベント制御とクラス操作の組み合わせを確認します。続いて、... -
JavaScriptでハンバーガーメニューを作成
スマートフォンやタブレットなど、画面の幅が狭い端末では、ナビゲーションメニューをコンパクトにまとめる工夫が必要です。そこで活躍するのが ハンバーガーメニュー です。 ハンバーガーメニューとは？ 「☰」のような三本線のアイコンをタップすると、画...
1
