Skip to content

Commit

Permalink
Fix up the code
Browse files Browse the repository at this point in the history
  • Loading branch information
@nayakrujul
nayakrujul committed Dec 3, 2024
1 parent eab965c commit 95dd796
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 112 deletions.
157 changes: 45 additions & 112 deletions scripts/snow.js
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,50 @@
(function() {
// Create and inject CSS
const styleSheet = document.createElement("style");
styleSheet.textContent = `
.snowflake {
position: fixed;
top: -10px;
font-size: 1em;
font-family: Arial, sans-serif;
cursor: default;
user-select: none;
z-index: 999999;
pointer-events: none;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
body.dark-theme .snowflake {
color: white;
filter: drop-shadow(0 0 10px white);
text-shadow: 0 0 5px rgba(255,255,255,0.7);
}
body.light-theme .snowflake {
color: darkgray;
filter: drop-shadow(0 0 10px black);
text-shadow: 0 0 5px rgba(128,128,128,0.5);
}
const config = {
snowflakes: ['❄', '❅', '❆'], // Snowflake characters
density: 50, // Maximum number of snowflakes
interval: 75, // Interval between snowflake creation (ms)
minSize: 0.8, // Minimum snowflake size
maxSize: 1.5, // Maximum snowflake size
minDuration: 5, // Minimum animation duration (s)
maxDuration: 15, // Maximum animation duration (s)
wind: 20, // Maximum wind effect (px)
zIndex: 999 // z-index for the container
};

const container = document.createElement('div');
container.id = 'snow-container';
document.body.appendChild(container);

function createSnowflake() {
if (container.children.length >= config.density) return;

const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.innerHTML = config.snowflakes[Math.floor(Math.random() * config.snowflakes.length)];

const startPositionX = Math.random() * window.innerWidth;
const size = Math.random() * (config.maxSize - config.minSize) + config.minSize;
const duration = Math.random() * (config.maxDuration - config.minDuration) + config.minDuration;
const windOffset = Math.random() * config.wind;

Object.assign(snowflake.style, {
left: startPositionX + 'px',
transform: `scale(${size})`,
opacity: Math.random() * 0.6 + 0.4,
animation: `snowfall ${duration}s linear infinite`
});

@keyframes snowfall {
0% {
transform: translateY(0vh) translateX(0) rotate(0deg);
}
100% {
transform: translateY(100vh) translateX(20px) rotate(360deg);
}
}
container.appendChild(snowflake);
setTimeout(() => snowflake.remove(), duration * 1000);
}

#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
window.addEventListener('resize', () => {
const snowflakes = container.getElementsByClassName('snowflake');
for (let flake of snowflakes) {
if (parseInt(flake.style.left) > window.innerWidth) {
flake.style.left = Math.random() * window.innerWidth + 'px';
}
`;
document.head.appendChild(styleSheet);

// Configuration options
const config = {
snowflakes: ['❄', '❅', '❆'], // Snowflake characters
density: 50, // Maximum number of snowflakes
interval: 75, // Interval between snowflake creation (ms)
minSize: 0.8, // Minimum snowflake size
maxSize: 1.5, // Maximum snowflake size
minDuration: 5, // Minimum animation duration (s)
maxDuration: 15, // Maximum animation duration (s)
wind: 20, // Maximum wind effect (px)
zIndex: 999 // z-index for the container
};

// Create container for snowflakes
const container = document.createElement('div');
container.id = 'snow-container';
document.body.appendChild(container);

// Create a single snowflake
function createSnowflake() {
if (container.children.length >= config.density) return;

const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.innerHTML = config.snowflakes[Math.floor(Math.random() * config.snowflakes.length)];

// Random properties
const startPositionX = Math.random() * window.innerWidth;
const size = Math.random() * (config.maxSize - config.minSize) + config.minSize;
const duration = Math.random() * (config.maxDuration - config.minDuration) + config.minDuration;
const windOffset = Math.random() * config.wind;

// Apply styles
Object.assign(snowflake.style, {
left: startPositionX + 'px',
transform: `scale(${size})`,
opacity: Math.random() * 0.6 + 0.4,
animation: `snowfall ${duration}s linear infinite`
});

// Add to container and set cleanup
container.appendChild(snowflake);
setTimeout(() => snowflake.remove(), duration * 1000);
}
});

// Start snowfall effect
function startSnowfall() {
// Create initial batch
for (let i = 0; i < 10; i++) createSnowflake();

// Continue creating snowflakes
setInterval(createSnowflake, config.interval);
}

// Handle window resize
window.addEventListener('resize', () => {
const snowflakes = container.getElementsByClassName('snowflake');
for (let flake of snowflakes) {
if (parseInt(flake.style.left) > window.innerWidth) {
flake.style.left = Math.random() * window.innerWidth + 'px';
}
}
});

// Start the effect
startSnowfall();
})();
for (let i = 0; i < 10; i++) createSnowflake();
setInterval(createSnowflake, config.interval);
44 changes: 44 additions & 0 deletions styles/homepage.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,50 @@ canvas#canvas {
margin: 0;
}

.snowflake {
position: fixed;
top: -10px;
font-size: 1em;
font-family: Arial, sans-serif;
cursor: default;
user-select: none;
z-index: 999999;
pointer-events: none;
animation-timing-function: linear;
animation-iteration-count: infinite;
}

body.dark-theme .snowflake {
color: white;
filter: drop-shadow(0 0 10px white);
text-shadow: 0 0 5px rgba(255,255,255,0.7);
}

body.light-theme .snowflake {
color: darkgray;
filter: drop-shadow(0 0 10px black);
text-shadow: 0 0 5px rgba(128,128,128,0.5);
}

@keyframes snowfall {
0% {
transform: translateY(0vh) translateX(0) rotate(0deg);
}
100% {
transform: translateY(100vh) translateX(20px) rotate(360deg);
}
}

#snow-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 999;
}

@media (max-width: 999px) {
div#content {
h1#main-header {
Expand Down

0 comments on commit 95dd796

Please sign in to comment.