animierter Hintergrund - Schneeflocken - funkeln

Ich hätte gerne im Hintergrund der Artikelansicht langsam fallende Schneeflocken oder funkelnde Sterne oder ähnliches.
Wie und wo könnte ich das machen?

 

Es gibt seit Jahrzehnten JavaScripts für sowas.
Den 10-Zeiler irgendwo einfügen, am besten ins Tracking-Code-Feld.

 

sind wir hier bei myspace oder was?

 

Ja, Oldschool-Vibes! Aber vielleicht nicht ganz so retro – es geht eher um ein dezentes Winterfeeling!

Hab jetzt einiges getestet. Aber es gefällt mir sowieso nichts...

 

wie wäre es hiermit?

Code:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Schneeflocken-Effekt</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: white; /* Weißer Hintergrund */
      overflow: hidden;
    }

    .snowflake {
      position: absolute;
      top: -10px;
      color: #007bff; /* Blau für die Schneeflocken */
      font-size: 10px;
      pointer-events: none;
      animation: fall linear infinite, sparkle 2s ease-in-out infinite;
    }

    @keyframes fall {
      0% {
        transform: translateY(0) translateX(0);
      }
      100% {
        transform: translateY(100vh) translateX(calc(-50vw + 100px));
      }
    }

    @keyframes sparkle {
      0%, 100% {
        opacity: 0.8;
        text-shadow: 0 0 5px #007bff, 0 0 10px #007bff; /* Blaue Licht-Effekte */
      }
      50% {
        opacity: 1;
        text-shadow: 0 0 10px #4daeff, 0 0 20px #4daeff; /* Hellblaues Funkeln */
      }
    }
  </style>
</head>
<body>
  <script>
    const snowflakes = [];
    const snowflakeChars = ['❄', '✻', '❆', '*'];

    function createSnowflake() {
      const snowflake = document.createElement('div');
      snowflake.classList.add('snowflake');
      snowflake.innerText = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];
      snowflake.style.left = Math.random() * 100 + 'vw';
      snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
      snowflake.style.animationDuration = Math.random() * 5 + 3 + 's';
      document.body.appendChild(snowflake);
      snowflakes.push(snowflake);

      // Entferne die Schneeflocke nach Ablauf der Animation
      setTimeout(() => {
        document.body.removeChild(snowflake);
        snowflakes.shift();
      }, 8000);
    }

    setInterval(createSnowflake, 200); // Alle 200ms eine neue Schneeflocke erzeugen
  </script>
</body>
</html>

 

Damit lässt sie die Seite nicht mehr scrollen. Und ich möchte, dass die Schneeflocken im Hintergrund fallen.
Von der KI habe ich auch einen Code bekommen, aber ich habe es nicht hinbekommen, dass die Seite weiterhin normal funktioniert, die Schneeflocken ganz langsam fallen und wirklich im Hintergrund sind.

 

Hallo Michaela,
du hast eine liebevolles und deiner Zielgruppe entsprechendes Layout, alles toll gemacht: Respekt!
.....aber lass um Gottes Willen die Finger von so einem Schneeflocken-Gedöns, das ist sowas von out und mega kitschig....never ever.

 

ok. Ich sehe es ja ein.

 

Ha hihi, ich denke auch, ohne solch spielerein ist es Professioneller

 

schau gern mal bei mir. Du kannst die Anzahl der Flocken, Geschwindigkeit usw einstellen. Ich habe sie nur im oberen Bereich fallen lassen, das es nicht zu viel wird. Bei mir passen die Schneeflocken ein wenig zum Produkt, Würde ich Gurkengläser verkaufen dann wohl eher weniger. Liebe Grüße Stefan

 

Danke dir. Aber das gefällt mir irgendwie nicht.

 

Ein Daumen hoch für Michaela!
Ich hatte das mal per JS eingefügt.
Das .js habe ich bereits in den Tiefen meiner SSD ausfindig machen können..

Ansonsten mal hier suchen:
(Link nur für registrierte Nutzer sichtbar.)

>>(Link nur für registrierte Nutzer sichtbar.)

 

Ich kann bei Dir nicht nch unten scrollen.... (Chrome)

 

Dankeschön, jetzt geht es wieder.

 

Danke dir. Das schaue ich mir heute mal an.

 

Hab da auch etwas.
Wird als HTML eingebunden!
Scrollen funktioniert!

<div id="snowflake-container">
<style>
* {
--snowflake-color-1: #9eecfa;
--snowflake-color-2: #2d6eb0;
}
#snowflake-container {
position: fixed;
top: 0;
left: 0;
margin: 0;
padding: 0;
overflow: hidden;
pointer-events: none;
width: 100vw;
height: 100vh;
z-index: 2;
}
#snowflake-container * {
position: absolute;
transform: translateY(-50px);
color: var(--snowflake-color-1);
font-size: 10px;
pointer-events: none;
animation: fall linear infinite, sparkle 2s ease-in-out infinite;
transition: translateX linear;
}
@keyframes sparkle {
0%, 100% {
opacity: 0.8;
text-shadow: 0 0 5px var(--snowflake-color-1), 0 0 10px var(--snowflake-color-1);
}
50% {
opactiy: 1;
text-shadow: 0 0 10px var(--snowflake-color-2), 0 0 20px var(--snowflake-color-2);
}
}
@keyframes fall {
0% {
transform: translateY(-50px);
}
100% {
transform: translateY(calc(100vh + 50px)) translateX(var(--x-variation));
}
}
</style>
<script>
const X_VARIATION = 25;
const MIN_X_VARIATION = 10;
const DURATION_VARIATION = 4;

const CX_VARIATION = X_VARIATION * 2;
const CMIN_X_VARIATION = MIN_X_VARIATION * 2;
const CDURATION_VARIATION = 8 - DURATION_VARIATION;

const snowflakeChars = ['\u2744', '\u2745', '\u2746'];
const container = document.getElementById("snowflake-container");

function spawnSnowflake() {
const snowflake = document.createElement('div');
snowflake.innerText = snowflakeChars[Math.floor(Math.random() * snowflakeChars.length)];
snowflake.style.left = Math.random() * 100 + 'vw';
snowflake.style.fontSize = Math.random() * 8 + 12 + 'px';
var random = Math.random();
var duration = random * DURATION_VARIATION + 4;
snowflake.style.animationDuration = duration + 's';
random = ((Math.random() + random) / 2);
if (Math.random() > 0.4) {
snowflake.style.setProperty("--x-variation", (Math.round(random * CX_VARIATION) - X_VARIATION) + 'vw');
} else {
snowflake.style.setProperty("--x-variation", (Math.round(random * CMIN_X_VARIATION) - MIN_X_VARIATION) + 'vw');
}
container.appendChild(snowflake);
setTimeout(() => {
container.removeChild(snowflake);
}, Math.ceil(duration * 1000) + 100);
}

setInterval(spawnSnowflake, 100);
</script>
</div>

 

Danke euch. Ich hab mich nun doch wieder für den winterlichen Header entschieden.

 

Sieht viel Besser aus. Wirklich schön. Gute entscheidung.

LG
Thomas