From ab99f5fec44322f648617cec6b303a11ebd8c292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominique=20J=C3=BCrgensen?= <mail@dominiq.eu>
Date: Mon, 27 Dec 2021 18:03:55 +0100
Subject: [PATCH] feat(parallax-css-testpage): Add min, max value for particle
lifespan.
---
src/parallax-css-testpage/particles.js | 9 +++++----
src/parallax-css-testpage/template.html | 10 ++++++++--
2 files changed, 13 insertions(+), 6 deletions(-)
diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js
index 9ea117afe..7b941ddb2 100644
--- a/src/parallax-css-testpage/particles.js
+++ b/src/parallax-css-testpage/particles.js
@@ -268,7 +268,7 @@ function Update(scene, particle) {
var particleSize = particle.size
var particleSizeStep = particleSize.step
var particleSizeAnimValue = particleSize.animValue
- var particleSizeScale = particleSize.scale
+ var particleSizeScale = particleSize.scale
var particleSizeDirection = particleSize.direction
var particlePosition = particle.position
var particlePositionX = particlePosition.x
@@ -453,6 +453,7 @@ function CreateParticles(scene, cfg) {
length: calcParticleCount(scene, density)
},
function Particle() {
+ const lifeLength = randomValue( lifespan.min, lifespan.max )
return {
position:
RandomPoint2D(
@@ -465,10 +466,10 @@ function CreateParticles(scene, cfg) {
MinMax(-speed, speed)
),
size: {
- value: size * initAnimValue,
animValue: initAnimValue,
scale: size,
- step: 1 / ((lifespan) / scene.fps),
+ value: size * initAnimValue,
+ step: 1 / ((lifeLength) / scene.fps),
direction:
// 50% Chance for the particle floating in one
// direction or the other.
@@ -497,7 +498,7 @@ function Particles(configs) {
var particles = []
var isRunning = false
var throttled = false
- var delay = 25
+ var delay = 250 // ms
var rafId = undefined
function animate(rendererList) {
diff --git a/src/parallax-css-testpage/template.html b/src/parallax-css-testpage/template.html
index fbcfd9449..47f70ecd7 100644
--- a/src/parallax-css-testpage/template.html
+++ b/src/parallax-css-testpage/template.html
@@ -99,7 +99,10 @@
color: 'white',
size: 40,
speed: 0.7,
- lifespan: 4000 // in milliseconds
+ lifespan: { // in milliseconds
+ min: 2000,
+ max: 6000,
+ }
}
}
var bgParticleConfig = {
@@ -118,7 +121,10 @@
color: 'white',
size: 5,
speed: 0.2,
- lifespan: 4000 // in milliseconds
+ lifespan: { // in milliseconds
+ min: 3500,
+ max: 6000
+ }
}
}
var animation = Particles([
--
GitLab