湯気を横から見たアニメーションの作り方は見つかるんですが、真上から見たアニメーションは見つからなかったので作成。
サンプル見たほうが早いと思うので、サンプルはこちらから。
アニメーション部分をJavaScriptだけで描画すると、コマ落ちしたのでCSSのanimationを使いました。
ソース見ればわかりますが、CSSが力技。笑
不思議なもので、ある程度数が増えると、立体的に動いてるかのように見えてくるという。
使用している湯気の画像はこの3種類。
これをランダムに回転させることで、大量の湯気が発生しているように見せています。
以下、ソース解説。
まずはCSS部分。
上限を50個に決め打ちして、大量生産。
// 湯気のアニメーション
$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部分
ものすごく簡単に言うと、３種類の画像を、バラバラの位置に生成してるだけです。
// オブジェクト数の変更
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 & lt;= 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);
});
});ソース一式のダウンロードはこちらから。
ソースの使用はご自由にドゾ。