CSS3 – 炭酸飲料のような泡を量産するアニメーション

jQuery
2021.02.02
この記事は約6分で読めます。
スポンサーリンク

飲料販売サイトのバナーにサイダーの泡のようなアニメーションが欲しいと思い、CSS3とjQueryを使って作成しました。

スポンサーリンク

概要

CSSで泡単体のデザインと基本的なアニメーションパターンを作り、そのスピードや配置や大きさを少しずつ変えてパターンを量産、jQueryでそれぞれが泡になるHTMLタグを量産しています。

SCSSを使用した場合

See the Pen
泡量産アニメーション by J. (@umvjcqzk)
on CodePen.

HTML

HTMLタグは簡潔です。fieldクラスdivタグの中身はjQueryで量産します。

HTML
<div class="field"></div>

CSS

cssは、アニメーションパターンの量産でSCSSを使用しています。

CSS
/*** 基本設定 ***/
.field {
 overflow: hidden;
 width: 100%;
 background-color: #0cf;
}
.bubble {
 position: absolute;
 bottom: 0;
 left: 50%;
}
.bubble .item {
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 position: relative;
}
.bubble .item:after {
 content: "";
 display: block;
 width: 20%;
 height: 20%;
 border-radius: 100%;
 background: rgba(255, 255, 255, 0.6);
 position: absolute;
 right: 15%;
 top: 15%;
 transform: rotateZ(45deg) scaleY(0.8);
 -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
/** アニメーション **/
/* 伸縮 */
@keyframes stretch {
  0% { transform: scaleX(1) scaleY(1); }
  33% { transform: scaleX(0.9) scaleY(1); }
  66% { transform: scaleX(1) scaleY(0.9); }
  100% { transform: scaleX(1) scaleY(1); }
}
@-webkit-keyframes stretch {
  0% { -webkit-transform: scaleX(1) scaleY(1); }
  33% { -webkit-transform: scaleX(0.9) scaleY(1); }
  66% { -webkit-transform: scaleX(1) scaleY(0.9); }
  100% { -webkit-transform: scaleX(1) scaleY(1); } }
/* 横揺れ */
@keyframes shake {
  0% { transform: translateX(10px); }
  50% { transform: translateX(-10px); }
  100% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
  0% { -webkit-transform: translateX(10px); }
  50% { -webkit-transform: translateX(-10px); }
  100% { -webkit-transform: translateX(10px); }
}
/* 移動 */
@keyframes move {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-1000px);
    opacity: 0; }
}
@-webkit-keyframes move {
  0% { -webkit-transform: translateY(0px); }
  100% { -webkit-transform: translateY(-1000px);
    opacity: 0; }
}

/*** 泡のアニメーションパターン量産(SCSS) ***/
@for $i from 0 through 100 {
  $time: $i*0.2;
  $scale: $i*0.1;
  /* 横揺れスピード */
  .shake#{$i * 1} {
    animation: shake ($time+2)+s ease 0s infinite normal;
    -webkit-animation: shake ($time+2)+s ease 0s infinite normal;
  }
  /* 移動スピード */
  .move#{$i * 1}  {
    animation: move ($time+5)+s ease $time+s infinite normal;
    -webkit-animation: move ($time+5)+s ease $time+s infinite normal;
    position: absolute;
    bottom: -10%;
  }
  /* 配置 */
  .pos#{$i * 1}  {
    left: percentage($i*2/100);
  }
  /* 大きさ */
  .scale#{$i * 1}  {
    transform: scale($scale);
    -webkit-transform: scale($scale);
  }
}

JS

jQueryでHTMLタグを量産してアニメーションパターンに変化をつけます。

