JavaScriptでかっこいいスライド画面を作ろう!

こんにちは。KOUKIです。

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

<目次>

実装するもの

今回は、かっこいいスライド画面を作成します。
※CSSの力もかなり借りてますが、本記事はJavaScriptを中心に解説しています

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

環境構築

簡単な環境構築をお願いします。

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

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

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

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでスライド画面をスタイリングしよう!

ページ(HTML)の作成

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

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
      integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Background Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div
        class="slide active"
        style="
          background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>
      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');
        "
      ></div>

      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>

      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');
        "
      ></div>

      <div
        class="slide"
        style="
          background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
        "
      ></div>

      <button class="arrow left-arrow" id="left">
        <i class="fas fa-arrow-left"></i>
      </button>

      <button class="arrow right-arrow" id="right">
        <i class="fas fa-arrow-right"></i>
      </button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"

integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="

crossorigin="anonymous"

<title>Background Slider</title>

</head>

<body>

<div

class="slide active"

style="

background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');

></div>

<div

class="slide"

style="

background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80');

></div>

<div

class="slide"

style="

background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');

></div>

<div

class="slide"

style="

background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80');

></div>

<div

class="slide"

style="

background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');

></div>

</button>

</button>

</div>

</body>

</html>

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

画像は、「imgix」というサービスで取得していますが、現在は見えていません。また、矢印ボタンには「Font Awesome」を使っています。

スタイル(CSS)を装飾

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

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

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  background-position: center center;
  background-size: cover;
  transition: 0.4s;
}

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

.slider-container {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  height: 70vh;
  width: 70vw;
  position: relative;
  overflow: hidden;
}

.slide {
  opacity: 0;
  height: 100vh;
  width: 100vw;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: -15vh;
  left: -15vw;
  transition: 0.4s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
}

.arrow {
  position: fixed;
  background-color: transparent;
  color: #fff;
  padding: 20px;
  font-size: 30px;
  border: 2px solid orange;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.arrow:focus {
  outline: 0;
}

.left-arrow {
  left: calc(15vw - 65px);
}

.right-arrow {
  right: calc(15vw - 65px);
}

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

* {

box-sizing: border-box;

}

body {

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

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

background-position: center center;

background-size: cover;

transition: 0.4s;

}

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100vh;

background-color: rgba(0, 0, 0, 0.7);

z-index: -1;

}

.slider-container {

box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

height: 70vh;

width: 70vw;

position: relative;

overflow: hidden;

}

.slide {

opacity: 0;

height: 100vh;

width: 100vw;

background-position: center center;

background-size: cover;

position: absolute;

top: -15vh;

left: -15vw;

transition: 0.4s ease;

z-index: 1;

}

.slide.active {

opacity: 1;

}

.arrow {

position: fixed;

background-color: transparent;

color: #fff;

padding: 20px;

font-size: 30px;

border: 2px solid orange;

top: 50%;

transform: translateY(-50%);

cursor: pointer;

}

.arrow:focus {

outline: 0;

}

.left-arrow {

left: calc(15vw - 65px);

}

.right-arrow {

right: calc(15vw - 65px);

}

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

画像が表示されましたね。slideクラスが付与されているHTML要素に「active」クラスを付与することで画像が表示されるようになります。JavaScriptでこのクラスを操作するわけですね。

JavaScriptの実装

準備が完了したので、JavaScriptを実装していきましょう。

スライドは、HTMLのBodyタグに画像を差し込むことによって実現します。

要素を取得する

画面操作に必要な要素を取得します。

// 要素を取得する
const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')

// 要素を取得する

const body = document.body

const slides = document.querySelectorAll('.slide')

const leftBtn = document.getElementById('left')

const rightBtn = document.getElementById('right')

「document.body」はHTMLのBodyタグの情報を取得しています。

Bodyに画像をセットする

次にBodyタグに画像をセットする処理を書きます。

// アクティブになっているバックグランド
// 配列形式なので0から始まる
// この数値を変えることで、切り替えを行う
let activeSlide = 0

setBgToBody()

// Bodyに画像をセット
function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}

// アクティブになっているバックグランド

// 配列形式なので0から始まる

// この数値を変えることで、切り替えを行う

let activeSlide = 0

setBgToBody()

// Bodyに画像をセット

function setBgToBody() {

body.style.backgroundImage = slides[activeSlide].style.backgroundImage

}

これで、activeSlideが変更されたらバックグラウンドが切り替わるようになりました(CSS実装時の画像だと背景が黒だったのが画像表示される)。

アクティブスライドをセットする

