https://covetedcover.com/wp-content/themes/coveted_cover/assets/js/falling-petals-2.js?ver=1733279332

1// Credit to Sarah Higley
2// https://codepen.io/smhigley
3var PetalsScene = function (el) {
4	this.viewport = el;
5	this.world = document.createElement("div");
6	this.petals = [];
7
8	this.options = {
9		numPetals: 10,
10		wind: {
11			magnitude: 1.2,
12			maxSpeed: 1.3,
13			duration: 1000,
14			start: 0,
15			speed: 0,
16		},
17	};
18
19	this.width = this.viewport.offsetWidth;
20	this.height = this.viewport.offsetHeight;
21
22	// animation helper
23	this.timer = 0;
24
25	// animation state
26	this.active = false;
27
28	this._resetPetal = function (petal) {
29		if (this.active) {
30			// Fade in at edge of canvas
31			petal.el.classList.add("active");
32			// place petal towards the top left
33			// petal.x = this.width * 2 - Math.random() * this.width * 1.75;
34			petal.x = (this.width / 2) * Math.random() + this.width / 3;
35			// petal.y = -10;
36			petal.y = -10;
37			petal.z = Math.random() * 100;
38			// if (petal.x > this.width) {
39			//     petal.x = this.width + 10;
40			//     petal.y = Math.random() * this.height / 3;
41			// }
42			// at the start, the petal can be anywhere
43			// if (this.timer == 0) {
44			//     petal.y = Math.random() * this.height;
45			// }
46
47			// Choose axis of rotation.
48			// If axis is not X, chose a random static x-rotation for greater variability
49			petal.rotation.speed = Math.random() * 10;
50			var randomAxis = Math.random();
51			if (randomAxis > 0.5) {
52				petal.rotation.axis = "X";
53			} else if (randomAxis > 0.25) {
54				petal.rotation.axis = "Y";
55				petal.rotation.x = Math.random() * 180 + 90;
56			} else {
57				petal.rotation.axis = "Z";
58				petal.rotation.x = Math.random() * 360 - 180;
59				// looks weird if the rotation is too fast around this axis
60				petal.rotation.speed = Math.random() * 3;
61			}
62
63			// random speed
64			petal.xSpeedVariation = Math.random() * 0.8 - 0.4;
65			// petal.ySpeed = Math.random() + 2.5;
66			petal.ySpeed = Math.random() + 0.8;
67
68			return petal;
69		}
70	};
71
72	this._updatePetal = function (petal) {
73		if (this.active) {
74			var petalWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, petal.y);
75
76			var xSpeed = petalWindSpeed + petal.xSpeedVariation;
77			petal.x -= xSpeed;
78			petal.y += petal.ySpeed;
79			petal.rotation.value += petal.rotation.speed;
80
81			var t =
82				"translateX( " +
83				petal.x +
84				"px ) translateY( " +
85				petal.y +
86				"px ) translateZ( " +
87				petal.z +
88				"px )  rotate" +
89				petal.rotation.axis +
90				"( " +
91				petal.rotation.value +
92				"deg )";
93			if (petal.rotation.axis !== "X") {
94				t += " rotateX(" + petal.rotation.x + "deg)";
95			}
96			petal.el.style.webkitTransform = t;
97			petal.el.style.MozTransform = t;
98			petal.el.style.oTransform = t;
99			petal.el.style.transform = t;
100
101			// reset if out of view
102			if (petal.x < 100 || petal.y > this.height - 200) {
103				petal.el.classList.remove("active");
104				$this = this;
105				// Give petal chance to fade out before reset
106				setTimeout(function () {
107					$this._resetPetal(petal);
108				}, 500);
109			}
110		}
111	};
112
113	this._updateWind = function () {
114		// wind follows a sine curve: asin(b*time + c) + a
115		// where a = wind magnitude as a function of petal position, b = wind.duration, c = offset
116		// wind duration should be related to wind magnitude, e.g. higher windspeed means longer gust duration
117		if (this.active) {
118			if (this.timer === 0 || this.timer > this.options.wind.start + this.options.wind.duration) {
119				this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
120				this.options.wind.duration = this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
121				this.options.wind.start = this.timer;
122
123				var screenHeight = this.height;
124				// console.log(screenHeight);
125				this.options.wind.speed = function (t, y) {
126					// should go from full wind speed at the top, to 1/2 speed at the bottom, using petal Y
127					var a = ((this.magnitude / 2) * (screenHeight - (2 * y) / 3)) / screenHeight;
128					return a * Math.sin(((2 * Math.PI) / this.duration) * t + (3 * Math.PI) / 2) + a;
129				};
130			}
131		}
132	};
133};
134
135PetalsScene.prototype.init = function () {
136	for (var i = 0; i < this.options.numPetals; i++) {
137		var petal = {
138			el: document.createElement("div"),
139			x: 200 * Math.random(),
140			y: -30 * Math.random() - 10,
141			z: 0,
142			rotation: {
143				axis: "X",
144				value: 0,
145				speed: 0,
146				x: 0,
147			},
148			xSpeedVariation: 0,
149			ySpeed: 0,
150			path: {
151				type: 1,
152				start: 0,
153			},
154			image: 1,
155		};
156
157		this._resetPetal(petal);
158		this.petals.push(petal);
159		this.world.appendChild(petal.el);
160	}
161
162	this.world.className = "petals-scene";
163	this.viewport.appendChild(this.world);
164
165	// set perspective
166	this.world.style.webkitPerspective = "400px";
167	this.world.style.MozPerspective = "400px";
168	this.world.style.oPerspective = "400px";
169	this.world.style.perspective = "400px";
170
171	// reset window height/width on resize
172	var self = this;
173	window.onresize = function (event) {
174		self.width = self.viewport.offsetWidth;
175		self.height = self.viewport.offsetHeight;
176	};
177};
178
179PetalsScene.prototype.render = function () {
180	if (this.active) {
181		this._updateWind();
182		for (var i = 0; i < this.petals.length; i++) {
183			this._updatePetal(this.petals[i]);
184		}
185		this.timer++;
186		requestAnimationFrame(this.render.bind(this));
187	} else return;
188};
189PetalsScene.prototype.start = function () {
190	// this.timer = 0;
191	this.active = true;
192};
193PetalsScene.prototype.stop = function () {
194	// this.timer = 0;
195	this.active = false;

196};