Add Magical Snowfall to Your Squarespace Site

Follow these steps to add a snowfall effect to your Squarespace site. Enjoy adding a touch of winter magic to your Squarespace site!

---

Step 1: Add the JavaScript

1. Log in to your Squarespace account.

2. Navigate to Settings > Advanced > Code Injection.

3. Scroll to the Footer section.

4. Paste the following JavaScript code into the footer code box and save your changes.

<script>
document.addEventListener("DOMContentLoaded", function () {
  const body = document.body; // Use the entire page as the container
  const snowflakes = [];
  const snowflakeCount = 75; // Number of snowflakes created per batch
  const snowDuration = 5 * 1000; // 5 seconds
  const fadeDuration = 2000; // 2 seconds fade-out

  // Check if the user has already seen the snowfall effect
  const hasSeenSnowfall = sessionStorage.getItem('seenSnowfall');

  if (!hasSeenSnowfall) {
    sessionStorage.setItem('seenSnowfall', 'true'); // Mark as seen
    let snowInterval;

    // Function to create snowflakes
    function createSnowflakes() {
      for (let i = 0; i < snowflakeCount; i++) {
        const snowflake = document.createElement('div');
        snowflake.classList.add('snowflake');
        snowflake.style.left = Math.random() * 100 + '%'; // Random horizontal position
        snowflake.style.animationDuration = Math.random() * 10 + 8 + 's'; // Very slow fall
        snowflake.style.animationDelay = Math.random() * 2 + 's'; // Stagger the start
        snowflake.style.width = snowflake.style.height = Math.random() * 8 + 5 + 'px'; // Random size
        snowflake.style.opacity = Math.random() * 0.85 + 0.05; // Random opacity between 5% and 90%
        body.appendChild(snowflake);
        snowflakes.push(snowflake);
      }
    }

    // Start creating snowflakes at an interval
    createSnowflakes();
    snowInterval = setInterval(createSnowflakes, 1000); // Create snowflakes every second

    // Stop snow after 5 seconds and globally fade out all snowflakes
    setTimeout(() => {
      clearInterval(snowInterval); // Stop creating new snowflakes

      // Apply global fade-out to all snowflakes
      const allSnowflakes = document.querySelectorAll('.snowflake');
      allSnowflakes.forEach(snowflake => {
        snowflake.style.transition = `opacity ${fadeDuration / 1000}s ease-out`; // Smooth fade-out
        snowflake.style.opacity = 0; // Gradually fade out
      });

      // Wait for the fade-out duration before removing snowflakes
      setTimeout(() => {
        allSnowflakes.forEach(snowflake => snowflake.remove());
      }, fadeDuration);
    }, snowDuration);
  }
});
</script>

---

Step 2: Add Custom CSS

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code into the Custom CSS editor:

3. Save your changes.

/* Snowflake styles */
.snowflake {
  position: absolute;
  top: -5%;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  pointer-events: none;
  z-index: 9999;
}

/* Snowfall animation */
@keyframes fall {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(110vh); /* Fall beyond the bottom */
  }
}

.snowflake {
  animation: fall linear infinite; /* Apply falling animation */
  transition: opacity 3s ease-out; /* Smooth fade-out */
}

---

Key Features of the Effect

• Display: Shows on any first page that is visited and doesn’t repeat again.

• Duration: Snowfall lasts for 15 seconds after hovering over the logo.

• Fade-Out: All snowflakes fade out smoothly over 3 seconds at the end.

• Customizable: You can adjust:

  • snowflakeCount (number of snowflakes per batch).

  • snowDuration (total duration of snowfall).

  • fadeDuration (fade-out time).

  • Snowflake size, speed, and opacity in the JavaScript and CSS.