湯気を横から見たアニメーションの作り方は見つかるんですが、真上から見たアニメーションは見つからなかったので作成。
サンプル見たほうが早いと思うので、サンプルはこちらから。
アニメーション部分をJavaScriptだけで描画すると、コマ落ちしたのでCSSのanimationを使いました。
ソース見ればわかりますが、CSSが力技。笑
不思議なもので、ある程度数が増えると、立体的に動いてるかのように見えてくるという。
使用している湯気の画像はこの3種類。
これをランダムに回転させることで、大量の湯気が発生しているように見せています。
以下、ソース解説。
まずはCSS部分。
上限を50個に決め打ちして、大量生産。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// 湯気のアニメーション $img_num: 50; //描画する画像数 #steam_box { z-index: -1; pointer-events: none; position: fixed; top: 0; bottom: 0; right: 0; left: 0; > img{ position: absolute; width: 300vw; animation: scale_anime 5s linear infinite; } @for $i from 1 through $img_num { > img:nth-of-type(#{$i}){ animation-delay: #{-$i/2}s; } } } @keyframes scale_anime { 0% { opacity: 0; transform: scale(1); } 10% { opacity: .2; } 50% { opacity: 1; } 90% { opacity: .2; } 100% { opacity: 0; transform: scale(4); } } |
JavaScript部分
ものすごく簡単に言うと、３種類の画像を、バラバラの位置に生成してるだけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
// オブジェクト数の変更 function change_steam(){ var img_num = $("#steam_num").val(); make_steam(img_num); } // 湯気の生成 function make_steam(img_num = 10){ $("#steam_box").empty(); // ウインドウサイズなどの初期値の取得 var steam = { random: { start: {}, end: {} }, window : { x: $(window).width(), y: $(window).height() }, drawing_area : { top: Math.floor($(window).height()*0.2), bottom: Math.floor($(window).height()*0.8), left:Math.floor($(window).width()*0.2), right:Math.floor($(window).width()*0.8), } } steam.drawing_area.x = (steam.drawing_area.right - steam.drawing_area.left) for(var i = 1; i <= img_num; i++){ // 画像初期設定 steam.random = { x : Math.floor( Math.random() * ( steam.drawing_area.right - steam.drawing_area.left )) + steam.drawing_area.left - (steam.window.x / 2), y : Math.floor( Math.random() * ( steam.drawing_area.bottom - steam.drawing_area.top )) + steam.drawing_area.top - (steam.window.x / 2) // 湯気の画像が正方形なので } // 画層を3種類からランダムに選択 steam.random.img = 'img/steam_'+Math.floor((Math.random() * ( 4 - 1 ) + 1))+'.png'; // ランダムに回転 steam.random.rotate = Math.floor(Math.random() * 360)+'deg'; var min_vh = 100; var max_vh = 400; // 画像の追加 $('<img src="'+steam.random.img+'" />').css({ opacity:0, width: steam.window.x+"px", top:steam.random.y+"px", left: steam.random.x+'px' }).appendTo("#steam_box"); } } $(function(){ make_steam(); // リサイズした場合の画面のリフレッシュ var timer = false; var prewidth = $(window).width(); $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var nowWidth = $(window).width(); if(prewidth !== nowWidth){ make_steam(); } prewidth = nowWidth; }, 200); }); }); |
ソース一式のダウンロードはこちらから。
ソースの使用はご自由にドゾ。