fire.js

2019专题/1902魔域专题/fis-conf.js

@@ -11,7 +11,12 @@ fis.hook('commonjs', {
 
 // 开启同名依赖
 fis.match('/src/modules/**', {
-    useSameNameRequire: true
+    useSameNameRequire: true,
+    parser: fis.plugin('babel-5.x', {
+        sourceMaps: true,
+        blacklist: ['useStrict', 'regenerator'],
+        loose: true
+    })
 });
 
 // fis.match('/lib/**.js', {

2019专题/1902魔域专题/src/_index.html

@@ -42,7 +42,9 @@
                 </li>
             </ul>
         </div>
-        <div class="mod-primary"></div>
+        <div class="mod-primary">
+            <canvas id="fireMask"></canvas>
+        </div>
         <div class="mod-ka">
             <div class="g-zt-inner">
                 <h2 class="mod-title mod-title1"></h2>

2019专题/1902魔域专题/src/modules/page/fire.js

@@ -0,0 +1,112 @@
+//火焰效果
+var canvas = document.getElementById('fireMask');
+var context = canvas.getContext('2d');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+requestAnimationFrame = requestAnimationFrame || webkitRequestAnimationFrame;
+
+
+var OPTIONS = {
+    AMOUNT: 70,
+    UPPER_LIMIT: 5,
+    LOWER_LIMIT: 1
+};
+
+console.log(OPTIONS.AMOUNT + ':' + OPTIONS.UPPER_LIMIT + '：' + OPTIONS.LOWER_LIMIT);
+
+var UPPER_SIZE = 3;
+var LOWER_SIZE = 4;
+
+var doIt = function doIt() {
+    return Math.random() > 0.5;
+};
+var update = function update(p) {
+    return doIt() ? Math.max(OPTIONS.LOWER_LIMIT, p - 1) : Math.min(p + 1, OPTIONS.UPPER_LIMIT);
+};
+var reset = function reset(p) {
+    p.x = p.startX;
+    p.y = p.startY;
+};
+var floored = function floored(r) {
+    return Math.floor(Math.random() * r);
+};
+var genParticles = function genParticles() {
+    return new Array(OPTIONS.AMOUNT).fill().map(function (p) {
+        var size = floored(UPPER_SIZE) + LOWER_SIZE;
+        var c = document.createElement('canvas');
+        var ctx = c.getContext('2d');
+        var r = Math.PI / 180 * floored(360);
+        var color = 'rgba(255,' + (100 + Math.floor(Math.random() * 70)) + ', 0, ' + Math.random() + ')';
+        var xDelayed = doIt();
+        var startX = xDelayed ? -(size + floored(canvas.width)) : floored(canvas.width * 0.25);
+        var startY = xDelayed ? size + floored(canvas.height * 0.25) + Math.floor(canvas.height * 0.75) :
+            canvas.height + size + floored(canvas.height);
+        c.height = size;
+        c.width = size;
+        context.globalCompositeOperation = 'multiply';
+        // ctx.filter = `blur(${Math.random() * size}px)`
+        ctx.translate(size / 2, size / 2);
+        ctx.rotate(r);
+        ctx.translate(-(size / 2), -(size / 2));
+        ctx.fillStyle = color;
+        ctx.fillRect(0, 0, size, size);
+        return {
+            x: startX,
+            y: startY,
+            startY: startY,
+            startX: startX,
+            c: c,
+            r: r,
+            vx: floored(OPTIONS.UPPER_LIMIT / 4),
+            vy: floored(OPTIONS.UPPER_LIMIT / 4),
+            size: size
+        };
+    });
+};
+
+var particles = genParticles();
+var FRAME_COUNT = 0;
+var draw = function draw() {
+    if (canvas.width !== window.innerWidth || canvas.height !== window.innerHeight) {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        particles = genParticles();
+    }
+    // context.restore()
+    var _iteratorNormalCompletion = true;
+    var _didIteratorError = false;
+    var _iteratorError = undefined;
+
+    try {
+        for (var _iterator = particles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next())
+                .done); _iteratorNormalCompletion = true) {
+            var particle = _step.value;
+
+            context.clearRect(particle.x, particle.y, particle.size, particle.size);
+            FRAME_COUNT++;
+            if (particle.y < canvas.height || particle.startX < 0) particle.x += particle.vx;
+            if (particle.x > 0 || particle.startY > canvas.height) particle.y -= particle.vy;
+            if (FRAME_COUNT % 11 === 0 && doIt()) particle.vx = update(particle.vx);
+            if (FRAME_COUNT % 13 === 0 && doIt()) particle.vy = update(particle.vy);
+            context.drawImage(particle.c, particle.x, particle.y);
+            if (particle.x > canvas.width || particle.y < -particle.size) reset(particle);
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally {
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+                _iterator.return();
+            }
+        } finally {
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+
+    requestAnimationFrame(draw);
+};
+requestAnimationFrame(draw);

2019专题/1902魔域专题/src/modules/page/index.js

@@ -1,5 +1,6 @@
 var seaLoader = require('seaLoader');
 var dialog = require('dialog.js');
+require('fire.js');
 require('jquery.gallery.js');
 
 var codeTpl = __inline("/src/tpl/code.tmpl"); //验证码

2019专题/1902魔域专题/src/sass/global.scss

@@ -158,6 +158,7 @@ body {
     }
     .mod-primary {
         height: 1229px;
+        overflow: hidden;
         background: url(../img/bg-primary.jpg) top center no-repeat;
     }
     .mod-ka {