jQuery
var winHeight;
var field = $(".field");
winRsize(); //関数の実行
$(window).resize(function() {
	winRsize(); //ブラウザのウィンドウサイズが変更されるたびに検知してリサイズ
});
function winRsize() {
	winHeight = $(window).height(); //ウィンドウの高さを取得
	field.height(winHeight); //ウィンドウの高さをfieldクラスの高さとする
}
var items = 100; //100個量産
for (var i=0; i<=items; i++) {
	var move = Math.ceil( Math.random()*50 );
	var pos = Math.ceil( Math.random()*50 );
	var scale = Math.ceil( Math.random()*10 );
	var stretch = Math.ceil( Math.random()*5 );
	var shake = Math.ceil( Math.random()*5 );
	field.append('
');
}

SCSSを使わずにCSSのみで実現した場合

See the Pen
泡量産アニメーション(CSS) by J. (@umvjcqzk)
on CodePen.

HTML

HTMLタグは同様にfieldクラスのdivタグのみで、中身はjQueryで量産します。

HTML
<div class="field"></div>

CSS

SCSSを使わずにCSSのみで50個分のクラスを記述しています。

CSS
/*** 基本設定 ***/
.field {
 overflow: hidden;
 width: 100%;
 background-color: #0cf;
}
.bubble {
 position: absolute;
 bottom: 0;
 left: 50%;
}
.bubble .item {
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100%;
 box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 -webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.6) inset;
 position: relative;
}
.bubble .item:after {
 content: "";
 display: block;
 width: 20%;
 height: 20%;
 border-radius: 100%;
 background: rgba(255, 255, 255, 0.6);
 position: absolute;
 right: 15%;
 top: 15%;
 transform: rotateZ(45deg) scaleY(0.8);
 -webkit-transform: rotateZ(45deg) scaleY(0.8);
}
/** アニメーション **/
/* 伸縮 */
@keyframes stretch {
 0% { transform: scaleX(1) scaleY(1); }
 33% { transform: scaleX(0.9) scaleY(1); }
 66% { transform: scaleX(1) scaleY(0.9); }
 100% { transform: scaleX(1) scaleY(1); }
}
@-webkit-keyframes stretch {
 0% { -webkit-transform: scaleX(1) scaleY(1); }
 33% { -webkit-transform: scaleX(0.9) scaleY(1); }
 66% { -webkit-transform: scaleX(1) scaleY(0.9); }
 100% { -webkit-transform: scaleX(1) scaleY(1); }
}
/* 横揺れ */
@keyframes shake {
 0% { transform: translateX(10px); }
 50% { transform: translateX(-10px); }
 100% { transform: translateX(10px); }
}
@-webkit-keyframes shake {
 0% { -webkit-transform: translateX(10px); }
 50% { -webkit-transform: translateX(-10px); }
 100% { -webkit-transform: translateX(10px); }
}
/* 移動（上昇） */
@keyframes move {
 0% { transform: translateY(0px); }
 100% { transform: translateY(-1000px); opacity: 0; }
}
@-webkit-keyframes move {
 0% { -webkit-transform: translateY(0px); }
 100% { -webkit-transform: translateY(-1000px); opacity: 0; }
}
/*** 泡のアニメーションパターン量産 ***/
/* 伸縮 */
.stretch0 {
 animation: stretch 2s ease 0s infinite normal;
 -webkit-animation: stretch 2s ease 0s infinite normal;
}
/* 横揺れ */
.shake0 {
 animation: shake 2s ease 0s infinite normal;
 -webkit-animation: shake 2s ease 0s infinite normal;
}
/* 移動（上昇） */
.move0 {
 animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
 -webkit-animation: move 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s infinite normal;
}
/* 配置 */
.pos0 {
 left: 0%;
}
/* 大きさ */
.scale0 {
 transform: scale(0);
 -webkit-transform: scale(0);
}
/* 以下同様に変化をつけて50個作成 */
.stretch1 {
 animation: stretch 2.2s ease 0s infinite normal;
 -webkit-animation: stretch 2.2s ease 0s infinite normal;
}
.shake1 {
 animation: shake 2.2s ease 0s infinite normal;
 -webkit-animation: shake 2.2s ease 0s infinite normal;
}
.move1 {
 animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
 -webkit-animation: move 5.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.2s infinite normal;
}
.pos1 {
 left: 2%;
}
.scale1 {
 transform: scale(0.1);
 -webkit-transform: scale(0.1);
}
.stretch2 {
 animation: stretch 2.4s ease 0s infinite normal;
 -webkit-animation: stretch 2.4s ease 0s infinite normal;
}
.shake2 {
 animation: shake 2.4s ease 0s infinite normal;
 -webkit-animation: shake 2.4s ease 0s infinite normal;
}
.move2 {
 animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
 -webkit-animation: move 5.4s cubic-bezier(0.47, 0, 0.745, 0.715) 0.4s infinite normal;
}
.pos2 {
 left: 4%;;
}
.scale2 {
 transform: scale(0.2);
 -webkit-transform: scale(0.2);
}
.stretch3 {
 animation: stretch 2.6s ease 0s infinite normal;
 -webkit-animation: stretch 2.6s ease 0s infinite normal;
}
.shake3 {
 animation: shake 2.6s ease 0s infinite normal;
 -webkit-animation: shake 2.6s ease 0s infinite normal;
}
.move3 {
 animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
 -webkit-animation: move 5.6s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s infinite normal;
}
.pos3 {
 left: 6%;
}
.scale3 {
 transform: scale(0.3);
 -webkit-transform: scale(0.3);
}
.stretch4 {
 animation: stretch 2.8s ease 0s infinite normal;
 -webkit-animation: stretch 2.8s ease 0s infinite normal;
}
.shake4 {
 animation: shake 2.8s ease 0s infinite normal;
 -webkit-animation: shake 2.8s ease 0s infinite normal;
}
.move4 {
 animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
 -webkit-animation: move 5.8s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s infinite normal;
}
.pos4 {
 left: 8%;
}
.scale4 {
 transform: scale(0.4);
 -webkit-transform: scale(0.4);
}
.stretch5 {
 animation: stretch 3s ease 0s infinite normal;
 -webkit-animation: stretch 3s ease 0s infinite normal;
}
.shake5 {
 animation: shake 3s ease 0s infinite normal;
 -webkit-animation: shake 3s ease 0s infinite normal;
}
.move5 {
 animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
 -webkit-animation: move 6s cubic-bezier(0.47, 0, 0.745, 0.715) 1s infinite normal;
}
.pos5 {
 left: 10%;
}
.scale5 {
 transform: scale(0.5);
 -webkit-transform: scale(0.5);
}
.stretch6 {
 animation: stretch 3.2s ease 0s infinite normal;
 -webkit-animation: stretch 3.2s ease 0s infinite normal;
}
.shake6 {
 animation: shake 3.2s ease 0s infinite normal;
 -webkit-animation: shake 3.2s ease 0s infinite normal;
}
.move6 {
 animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
 -webkit-animation: move 6.2s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s infinite normal;
}
.pos6 {
 left: 12%;
}
.scale6 {
 transform: scale(0.6);
 -webkit-transform: scale(0.6);
}
.stretch7 {
 animation: stretch 3.4s ease 0s infinite normal;
 -webkit-animation: stretch 3.4s ease 0s infinite normal;
}
.shake7 {
 animation: shake 3.4s ease 0s infinite normal;
 -webkit-animation: shake 3.4s ease 0s infinite normal;
}
.move7 {
 animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
 -webkit-animation: move 6.4s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4s infinite normal;
}
.pos7 {
 left: 14%;
}
.scale7 {
 transform: scale(0.7);
 -webkit-transform: scale(0.7);
}
.stretch8 {
 animation: stretch 3.6s ease 0s infinite normal;
 -webkit-animation: stretch 3.6s ease 0s infinite normal;
}
.shake8 {
 animation: shake 3.6s ease 0s infinite normal;
 -webkit-animation: shake 3.6s ease 0s infinite normal;
}
.move8 {
 animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
 -webkit-animation: move 6.6s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s infinite normal;
}
.pos8 {
 left: 16%;
}
.scale8 {
 transform: scale(0.8);
 -webkit-transform: scale(0.8);
}
.stretch9 {
 animation: stretch 3.8s ease 0s infinite normal;
 -webkit-animation: stretch 3.8s ease 0s infinite normal;
}
.shake9 {
 animation: shake 3.8s ease 0s infinite normal;
 -webkit-animation: shake 3.8s ease 0s infinite normal;
}
.move9 {
 animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
 -webkit-animation: move 6.8s cubic-bezier(0.47, 0, 0.745, 0.715) 1.8s infinite normal;
}
.pos9 {
 left: 18%;
}
.scale9 {
 transform: scale(0.9);
 -webkit-transform: scale(0.9);
}
.stretch10 {
 animation: stretch 4s ease 0s infinite normal;
 -webkit-animation: stretch 4s ease 0s infinite normal; }