次は、アクティブにするスライドを設定する処理を書きます。

// スライドをアクティブにする
function setActiveSlide() {
  slides.forEach(slide => {
    // activeクラスを除去
    slide.classList.remove('active')
  })

  // activeクラスを付与
  slides[activeSlide].classList.add('active')
}

// スライドをアクティブにする

function setActiveSlide() {

slides.forEach(slide => {

// activeクラスを除去

slide.classList.remove('active')

})

// activeクラスを付与

slides[activeSlide].classList.add('active')

}

クリックイベントを登録する

最後にクリックイベントを登録しましょう。

let activeSlide = 0

// クリックイベントを登録
rightBtn.addEventListener('click', () => {
  activeSlide++
  if(activeSlide > slides.length - 1) {
    activeSlide = 0
  }
  setBgToBody()
  setActiveSlide()
})

leftBtn.addEventListener('click', () => {
  activeSlide--
  if(activeSlide < 0) {
    activeSlide = slides.length - 1
  }
  setBgToBody()
  setActiveSlide()
})

let activeSlide = 0

// クリックイベントを登録

rightBtn.addEventListener('click', () => {

activeSlide++

if(activeSlide > slides.length - 1) {

activeSlide = 0

}

setBgToBody()

setActiveSlide()

})

leftBtn.addEventListener('click', () => {

activeSlide--

if(activeSlide < 0) {

activeSlide = slides.length - 1

}

setBgToBody()

setActiveSlide()

})

これで完成です。

おわりに

めちゃくちゃかっこいいスライドができましたね。実務で使う機会がないことが残念です。。

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const body = document.body
const slides = document.querySelectorAll('.slide')
const leftBtn = document.getElementById('left')
const rightBtn = document.getElementById('right')

// アクティブになっているバックグランド
// 配列形式なので0から始まる
// この数値を変えることで、切り替えを行う
let activeSlide = 0

// クリックイベントを登録
rightBtn.addEventListener('click', () => {
  activeSlide++
  if(activeSlide > slides.length - 1) {
    activeSlide = 0
  }
  setBgToBody()
  setActiveSlide()
})

leftBtn.addEventListener('click', () => {
  activeSlide--
  if(activeSlide < 0) {
    activeSlide = slides.length - 1
  }
  setBgToBody()
  setActiveSlide()
})

setBgToBody()

// Bodyに画像をセット
function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage
}

// スライドをアクティブにする
function setActiveSlide() {
  slides.forEach(slide => {
    // activeクラスを除去
    slide.classList.remove('active')
  })

  // activeクラスを付与
  slides[activeSlide].classList.add('active')
}

// 要素を取得する

const body = document.body

const slides = document.querySelectorAll('.slide')

const leftBtn = document.getElementById('left')

const rightBtn = document.getElementById('right')

// アクティブになっているバックグランド

// 配列形式なので0から始まる

// この数値を変えることで、切り替えを行う

let activeSlide = 0

// クリックイベントを登録

rightBtn.addEventListener('click', () => {

activeSlide++

if(activeSlide > slides.length - 1) {

activeSlide = 0

}

setBgToBody()

setActiveSlide()

})

leftBtn.addEventListener('click', () => {

activeSlide--

if(activeSlide < 0) {

activeSlide = slides.length - 1

}

setBgToBody()

setActiveSlide()

})

setBgToBody()

// Bodyに画像をセット

function setBgToBody() {

body.style.backgroundImage = slides[activeSlide].style.backgroundImage

}

// スライドをアクティブにする

function setActiveSlide() {

slides.forEach(slide => {

// activeクラスを除去

slide.classList.remove('active')

})

// activeクラスを付与

slides[activeSlide].classList.add('active')

}

JavaScriptでかっこいいスライド画面を作ろう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

Bodyに画像をセットする

アクティブスライドをセットする

クリックイベントを登録する

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年1月
月	火	水	木	金	土	日
				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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

Bodyに画像をセットする

アクティブスライドをセットする

クリックイベントを登録する

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

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

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

Go言語で作るWebアプリのテンプレート2~Staticファイル~

JavaScriptの構造体から特定のデータを取得する(findIndex)

Bootstrap~記事まとめ~

Go言語とPostgreSQLで遊ぼう!~Unit Test編~

[初学者向け]Helmを学ぼう!~Helm Chartの依存/ライブラリ化/…

JavaScriptでKeyCodeイベントを取得しよう！

[React]~MovieApp-router3: JWT Tokenのハン…

[NextJS]~Checkout画面:ソースコードをまとめます!~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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