プラグインを使わずに湯気のアニメーションを作成


湯気を横から見たアニメーションの作り方は見つかるんですが、真上から見たアニメーションは見つからなかったので作成。

サンプル見たほうが早いと思うので、サンプルはこちらから。

アニメーション部分を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部分
ものすごく簡単に言うと、3種類の画像を、バラバラの位置に生成してるだけです。

// オブジェクト数の変更
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);
    });
});

サンプルはこちら

ソース一式のダウンロードはこちらから。
ソースの使用はご自由にドゾ。

SNSでシェア