<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet">
<style>@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
p {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
transform: translateY(-50%) translateX(-50%);
/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
animation: color-change 20s ease infinite;
}
/*========= body背景色の変化CSS ===============*/
body {
overflow: hidden;
vertical-align: middle;
text-align: center;
width: 100%;
/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
animation: color-change 20s ease infinite;
}
@keyframes color-change {
0% {
color: #000;
background: #fda100;
} /*変化させたい色*/
25% {
color: #00;
background: #ff5acd;
} /*変化させたい色*/
50% {
color: #fff;
background: #b721ff;
} /*変化させたい色*/
75% {
color: #fff;
background: #b721ff;
} /*変化させたい色*/
90% {
color: #000;
background: #2bd2ff;
} /*変化させたい色*/
100% {
bcolor: #000;
background: #2bff88;
} /*変化させたい色*/
}</style>
</head>
<body>
<body>
<p>bodyの背景色が時間とともに変化します</p>
<script>// 動きのきっかけの起点となるアニメーションの名前を定義
function moveAnimation() {
//読み込まれたらすぐにランダムに出現
var randomElm = $(".randomBox"); //親要素取得
var randomElmChild = $(randomElm).children(); //親の子要素を取得
if (!$(randomElm).hasClass("play")) {
//親要素にクラス名playが付いてなければ処理をおこなう
randomAnime();
}
function randomAnime() {
$(randomElm).addClass("play"); //親要素にplayクラスを付与
var rnd = Math.floor(Math.random() * randomElmChild.length); //配列数からランダム数値を取得
var moveData = "fadeUp"; //アニメーション名＝CSSのクラス名を指定
$(randomElmChild[rnd]).addClass(moveData); //アニメーションのクラスを追加
randomElmChild.splice(rnd, 1); //アニメーション追加となった要素を配列から削除
if (randomElmChild.length == 0) {
//配列の残りがあるか確認
$(randomElm).removeClass("play"); //なくなった場合は親要素のplayクラスを削除
} else {
setTimeout(function () {
randomAnime();
}, 500); //0.5秒間隔でアニメーションをスタートさせる。※ランダムのスピード調整はこの数字を変更させる
}
}
//スクロールしたらランダムに出現
var randomElm2 = $(".randomScroll"); //親要素取得
var randomElm2Child = $(randomElm2).children(); //親の子要素を取得
randomScrollAnime();
function randomScrollAnime() {
var elemPos = $(".randomScroll").offset().top - 50; //要素より、50px上まで来たら
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
if (randomElm2Child.length > 0) {
//配列数以上であれば処理をおこなう
var rnd = Math.floor(Math.random() * randomElm2Child.length); //配列数から表示する数値をランダムで取得
var moveData = "fadeUp"; //アニメーション名＝CSSのクラス名を指定
if (animeFlag) {
//スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにする
animeFlag = false; //アニメーション処理が終わるまで一時的にfalseにする
$(randomElm2Child[rnd]).addClass(moveData); //アニメーションのクラスを追加
setTimeout(function () {
animeFlag = true; //次の処理をおこなうためにtrueに変更
randomScrollAnime(); //自身の処理を繰り返す
}, 500); //0.5秒間隔で。※ランダムのスピード調整はこの数字を変更させる
randomElm2Child.splice(rnd, 1); //アニメーション追加となった要素を配列から削除
}
}
} else {
animeFlag = true;
}
}
}
var animeFlag = true; //スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにするための定義
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
moveAnimation(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
moveAnimation(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述
//# sourceURL=pen.js</script>
</body>
</html>/*
外部依存 CSS:
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
@charset "utf-8";
/*========= レイアウトのためのCSS ===============*/
p {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
transform: translateY(-50%) translateX(-50%);
/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
animation: color-change 20s ease infinite;
}
/*========= body背景色の変化CSS ===============*/
body {
overflow: hidden;
vertical-align: middle;
text-align: center;
width: 100%;
/*変化の時間を変更したい場合は20sの部分を好きな時間に変更*/
animation: color-change 20s ease infinite;
}
@keyframes color-change {
0% {
color: #000;
background: #fda100;
} /*変化させたい色*/
25% {
color: #00;
background: #ff5acd;
} /*変化させたい色*/
50% {
color: #fff;
background: #b721ff;
} /*変化させたい色*/
75% {
color: #fff;
background: #b721ff;
} /*変化させたい色*/
90% {
color: #000;
background: #2bd2ff;
} /*変化させたい色*/
100% {
bcolor: #000;
background: #2bff88;
} /*変化させたい色*/
}/*
外部依存 CSS (このデモは下記の CSS にも依存します):
- https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
*/
// 動きのきっかけの起点となるアニメーションの名前を定義
function moveAnimation() {
//読み込まれたらすぐにランダムに出現
var randomElm = $(".randomBox"); //親要素取得
var randomElmChild = $(randomElm).children(); //親の子要素を取得
if (!$(randomElm).hasClass("play")) {
//親要素にクラス名playが付いてなければ処理をおこなう
randomAnime();
}
function randomAnime() {
$(randomElm).addClass("play"); //親要素にplayクラスを付与
var rnd = Math.floor(Math.random() * randomElmChild.length); //配列数からランダム数値を取得
var moveData = "fadeUp"; //アニメーション名＝CSSのクラス名を指定
$(randomElmChild[rnd]).addClass(moveData); //アニメーションのクラスを追加
randomElmChild.splice(rnd, 1); //アニメーション追加となった要素を配列から削除
if (randomElmChild.length == 0) {
//配列の残りがあるか確認
$(randomElm).removeClass("play"); //なくなった場合は親要素のplayクラスを削除
} else {
setTimeout(function () {
randomAnime();
}, 500); //0.5秒間隔でアニメーションをスタートさせる。※ランダムのスピード調整はこの数字を変更させる
}
}
//スクロールしたらランダムに出現
var randomElm2 = $(".randomScroll"); //親要素取得
var randomElm2Child = $(randomElm2).children(); //親の子要素を取得
randomScrollAnime();
function randomScrollAnime() {
var elemPos = $(".randomScroll").offset().top - 50; //要素より、50px上まで来たら
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
if (randomElm2Child.length > 0) {
//配列数以上であれば処理をおこなう
var rnd = Math.floor(Math.random() * randomElm2Child.length); //配列数から表示する数値をランダムで取得
var moveData = "fadeUp"; //アニメーション名＝CSSのクラス名を指定
if (animeFlag) {
//スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにする
animeFlag = false; //アニメーション処理が終わるまで一時的にfalseにする
$(randomElm2Child[rnd]).addClass(moveData); //アニメーションのクラスを追加
setTimeout(function () {
animeFlag = true; //次の処理をおこなうためにtrueに変更
randomScrollAnime(); //自身の処理を繰り返す
}, 500); //0.5秒間隔で。※ランダムのスピード調整はこの数字を変更させる
randomElm2Child.splice(rnd, 1); //アニメーション追加となった要素を配列から削除
}
}
} else {
animeFlag = true;
}
}
}
var animeFlag = true; //スクロールする度に動作するのでアニメーションが終わるまで処理をさせないようにするための定義
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
moveAnimation(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
moveAnimation(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述
//# sourceURL=pen.js