.shake10 {
 animation: shake 4s ease 0s infinite normal;
 -webkit-animation: shake 4s ease 0s infinite normal; }

.move10 {
 animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
 -webkit-animation: move 7s cubic-bezier(0.47, 0, 0.745, 0.715) 2s infinite normal;
}
.pos10 {
 left: 20%;
}
.scale10 {
 transform: scale(1);
 -webkit-transform: scale(1);
}
.stretch11 {
 animation: stretch 4.2s ease 0s infinite normal;
 -webkit-animation: stretch 4.2s ease 0s infinite normal;
}
.shake11 {
 animation: shake 4.2s ease 0s infinite normal;
 -webkit-animation: shake 4.2s ease 0s infinite normal;
}
.move11 {
 animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
 -webkit-animation: move 7.2s cubic-bezier(0.47, 0, 0.745, 0.715) 2.2s infinite normal;
}
.pos11 {
 left: 22%;
}
.scale11 {
 transform: scale(1.1);
 -webkit-transform: scale(1.1);
}
.stretch12 {
 animation: stretch 4.4s ease 0s infinite normal;
 -webkit-animation: stretch 4.4s ease 0s infinite normal;
}
.shake12 {
 animation: shake 4.4s ease 0s infinite normal;
 -webkit-animation: shake 4.4s ease 0s infinite normal;
}
.move12 {
 animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
 -webkit-animation: move 7.4s cubic-bezier(0.47, 0, 0.745, 0.715) 2.4s infinite normal;
}
.pos12 {
 left: 24%;
}
.scale12 {
 transform: scale(1.2);
 -webkit-transform: scale(1.2);
}
.stretch13 {
 animation: stretch 4.6s ease 0s infinite normal;
 -webkit-animation: stretch 4.6s ease 0s infinite normal;
}
.shake13 {
 animation: shake 4.6s ease 0s infinite normal;
 -webkit-animation: shake 4.6s ease 0s infinite normal;
}
.move13 {
 animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
 -webkit-animation: move 7.6s cubic-bezier(0.47, 0, 0.745, 0.715) 2.6s infinite normal;
}
.pos13 {
 left: 26%;
}
.scale13 {
 transform: scale(1.3);
 -webkit-transform: scale(1.3);
}
.stretch14 {
 animation: stretch 4.8s ease 0s infinite normal;
 -webkit-animation: stretch 4.8s ease 0s infinite normal;
}
.shake14 {
 animation: shake 4.8s ease 0s infinite normal;
 -webkit-animation: shake 4.8s ease 0s infinite normal;
}
.move14 {
 animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
 -webkit-animation: move 7.8s cubic-bezier(0.47, 0, 0.745, 0.715) 2.8s infinite normal;
}
.pos14 {
 left: 28%;
}
.scale14 {
 transform: scale(1.4);
 -webkit-transform: scale(1.4);
}
.stretch15 {
 animation: stretch 5s ease 0s infinite normal;
 -webkit-animation: stretch 5s ease 0s infinite normal;
}
.shake15 {
 animation: shake 5s ease 0s infinite normal;
 -webkit-animation: shake 5s ease 0s infinite normal;
}
.move15 {
 animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
 -webkit-animation: move 8s cubic-bezier(0.47, 0, 0.745, 0.715) 3s infinite normal;
}
.pos15 {
 left: 30%;
}
.scale15 {
 transform: scale(1.5);
 -webkit-transform: scale(1.5);
}
.stretch16 {
 animation: stretch 5.2s ease 0s infinite normal;
 -webkit-animation: stretch 5.2s ease 0s infinite normal;
}
.shake16 {
 animation: shake 5.2s ease 0s infinite normal;
 -webkit-animation: shake 5.2s ease 0s infinite normal;
}
.move16 {
 animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
 -webkit-animation: move 8.2s cubic-bezier(0.47, 0, 0.745, 0.715) 3.2s infinite normal;
}
.pos16 {
 left: 32%;
}
.scale16 {
 transform: scale(1.6);
 -webkit-transform: scale(1.6);
}
.stretch17 {
 animation: stretch 5.4s ease 0s infinite normal;
 -webkit-animation: stretch 5.4s ease 0s infinite normal;
}
.shake17 {
 animation: shake 5.4s ease 0s infinite normal;
 -webkit-animation: shake 5.4s ease 0s infinite normal;
}
.move17 {
 animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
 -webkit-animation: move 8.4s cubic-bezier(0.47, 0, 0.745, 0.715) 3.4s infinite normal;
}
.pos17 {
 left: 34%; }

