「スライドショーと背景エフェクト」
01 春 「桜」
スライドショーに使用する写真を「PIXABAY」などからダウンロード。
「spring」フォルダー
色などのデザイン変更はseason.css
※ダウンロードサイズ／width 640px
※写真の枚数／3枚～
※写真の名前は各imgフォルダーのファイル名と同じにすると簡単です
sakura1.jpg、sakura2.jpg、sakura3.jpg～
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Spring</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/season.css">
</head>
<body>
<div class="cherry-blossom-container">
<div class="box">
<h1>Cherry blossom</h1>
<div class="viewer">
<ul>
<li><a href="#1"><img src="img/sakura1.jpg" alt=""></a></li>
<li><a href="#2"><img src="img/sakura2.jpg" alt=""></a></li>
<li><a href="#3"><img src="img/sakura3.jpg" alt=""></a></li>
</ul>
</div><!--/.viewer-->
<br>
<p>Let’s go see the cherry blossoms!</p>
</div>
</div><!--/#cherry-blossom-container-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/sakura.js"></script>
</body>
</html>
background effect
CSS
season.cssをリンクさせる
桜を表示するコンテナ「.cherry-blossom-container」
花びらが降るアニメーション「@keyframes animate-petal」
<link rel="stylesheet" type="text/css" href="css/season.css">
jQuery
<script src="js/sakura.js"></script>
audio
サウンドを入れる場合は以下のように書き足してください
<p>Let’s go see the cherry blossoms!</p>
<br>
<audio src="sakura.mp3" controls loop></audio>
02 冬 「雪」
こちらの雪の背景エフェクトはCSSで動かしています
「winter」フォルダー
色などのデザイン変更はseason.css
※ダウンロードサイズ／width 640px
※写真の枚数／3枚～
※写真の名前は各imgフォルダーのファイル名と同じにすると簡単です
ph1.jpg、ph2.jpg、ph3.jpg～
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Winter season</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/season.css">
<link rel="stylesheet" type="text/css" href="css/snow.css">
</head>
<body>
<div class="snow">●</div>
<div class="snow snow2nd">●</div>
<div class="container">
<h1>Winter season</h1>
<div class="viewer">
<ul>
<li><a href="#1"><img src="img/ph1.jpg" alt=""></a></li>
<li><a href="#2"><img src="img/ph2.jpg" alt=""></a></li>
<li><a href="#3"><img src="img/ph3.jpg" alt=""></a></li>
</ul>
</div><!--/.viewer-->
<br>
<p>Kindness is like snow.<br>It beautifies everything it covers.</p>
</div><!--/#container-->
<script src="js/jquery1.7.2.min.js"></script>
<script src="js/slide.js"></script>
</body>
</html>
background effect
CSS
snow.cssをリンクさせる
<link rel="stylesheet" type="text/css" href="css/snow.css">
HTML
<body>の中に入れてください
<div class="snow">●</div>
<div class="snow snow2nd">●</div>
audio
サウンドを入れる場合は以下のように書き足してください
<p>Kindness is like snow.<br>It beautifies everything it covers.</p>
<br>
<audio src="snow.mp3" controls loop></audio>