<!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 ===============*/
.container {
position: relative;
}
h1 {
position: absolute;
top: 30vh;
left: 30vh;
font-size: clamp(1rem,7vh,3rem);
white-space: nowrap;
}
p {
position: absolute;
bottom: 20px;
z-index: 2;
text-align: center;
width: 100%;
}
a {
color: #666;
}
/*========= 流体シェイプを動かす ===============*/
.fluid {
/*横幅*/
width: 70vh;
/*縦幅*/
height: 70vh;
/*影色*/
box-shadow: 12px 12px 2px 1px rgba(251, 128, 128, 0.4);
/*背景色*/
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(253, 193, 104, 1) 0%,
rgba(251, 128, 128, 1) 90%
);
/*アニメーションの設定*/
animation: fluidrotate 10s ease 0s infinite;
}
@keyframes fluidrotate {
0%,
100% {
/*【解説】border-radius:楕円の横の半径/楕円の縦の半径;*/
border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 30%/49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
border-radius: 50% 90% 34% 66%/56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
}</style>
</head>
<body>
<body>
<div class="container">
<div class="fluid">
</div>
<h1>Making Happy<br>ココロオドル「やりたい」を共有する</h1>
<!--/container-->
</div>
<p>
<a href="https://web-navigator.com/" target="_blank">©WEB先案内</a>
</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 ===============*/
.container {
position: relative;
}
h1 {
position: absolute;
top: 30vh;
left: 30vh;
font-size: clamp(1rem,7vh,3rem);
white-space: nowrap;
}
p {
position: absolute;
bottom: 20px;
z-index: 2;
text-align: center;
width: 100%;
}
a {
color: #666;
}
/*========= 流体シェイプを動かす ===============*/
.fluid {
/*横幅*/
width: 70vh;
/*縦幅*/
height: 70vh;
/*影色*/
box-shadow: 12px 12px 2px 1px rgba(251, 128, 128, 0.4);
/*背景色*/
background-image: radial-gradient(
circle farthest-corner at 10% 20%,
rgba(253, 193, 104, 1) 0%,
rgba(251, 128, 128, 1) 90%
);
/*アニメーションの設定*/
animation: fluidrotate 10s ease 0s infinite;
}
@keyframes fluidrotate {
0%,
100% {
/*【解説】border-radius:楕円の横の半径/楕円の縦の半径;*/
border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 30%/49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
border-radius: 50% 90% 34% 66%/56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
}/*
外部依存 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