.scale17 {
 transform: scale(1.7);
 -webkit-transform: scale(1.7);
}
.stretch18 {
 animation: stretch 5.6s ease 0s infinite normal;
 -webkit-animation: stretch 5.6s ease 0s infinite normal;
}
.shake18 {
 animation: shake 5.6s ease 0s infinite normal;
 -webkit-animation: shake 5.6s ease 0s infinite normal;
}
.move18 {
 animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
 -webkit-animation: move 8.6s cubic-bezier(0.47, 0, 0.745, 0.715) 3.6s infinite normal;
}
.pos18 {
 left: 36%;
}
.scale18 {
 transform: scale(1.8);
 -webkit-transform: scale(1.8);
}
.stretch19 {
 animation: stretch 5.8s ease 0s infinite normal;
 -webkit-animation: stretch 5.8s ease 0s infinite normal;
}
.shake19 {
 animation: shake 5.8s ease 0s infinite normal;
 -webkit-animation: shake 5.8s ease 0s infinite normal;
}
.move19 {
 animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
 -webkit-animation: move 8.8s cubic-bezier(0.47, 0, 0.745, 0.715) 3.8s infinite normal;
}
.pos19 {
 left: 38%;
}
.scale19 {
 transform: scale(1.9);
 -webkit-transform: scale(1.9);
}
.stretch20 {
 animation: stretch 6s ease 0s infinite normal;
 -webkit-animation: stretch 6s ease 0s infinite normal;
}
.shake20 {
 animation: shake 6s ease 0s infinite normal;
 -webkit-animation: shake 6s ease 0s infinite normal;
}
.move20 {
 animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
 -webkit-animation: move 9s cubic-bezier(0.47, 0, 0.745, 0.715) 4s infinite normal;
}
.pos20 {
 left: 40%;
}
.scale20 {
 transform: scale(2);
 -webkit-transform: scale(2);
}
.stretch21 {
 animation: stretch 6.2s ease 0s infinite normal;
 -webkit-animation: stretch 6.2s ease 0s infinite normal;
}
.shake21 {
 animation: shake 6.2s ease 0s infinite normal;
 -webkit-animation: shake 6.2s ease 0s infinite normal;
}
.move21 {
 animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
 -webkit-animation: move 9.2s cubic-bezier(0.47, 0, 0.745, 0.715) 4.2s infinite normal;
}
.pos21 {
 left: 42%;
}
.scale21 {
 transform: scale(2.1);
 -webkit-transform: scale(2.1);
}
.stretch22 {
 animation: stretch 6.4s ease 0s infinite normal;
 -webkit-animation: stretch 6.4s ease 0s infinite normal;
}
.shake22 {
 animation: shake 6.4s ease 0s infinite normal;
 -webkit-animation: shake 6.4s ease 0s infinite normal;
}
.move22 {
 animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
 -webkit-animation: move 9.4s cubic-bezier(0.47, 0, 0.745, 0.715) 4.4s infinite normal;
}
.pos22 {
 left: 44%;
}
.scale22 {
 transform: scale(2.2);
 -webkit-transform: scale(2.2);
}
.stretch23 {
 animation: stretch 6.6s ease 0s infinite normal;
 -webkit-animation: stretch 6.6s ease 0s infinite normal;
}
.shake23 {
 animation: shake 6.6s ease 0s infinite normal;
 -webkit-animation: shake 6.6s ease 0s infinite normal;
}
.move23 {
 animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
 -webkit-animation: move 9.6s cubic-bezier(0.47, 0, 0.745, 0.715) 4.6s infinite normal;
}
.pos23 {
 left: 46%;
}
.scale23 {
 transform: scale(2.3);
 -webkit-transform: scale(2.3);
}
.stretch24 {
 animation: stretch 6.8s ease 0s infinite normal;
 -webkit-animation: stretch 6.8s ease 0s infinite normal;
}
.shake24 {
 animation: shake 6.8s ease 0s infinite normal;
 -webkit-animation: shake 6.8s ease 0s infinite normal;
}
.move24 {
 animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
 -webkit-animation: move 9.8s cubic-bezier(0.47, 0, 0.745, 0.715) 4.8s infinite normal;
}
.pos24 {
 left: 48%;
}
.scale24 {
 transform: scale(2.4);
 -webkit-transform: scale(2.4);
}
.stretch25 {
 animation: stretch 7s ease 0s infinite normal;
 -webkit-animation: stretch 7s ease 0s infinite normal;
}
.shake25 {
 animation: shake 7s ease 0s infinite normal;
 -webkit-animation: shake 7s ease 0s infinite normal;
}
.move25 {
 animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
 -webkit-animation: move 10s cubic-bezier(0.47, 0, 0.745, 0.715) 5s infinite normal;
}
.pos25 {
 left: 50%;
}
.scale25 {
 transform: scale(2.5);
 -webkit-transform: scale(2.5);
}
.stretch26 {
 animation: stretch 7.2s ease 0s infinite normal;
 -webkit-animation: stretch 7.2s ease 0s infinite normal;
}
.shake26 {
 animation: shake 7.2s ease 0s infinite normal;
 -webkit-animation: shake 7.2s ease 0s infinite normal;
}
.move26 {
 animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
 -webkit-animation: move 10.2s cubic-bezier(0.47, 0, 0.745, 0.715) 5.2s infinite normal;
}
.pos26 {
 left: 52%;
}
.scale26 {
 transform: scale(2.6);
 -webkit-transform: scale(2.6);
}
.stretch27 {
 animation: stretch 7.4s ease 0s infinite normal;
 -webkit-animation: stretch 7.4s ease 0s infinite normal;
}
.shake27 {
 animation: shake 7.4s ease 0s infinite normal;
 -webkit-animation: shake 7.4s ease 0s infinite normal;
}
.move27 {
 animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
 -webkit-animation: move 10.4s cubic-bezier(0.47, 0, 0.745, 0.715) 5.4s infinite normal;
}
.pos27 {
 left: 54%;
}
.scale27 {
 transform: scale(2.7);
 -webkit-transform: scale(2.7);
}
.stretch28 {
 animation: stretch 7.6s ease 0s infinite normal;
 -webkit-animation: stretch 7.6s ease 0s infinite normal;
}
.shake28 {
 animation: shake 7.6s ease 0s infinite normal;
 -webkit-animation: shake 7.6s ease 0s infinite normal;
}
.move28 {
 animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
 -webkit-animation: move 10.6s cubic-bezier(0.47, 0, 0.745, 0.715) 5.6s infinite normal;
}
.pos28 {
 left: 56%;
}
.scale28 {
 transform: scale(2.8);
 -webkit-transform: scale(2.8);
}
.stretch29 {
 animation: stretch 7.8s ease 0s infinite normal;
 -webkit-animation: stretch 7.8s ease 0s infinite normal;
}
.shake29 {
 animation: shake 7.8s ease 0s infinite normal;
 -webkit-animation: shake 7.8s ease 0s infinite normal;
}
.move29 {
 animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
 -webkit-animation: move 10.8s cubic-bezier(0.47, 0, 0.745, 0.715) 5.8s infinite normal;
}
.pos29 {
 left: 58%;
}
.scale29 {
 transform: scale(2.9);
 -webkit-transform: scale(2.9);
}
.stretch30 {
 animation: stretch 8s ease 0s infinite normal;
 -webkit-animation: stretch 8s ease 0s infinite normal;
}
.shake30 {
 animation: shake 8s ease 0s infinite normal;
 -webkit-animation: shake 8s ease 0s infinite normal;
}
.move30 {
 animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
 -webkit-animation: move 11s cubic-bezier(0.47, 0, 0.745, 0.715) 6s infinite normal;
}
.pos30 {
 left: 60%;
}
.scale30 {
 transform: scale(3);
 -webkit-transform: scale(3);
}
.stretch31 {
 animation: stretch 8.2s ease 0s infinite normal;
 -webkit-animation: stretch 8.2s ease 0s infinite normal;
}
.shake31 {
 animation: shake 8.2s ease 0s infinite normal;
 -webkit-animation: shake 8.2s ease 0s infinite normal;
}
.move31 {
 animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
 -webkit-animation: move 11.2s cubic-bezier(0.47, 0, 0.745, 0.715) 6.2s infinite normal;
}
.pos31 {
 left: 62%;
}
.scale31 {
 transform: scale(3.1);
 -webkit-transform: scale(3.1);
}
.stretch32 {
 animation: stretch 8.4s ease 0s infinite normal;
 -webkit-animation: stretch 8.4s ease 0s infinite normal;
}
.shake32 {
 animation: shake 8.4s ease 0s infinite normal;
 -webkit-animation: shake 8.4s ease 0s infinite normal;
}
.move32 {
 animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
 -webkit-animation: move 11.4s cubic-bezier(0.47, 0, 0.745, 0.715) 6.4s infinite normal;
}
.pos32 {
 left: 64%;
}
.scale32 {
 transform: scale(3.2);
 -webkit-transform: scale(3.2);
}
.stretch33 {
 animation: stretch 8.6s ease 0s infinite normal;
 -webkit-animation: stretch 8.6s ease 0s infinite normal;
}
.shake33 {
 animation: shake 8.6s ease 0s infinite normal;
 -webkit-animation: shake 8.6s ease 0s infinite normal;
}
.move33 {
 animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
 -webkit-animation: move 11.6s cubic-bezier(0.47, 0, 0.745, 0.715) 6.6s infinite normal;
}
.pos33 {
 left: 66%;
}
.scale33 {
 transform: scale(3.3);
 -webkit-transform: scale(3.3);
}
.stretch34 {
 animation: stretch 8.8s ease 0s infinite normal;
 -webkit-animation: stretch 8.8s ease 0s infinite normal;
}
.shake34 {
 animation: shake 8.8s ease 0s infinite normal;
 -webkit-animation: shake 8.8s ease 0s infinite normal;
}
.move34 {
 animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
 -webkit-animation: move 11.8s cubic-bezier(0.47, 0, 0.745, 0.715) 6.8s infinite normal;
}
.pos34 {
 left: 68%;
}
.scale34 {
 transform: scale(3.4);
 -webkit-transform: scale(3.4);
}
.stretch35 {
 animation: stretch 9s ease 0s infinite normal;
 -webkit-animation: stretch 9s ease 0s infinite normal;
}
.shake35 {
 animation: shake 9s ease 0s infinite normal;
 -webkit-animation: shake 9s ease 0s infinite normal;
}
.move35 {
 animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
 -webkit-animation: move 12s cubic-bezier(0.47, 0, 0.745, 0.715) 7s infinite normal;
}
.pos35 {
 left: 70%;
}
.scale35 {
 transform: scale(3.5);
 -webkit-transform: scale(3.5);
}
.stretch36 {
 animation: stretch 9.2s ease 0s infinite normal;
 -webkit-animation: stretch 9.2s ease 0s infinite normal;
}
.shake36 {
 animation: shake 9.2s ease 0s infinite normal;
 -webkit-animation: shake 9.2s ease 0s infinite normal;
}
.move36 {
 animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
 -webkit-animation: move 12.2s cubic-bezier(0.47, 0, 0.745, 0.715) 7.2s infinite normal;
}
.pos36 {
 left: 72%;
}
.scale36 {
 transform: scale(3.6);
 -webkit-transform: scale(3.6);
}
.stretch37 {
 animation: stretch 9.4s ease 0s infinite normal;
 -webkit-animation: stretch 9.4s ease 0s infinite normal;
}
.shake37 {
 animation: shake 9.4s ease 0s infinite normal;
 -webkit-animation: shake 9.4s ease 0s infinite normal;
}
.move37 {
 animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
 -webkit-animation: move 12.4s cubic-bezier(0.47, 0, 0.745, 0.715) 7.4s infinite normal;
}
.pos37 {
 left: 74%;
}
.scale37 {
 transform: scale(3.7);
 -webkit-transform: scale(3.7);
}
.stretch38 {
 animation: stretch 9.6s ease 0s infinite normal;
 -webkit-animation: stretch 9.6s ease 0s infinite normal;
}
.shake38 {
 animation: shake 9.6s ease 0s infinite normal;
 -webkit-animation: shake 9.6s ease 0s infinite normal;
}
.move38 {
 animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
 -webkit-animation: move 12.6s cubic-bezier(0.47, 0, 0.745, 0.715) 7.6s infinite normal;
}
.pos38 {
 left: 76%;
}
.scale38 {
 transform: scale(3.8);
 -webkit-transform: scale(3.8);
}
.stretch39 {
 animation: stretch 9.8s ease 0s infinite normal;
 -webkit-animation: stretch 9.8s ease 0s infinite normal;
}
.shake39 {
 animation: shake 9.8s ease 0s infinite normal;
 -webkit-animation: shake 9.8s ease 0s infinite normal;
}
.move39 {
 animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
 -webkit-animation: move 12.8s cubic-bezier(0.47, 0, 0.745, 0.715) 7.8s infinite normal;
}
.pos39 {
 left: 78%;
}
.scale39 {
 transform: scale(3.9);
 -webkit-transform: scale(3.9);
}
.stretch40 {
 animation: stretch 10s ease 0s infinite normal;
 -webkit-animation: stretch 10s ease 0s infinite normal;
}
.shake40 {
 animation: shake 10s ease 0s infinite normal;
 -webkit-animation: shake 10s ease 0s infinite normal;
}
.move40 {
 animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
 -webkit-animation: move 13s cubic-bezier(0.47, 0, 0.745, 0.715) 8s infinite normal;
}
.pos40 {
 left: 80%;
}
.scale40 {
 transform: scale(4);
 -webkit-transform: scale(4);
}
.stretch41 {
 animation: stretch 10.2s ease 0s infinite normal;
 -webkit-animation: stretch 10.2s ease 0s infinite normal;
}
.shake41 {
 animation: shake 10.2s ease 0s infinite normal;
 -webkit-animation: shake 10.2s ease 0s infinite normal;
}
.move41 {
 animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
 -webkit-animation: move 13.2s cubic-bezier(0.47, 0, 0.745, 0.715) 8.2s infinite normal;
}
.pos41 {
 left: 82%;
}
.scale41 {
 transform: scale(4.1);
 -webkit-transform: scale(4.1);
}
.stretch42 {
 animation: stretch 10.4s ease 0s infinite normal;
 -webkit-animation: stretch 10.4s ease 0s infinite normal;
}
.shake42 {
 animation: shake 10.4s ease 0s infinite normal;
 -webkit-animation: shake 10.4s ease 0s infinite normal;
}
.move42 {
 animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
 -webkit-animation: move 13.4s cubic-bezier(0.47, 0, 0.745, 0.715) 8.4s infinite normal;
}
.pos42 {
 left: 84%;
}
.scale42 {
 transform: scale(4.2);
 -webkit-transform: scale(4.2);
}
.stretch43 {
 animation: stretch 10.6s ease 0s infinite normal;
 -webkit-animation: stretch 10.6s ease 0s infinite normal;
}
.shake43 {
 animation: shake 10.6s ease 0s infinite normal;
 -webkit-animation: shake 10.6s ease 0s infinite normal;
}
.move43 {
 animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
 -webkit-animation: move 13.6s cubic-bezier(0.47, 0, 0.745, 0.715) 8.6s infinite normal;
}
.pos43 {
 left: 86%;
}
.scale43 {
 transform: scale(4.3);
 -webkit-transform: scale(4.3);
}
.stretch44 {
 animation: stretch 10.8s ease 0s infinite normal;
 -webkit-animation: stretch 10.8s ease 0s infinite normal;
}
.shake44 {
 animation: shake 10.8s ease 0s infinite normal;
 -webkit-animation: shake 10.8s ease 0s infinite normal;
}
.move44 {
 animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
 -webkit-animation: move 13.8s cubic-bezier(0.47, 0, 0.745, 0.715) 8.8s infinite normal;
}
.pos44 {
 left: 88%;
}
.scale44 {
 transform: scale(4.4);
 -webkit-transform: scale(4.4);
}
.stretch45 {
 animation: stretch 11s ease 0s infinite normal;
 -webkit-animation: stretch 11s ease 0s infinite normal;
}
.shake45 {
 animation: shake 11s ease 0s infinite normal;
 -webkit-animation: shake 11s ease 0s infinite normal;
}
.move45 {
 animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
 -webkit-animation: move 14s cubic-bezier(0.47, 0, 0.745, 0.715) 9s infinite normal;
}
.pos45 {
 left: 90%;
}
.scale45 {
 transform: scale(4.5);
 -webkit-transform: scale(4.5);
}
.stretch46 {
 animation: stretch 11.2s ease 0s infinite normal;
 -webkit-animation: stretch 11.2s ease 0s infinite normal;
}
.shake46 {
 animation: shake 11.2s ease 0s infinite normal;
 -webkit-animation: shake 11.2s ease 0s infinite normal;
}
.move46 {
 animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
 -webkit-animation: move 14.2s cubic-bezier(0.47, 0, 0.745, 0.715) 9.2s infinite normal;
}
.pos46 {
 left: 92%;
}
.scale46 {
 transform: scale(4.6);
 -webkit-transform: scale(4.6);
}
.stretch47 {
 animation: stretch 11.4s ease 0s infinite normal;
 -webkit-animation: stretch 11.4s ease 0s infinite normal;
}
.shake47 {
 animation: shake 11.4s ease 0s infinite normal;
 -webkit-animation: shake 11.4s ease 0s infinite normal;
}
.move47 {
 animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
 -webkit-animation: move 14.4s cubic-bezier(0.47, 0, 0.745, 0.715) 9.4s infinite normal;
}
.pos47 {
 left: 94%;
}
.scale47 {
 transform: scale(4.7);
 -webkit-transform: scale(4.7);
}
.stretch48 {
 animation: stretch 11.6s ease 0s infinite normal;
 -webkit-animation: stretch 11.6s ease 0s infinite normal;
}
.shake48 {
 animation: shake 11.6s ease 0s infinite normal;
 -webkit-animation: shake 11.6s ease 0s infinite normal;
}
.move48 {
 animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
 -webkit-animation: move 14.6s cubic-bezier(0.47, 0, 0.745, 0.715) 9.6s infinite normal;
}
.pos48 {
 left: 96%;
}
.scale48 {
 transform: scale(4.8);
 -webkit-transform: scale(4.8);
}
.stretch49 {
 animation: stretch 11.8s ease 0s infinite normal;
 -webkit-animation: stretch 11.8s ease 0s infinite normal;
}
.shake49 {
 animation: shake 11.8s ease 0s infinite normal;
 -webkit-animation: shake 11.8s ease 0s infinite normal;
}
.move49 {
 animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
 -webkit-animation: move 14.8s cubic-bezier(0.47, 0, 0.745, 0.715) 9.8s infinite normal;
}
.pos49 {
 left: 98%;
}
.scale49 {
 transform: scale(4.9);
 -webkit-transform: scale(4.9);
}
.stretch50 {
 animation: stretch 12s ease 0s infinite normal;
 -webkit-animation: stretch 12s ease 0s infinite normal;
}
.shake50 {
 animation: shake 12s ease 0s infinite normal;
 -webkit-animation: shake 12s ease 0s infinite normal;
}
.move50 {
 animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
 -webkit-animation: move 15s cubic-bezier(0.47, 0, 0.745, 0.715) 10s infinite normal;
}
.pos50 {
 left: 100%;
}
.scale50 {
 transform: scale(5);
 -webkit-transform: scale(5);
}

