I found some helpful code at and now I'm facing an issue where the snow effect is falling all over my page instead of just within the banner div...
// Storing Snowflake objects in an array
var snowflakes = [];
// Browser window size variables
var browserWidth;
var browserHeight;
// Number of visible snowflakes
var numberOfSnowflakes = 50;
// Flag for resetting snowflake positions
var resetPosition = false;
// Accessibility settings
var enableAnimations = false;
var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");
// Handle animation accessibility preferences
function setAccessibilityState() {
if (reduceMotionQuery.matches) {
enableAnimations = false;
} else {
enableAnimations = true;
}
}
setAccessibilityState();
reduceMotionQuery.addListener(setAccessibilityState);
//
// Initialization function
//
function setup() {
if (enableAnimations) {
window.addEventListener("DOMContentLoaded", generateSnowflakes, false);
window.addEventListener("resize", setResetFlag, false);
}
}
setup();
//
// Snowflake object constructor
//
function Snowflake(element, speed, xPos, yPos) {
// Set initial properties
this.element = element;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;
this.scale = 1;
// Motion variables
this.counter = 0;
this.sign = Math.random() < 0.5 ? 1 : -1;
// Initial opacity and size
this.element.style.opacity = (.9 + Math.random()) / 3;
}
//
// Function to move the snowflake
//
Snowflake.prototype.update = function() {
this.counter += this.speed / 5000;
this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);
setTransform(Math.round(this.xPos), Math.round(this.yPos), this.scale, this.element);
if (this.yPos > browserHeight) {
this.yPos = -50;
}
}
//
// Set snowflake position and size efficiently
//
function setTransform(xPos, yPos, scale, el) {
el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0) scale(${scale}, ${scale})`;
}
//
// Generate snowflakes
//
function generateSnowflakes() {
var originalSnowflake = document.querySelector(".snowflake");
var snowflakeContainer = originalSnowflake.parentNode;
snowflakeContainer.style.display = "block";
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < numberOfSnowflakes; i++) {
var snowflakeClone = originalSnowflake.cloneNode(true);
snowflakeContainer.appendChild(snowflakeClone);
var initialXPos = getPosition(50, browserWidth);
var initialYPos = getPosition(50, browserHeight);
var speed = 5 + Math.random() * 40;
var snowflakeObject = new Snowflake(snowflakeClone,
speed,
initialXPos,
initialYPos);
snowflakes.push(snowflakeObject);
}
snowflakeContainer.removeChild(originalSnowflake);
moveSnowflakes();
}
function moveSnowflakes() {
if (enableAnimations) {
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.update();
}
}
if (resetPosition) {
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < snowflakes.length; i++) {
var snowflake = snowflakes[i];
snowflake.xPos = getPosition(50, browserWidth);
snowflake.yPos = getPosition(50, browserHeight);
}
resetPosition = false;
}
requestAnimationFrame(moveSnowflakes);
}
function getPosition(offset, size) {
return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
}
function setResetFlag(e) {
resetPosition = true;
}#snowflakeContainer {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.snowflake {
position: fixed;
background-color: #ffffff;
user-select: none;
z-index: 1000;
pointer-events: none;
border-radius: 50%;
width: 10px;
height: 10px;
}<div class="mainbanner">
<div id="snowflakeContainer">
<span class="snowflake"></span>
</div>
<br>
<center>
<p class="topText" style="font-size:8vw;"> Welcome to the ultimate <br>sleepover experience</p><br><br><br>
<p class="topText" style="font-size:4vw;"> By Ultimate Teepee Party</p>
<br><br><br>
<a class="btn_1" href="book.html">Book Your Party</a></center>
</div>Is there a way to make the snow effect only appear inside the specified banner div rather than covering the entire page?