JavaScriptでスクロールアニメーションを実現する

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、スクロールアニメーションを学習しました。今回も結構面白いです。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

cssでスクロールアニメーションをスタイリングしよう！

開発

ページの作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Scroll Animation</title>
  </head>
  <body>
    <h1>Scroll to see the animation</h1>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <div class="box"><h2>Content</h2></div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Scroll Animation</title>

</head>

<body>

<h1>Scroll to see the animation</h1>

<div class="box"><h2>Content</h2></div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルを記述しましょう。

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #efedd6;
  font-family: "Roboto", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  overflow-x: hidden;
}

h1 {
  margin: 10px;
}

.box {
  background-color: steelblue;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
  transform: translateX(400%);
  transition: transform 0.4s ease;
}

.box:nth-of-type(even) {
  transform: translateX(-400%);
}

.box.show {
  transform: translateX(0);
}

.box h2 {
  font-size: 45px;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {

box-sizing: border-box;

}

body {

background-color: #efedd6;

font-family: "Roboto", sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

margin: 0;

overflow-x: hidden;

}

h1 {

margin: 10px;

}

.box {

background-color: steelblue;

color: #fff;

display: flex;

align-items: center;

justify-content: center;

width: 400px;

height: 200px;

margin: 10px;

border-radius: 10px;

box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);

transform: translateX(400%);

transition: transform 0.4s ease;

}

.box:nth-of-type(even) {

transform: translateX(-400%);

}

.box.show {

transform: translateX(0);

}

.box h2 {

font-size: 45px;

}

ここまで実装すると以下のようになります。

JavaScriptの実装

実装方法

スクロールアニメーションの実現において、先ほど設定したCSSの「show」クラスが鍵です。

.box.show {
  transform: translateX(0);
}

.box.show {

transform: translateX(0);

}

showクラスをboxクラスを付与した要素につけることで、Boxが表示されます。

<div class="box show"><h2>Content</h2></div>

1	<div class="box show"><h2>Content</h2></div>

また、「translateX」関数についても触れておきましょう。この関数は要素を「X軸方向に再配置」する機能を持っているようです。

現在は、「400%」を設定して画面外にBoxを表示していますが、showクラスにはtransform: translateX(0);が設定されているので要素が元の位置に戻ります。

また、これだけだと「同じ方向からのみBoxが現れる」状況になってしまうため、次の設定で偶数のBoxは「逆方向から現れる」ようにしています。

.box:nth-of-type(even) { <<< even === 偶数
  transform: translateX(-400%);
}

.box:nth-of-type(even) { <<< even === 偶数

transform: translateX(-400%);

}

要素を取得する

JavaScriptで制御すべき要素が1つあります。最初にこれを取得しましょう。

// box要素を全て取得する
const boxes = document.querySelectorAll('.box')

1 2	// box要素を全て取得する const boxes = document.querySelectorAll('.box')

スクロールイベントを登録する

次にスクロールイベントを登録しましょう。

// box要素を全て取得する
const boxes = document.querySelectorAll('.box')

// スクロールイベントを登録
window.addEventListener('scroll', checkBoxes)

function checkBoxes() {}

// box要素を全て取得する

const boxes = document.querySelectorAll('.box')

// スクロールイベントを登録

window.addEventListener('scroll', checkBoxes)

function checkBoxes() {}

これでページがスクロールしたらcheckBoxes関数が実行されるようになりました。

要素の表示

次の処理でページをスクロールした時に要素を取得できるようにします。

function checkBoxes() {
  // 現在表示されているページの縦の長さを取得
  // 要素はそれよりも狭い範囲で計算したいので、いくらかで割る
  const triggerBottom = window.innerHeight / 5 * 4

  boxes.forEach(box => {
    // ボックス要素の天辺の位置を取得
    const boxTop = box.getBoundingClientRect().top

    if(boxTop < triggerBottom) {
      box.classList.add('show')
    } else {
      box.classList.remove('show')
    }
  })
}

function checkBoxes() {

// 現在表示されているページの縦の長さを取得

// 要素はそれよりも狭い範囲で計算したいので、いくらかで割る

const triggerBottom = window.innerHeight / 5 * 4

boxes.forEach(box => {

// ボックス要素の天辺の位置を取得

const boxTop = box.getBoundingClientRect().top

if(boxTop < triggerBottom) {

box.classList.add('show')

} else {

box.classList.remove('show')

}

})

}

ちょっと難しいかもしれません。

getBoundingClientRectについて最初に触れます。

この関数は、要素の寸法と、そのビューポートに対する位置を返します。ビューポートとは、表示している画面のことです。

box.getBoundingClientRect().topにて、BoxのTopの位置を取得しているんですね。スクロールしていくとこのTopの値は増大していきます。

続いて、window.innerHeightですが、これは現在表示しているビューポートの高さを表しています。

要素の出現は、その範囲より少し狭いはずなので、いくらか幅を狭めるために計算処理(/5*4)を入れています。

Boxの高さがページビューの高さより小さい(スクロールなしでページに収まる範囲)なら表示する必要があるため、 if(boxTop < triggerBottom) で条件分岐しています。

おわりに

今回も結構面白かったですね。

このプログラムなら色々なものに応用できそうです。一通り学習を終えたらオリジナルアプリを作ってみますね^^

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// box要素を全て取得する
const boxes = document.querySelectorAll('.box')

// スクロールイベントを登録
window.addEventListener('scroll', checkBoxes)

function checkBoxes() {
  // 現在表示されているページの縦の長さを取得
  // 要素はそれよりも狭い範囲で計算したいので、いくらかで割る
  const triggerBottom = window.innerHeight / 5 * 4
  console.log(triggerBottom)

  boxes.forEach(box => {
    // ボックス要素の天辺の位置を取得
    const boxTop = box.getBoundingClientRect().top

    if(boxTop < triggerBottom) {
      box.classList.add('show')
    } else {
      box.classList.remove('show')
    }
  })
}

// box要素を全て取得する

const boxes = document.querySelectorAll('.box')

// スクロールイベントを登録

window.addEventListener('scroll', checkBoxes)

function checkBoxes() {

// 現在表示されているページの縦の長さを取得

// 要素はそれよりも狭い範囲で計算したいので、いくらかで割る

const triggerBottom = window.innerHeight / 5 * 4

console.log(triggerBottom)

boxes.forEach(box => {

// ボックス要素の天辺の位置を取得

const boxTop = box.getBoundingClientRect().top

if(boxTop < triggerBottom) {

box.classList.add('show')

} else {

box.classList.remove('show')

}

})

}

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

JavaScriptでスクロールアニメーションを実現する

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

実装方法

要素を取得する

スクロールイベントを登録する

要素の表示

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

実装方法

要素を取得する

スクロールイベントを登録する

要素の表示

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Kubernetes(k8s)を学ぼう! Blue-Greenデプロイ編

Go言語とVue.jsで作るユーザー認証アプリ~バックエンド開発編Vol2~

JavaScriptでカウントダウンアプリを作ろう!

[初学者向け]Helmを学ぼう!~Chartを作成してより実務に役立てよう~

Go言語でgRPCを学ぼう~GreetAPI~

JavaScriptとGo言語でToDoリストアプリを作ろう!~検索機能~

[golang]Dockerでfiber API環境を構築しよう2! ~My…

Djangoでテスト駆動開発を学ぼう！2~初めてのテスト編~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル