diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js index 6667cb1b628a961364bc52300e5d3b355f2c01d9..7bc7882aeaaddb6914bfacbe26cd73b18b260879 100644 --- a/src/parallax-css-testpage/particles.js +++ b/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) { - requestAnimationFrame(function () { - doRenderParticles( - rendererList.map(function doRender(render) { - return render() - }) - ) + function animate(rendererList) { + if (isRunning) { + requestAnimationFrame(function () { + animate( + rendererList.map(function doRender(render) { + return render() + }) + ) + }) + } + } + + function init() { + return configs.map(function (particleConfig) { + var scene = CreateScene(particleConfig.scene) + var particles = CreateParticles(scene, particleConfig.particles) + return Animate(scene, particles) }) } - return function () { - doRenderParticles( - 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 diff --git a/src/parallax-css-testpage/template.html b/src/parallax-css-testpage/template.html index 5fcfa853ea9803044cf3efd1f74891e04187b00d..76bcb7cd44f93d306832e5c03b82aff50bd3b311 100644 --- a/src/parallax-css-testpage/template.html +++ b/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>