JS

jQueryでHTMLタグを量産します。

jQuery
var winHeight;
var field = $(".field");
winRsize(); //関数の実行
$(window).resize(function() {
	winRsize(); //ブラウザのウィンドウサイズが変更されるたびに検知してリサイズ
});
function winRsize() {
	winHeight = $(window).height(); //ウィンドウの高さを取得
	field.height(winHeight); //ウィンドウの高さをfieldクラスの高さとする
}
var items = 50; //50個量産
for (var i=0; i<=items; i++) {
	var move = Math.ceil( Math.random()*50 );
	var pos = Math.ceil( Math.random()*50 );
	var scale = Math.ceil( Math.random()*10 );
	var stretch = Math.ceil( Math.random()*5 );
	var shake = Math.ceil( Math.random()*5 );
	field.append('
');
}

以下のサイトを参考にさせていただきました。

CSSアニメーションで水中の泡を表現する方法 | aekana
CSSアニメーションで水中の泡を表現する方法についての記事です。
design.aekana.com
CSS3（sass使用）と少しのJavascriptで泡のアニメーションをつくる。
CSS3のanimationを使用した泡がゆらゆら浮上するアニメーションデモです。
ds-overdesign.com

以上、ご参考になれば幸いです。

皆さまにすべてのよきことが雪崩のごとく起きますように。

jQueryCSS
スポンサーリンク
スポンサーリンク
シェアする
J.をフォローする
スポンサーリンク
アトリエJ.
アトリエJ.
スポンサーリンク

コメント

  1. フジイ より:
    2022年2月8日 10:58 AM

    参考にさせて頂きました。

    １つ質問なのですが、私が試作しているホームページではホーム画面に別のJavaScriptとCssを用いた背景を採用しており、そこから下にスクロールした際に筆者様が今回紹介されていた背景を繋げようと考えているのですが、
    その場合SCSSの最初の部分（ページのどこにこの画面を設置するかの設定をしている箇所）を変更すれば可能でしょうか。

    まだまだプログラミング初心者の為、意図が伝わりずらい言い方になってしまい恐縮ですが、是非お教え頂ければ幸いです。

    返信
    • J. J. より:
      2022年2月8日 5:47 PM

      >フジイ様
      コメントありがとうございます。

      ご質問に対する回答ですが、“そこから下にスクロールした際に…”と仰るのが、場所が決まっているのか、それとも「スクロールをきっかけに」ということなのかで、変わってくると思います。

      ご紹介している泡のアニメーションは、背景というより、divタグなどの要素の中で行われるものですので、アニメーションを行いたい場所が要素として決まっているのでしたら、その要素に field というクラス名を付加すれば、あとはこのページに記載のままで使えると思います。
      まだ要素が無いのでしたら、アニメーションを行いたい場所にdiv要素を新たに置けば良いと思います。

      “そこから下にスクロールした際に…”と仰るのが、「スクロールをきっかけに」という意味でしたら、別途、JavaScriptなどが必要になると思います。

      もし、見当違いな返信をしていたら申し訳ありません。
      よろしくお願いいたします。

      返信
      • 藤井賢也 より:
        2022年2月10日 10:49 AM

        お答えいただきありがとうございます。

        私の場合後者にあたるので、別途JavaScriptを作成してみます。
        とても分かりやすく、また丁寧にご返答頂きありがとうございました。

        返信
        • J. J. より:
          2022年2月10日 3:34 PM

          >藤井様

          少しでもお役に立てたのなら嬉しいです。
          スクロール判定には下記の記事もご参考にあれば幸いです。

          https://se.ekaki-j.com/javascript-navigation-pagetop/

          返信
          • フジイケンヤ より:
            2022年2月14日 9:53 AM

            ありがとうございます。
            大変参考になります。

            もう１つお伺いしたいのですが、
            「https://code.jquery.com/jquery-3.6.0.min.js」のようなjQueryのURLはどの部分に挿入されていますでしょうか。

            度々お伺いしてしまい心苦しいのですが、お教え頂ければ幸いです。

  2. J. J. より:
    2022年2月14日 1:24 PM

    >フジイ様
    ありがとうございます。

    私はheadタグ内で他のjsファイルよりも前に入れています（jQueryは実行するスクリプトよりも先に読み込む必要がありますので）。

    ご参考になれば幸いです。

    返信
  3. フジイケンヤ より:
    2022年2月24日 1:51 PM

    親身にご対応頂き誠にありがとうございます。
    お陰様で試作していたホームページも随分と進展致しました。

    最後に一点だけお聞きしたいのですが、
    私も方々を調べるとCSSにて「transform」を使用するとポジション要素の「fixed」が使用できないと分かったのですが、
    それでも「fixed」を用いたい場合、
    どのようにすれば良いでしょうか。

    返信
    • J. J. より:
      2022年2月25日 2:58 PM

      >フジイさま
      ありがとうございます。

      ちょっと状況がわからないのですが、どういった不具合があって、どの要素に transform を使用しているのか、fixed している要素との関係性は？…など分からないと何とも言えないのですが…。
      例えば、以下ページにあるように、親要素に transform を使用していたりでしょうか？

      https://qiita.com/tiwu_dev/items/797459d9789db4379691

      返信
タイトルとURLをコピーしました