Fix: on window resize

src/parallax-css-testpage/particles.js

@@ -14,7 +14,7 @@ const Static = true
 
 
 function randomValue(min, max) {
-    const value = (Math.random() * (+max - +min) + +min)
+    var value = (Math.random() * (+max - +min) + +min)
     // Prevent values that can be possible boring
     return (value === 0 || value === 1)
         ? randomValue(min, max)
@@ -22,12 +22,12 @@ function randomValue(min, max) {
 }
 
 function getNodeYOffset(node) {
-    const dimensions = node.getBoundingClientRect()
+    var dimensions = node.getBoundingClientRect()
     return (dimensions) ? dimensions.y : 0
 }
 
 function getNodeHeight(node) {
-    const dimensions = node.getBoundingClientRect()
+    var dimensions = node.getBoundingClientRect()
     return (dimensions) ? dimensions.height : window.innerHeight
 }
 
@@ -67,8 +67,8 @@ function Particle({ position, direction, size, color }) {
 
 function Update(scene, particle) {
     // Cache object access
-    const width = scene.width
-    const height = scene.height
+    var width = scene.width
+    var height = scene.height
 
     // Animate the pulse effect of the particle
     //
@@ -268,23 +268,59 @@ function CreateParticles(scene, {
 
 
 function Particles(configs) {
-    function doRenderParticles(rendererList) {
+    function animate(rendererList) {
+        if (isRunning) {
             requestAnimationFrame(function () {
-            doRenderParticles(
+                animate(
                     rendererList.map(function doRender(render) {
                         return render()
                     })
                 )
             })
         }
+    }
 
-    return function () {
-        doRenderParticles(
-            configs.map(function (particleConfig) {
+    function init() {
+        return configs.map(function (particleConfig) {
             var scene     = CreateScene(particleConfig.scene)
             var particles = CreateParticles(scene, particleConfig.particles)
             return Animate(scene, particles)
         })
-        )
+    }
+
+    var particles = []
+    var isRunning = false
+    var throttled = false
+    var delay = 250
+
+    return {
+        init: function () {
+            particles = init()
+        },
+
+        run: function () {
+            if (particles.length === 0) {
+                particles = init()
+            }
+            isRunning = true
+            animate(particles)
+        },
+
+        stop: function () {
+            isRunning = false
+        },
+
+        onScreenSizeChange: function () {
+            isRunning = false
+            if (!throttled) {
+                throttled = true
+                setTimeout(function () {
+                    particles = init()
+                    isRunning = true                
+                    animate(particles)
+                    throttled = false
+                }, delay)
+            }
+        }
     }
 }
\ No newline at end of file

src/parallax-css-testpage/template.html

@@ -121,11 +121,12 @@
             }
         }
 
-        var animate = Particles([
+        var animation = Particles([
             fgParticleConfig,
             bgParticleConfig,
         ])
-        animate()
+        animation.run()
+        window.addEventListener('resize', animation.onScreenSizeChange)
     </script>
 
 </body>