40代高卒者が製造業からIT転職する【画像を切り替えよう】

programming
DMM WEBCAMP

こんにちは、フローです。

今回は、トップ画面の画像などが切替わるやつを書いていきます。

よくありますよね。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【jQueryを使おう】

画像の切り替え

こんな感じです。

画像の代わりに、色で表現しています。

切替わる時間も、自由に変えられます。

さっそくコードをみていきましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
  <title>画像の切替り</title>
</head>
<body>

<div id="header">
  <h1 class="title">こんにちは</h1>
 </div>

</body>
</html>

画像の上に「こんにちは」のテキストをのせています。

CSS

色にタイトルを載せる

#header {
  width: 100%;
  height: 500px;
  background-color: red;
  animation: colorChange 5s ease infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  color: white;
  font-size: 36px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes colorChange {
  0% {
    background-color: red;
  }
  33% {
    background-color: blue;
  }
  66% {
    background-color: green;
  }
  100% {
    background-color: red;
  }
}

これが色を使った時のCSSです。

ちなみに、画像（.jpegなど）の時は、

画像にタイトルを載せる

#header {
  width: 100%;
  height: 500px;
  background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
  animation: imageChange 5s ease infinite;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  color: white;
  font-size: 36px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes imageChange {
  0% {
    background-image: url(image1.jpg);
  }
  33% {
    background-image: url(image2.jpg);
  }
  66% {
    background-image: url(image3.jpg);
  }
  100% {
    background-image: url(image1.jpg);
  }
}

この、URLの（）の中を好きな画像にしてみて下さい。

jQuery

$(document).ready(function() {
  var colors = ['red', 'blue', 'green'];
  var i = 0;
  
  setInterval(function() {
    $('#header').animate({
      backgroundColor: colors[i]
    }, 1000);
    
    i = (i + 1) % colors.length;
  }, 5000);
});

この記述を、HTMLにも書いてある”script.js”という、ファイルに書き込んで、読み込ませて下さい。

まとめ

以上で、画像が切替わるトップ画面が出来るはずです。

切替わる時間を変えたり、画像や色を変えたり、遊んでみて下さい。

デザイン的にもよくあるデザインなので、色々なサイトで使い回しが出来ると思います。

この様なパーツを揃えておく事で、制作の時間短縮にも繋がります。

是非色んなパターンを覚えて、WEB制作の役に立ててみて下さい。

次回は、各コードの説明をしていきます。

レッツチャレンジ！