Um Schneeflocken auf einer Webseite anzuzeigen und eine winterliche Atmosphäre zu erzeugen gibt es verschiedene Möglichkeiten, zum Beispiel die folgende Kombination aus HTML, CSS und JavaScript.
Dieses Beispiel zeigt, wie Sie animierte Schneeflocken generieren und über die gesamte Seite verteilen können.
HTML
Füge den folgenden Code in das `<body>`-Element deiner HTML-Seite ein:
```html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schneeflocken Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="snow-container"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css)
Erstelle eine Datei `styles.css` und füge den folgenden CSS-Code ein:
```css
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
background-color: #282c34; /* Anpassen an den gewünschten Hintergrund */
}
#snow-container {
position: relative;
width: 100%;
height: 100%;
}
.snowflake {
position: absolute;
top: -10px;
color: white;
font-size: 1em;
pointer-events: none; /* Damit die Schneeflocken keine Interaktionen blockieren */
user-select: none; /* Verhindert, dass die Flocken markiert werden */
animation: fall linear infinite;
}
@keyframes fall {
to {
transform: translateY(100vh);
}
}
```
JavaScript (script.js)
Erstelle eine Datei `script.js` und füge den folgenden JavaScript-Code ein:
```javascript
const snowContainer = document.getElementById('snow-container');
const snowflakeCount = 100; // Anzahl der Schneeflocken
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
// Zufällige Position und Größe
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px'; // Größe zwischen 10 und 20 px
// Animationsdauer, um einen Fall-Effekt zu erzielen
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // Dauer zwischen 2 und 5 Sekunden
snowflake.style.opacity = Math.random(); // Zufällige Transparenz
// Text für die Schneeflocke
snowflake.innerText = '❄'; // Verwendung des Unicode-Zeichens für die Schneeflocke
snowContainer.appendChild(snowflake);
// Schneeflocke entfernen, wenn sie am Boden angekommen ist
snowflake.addEventListener('animationend', () => {
snowflake.remove();
});
}
// Schneeflocken erzeugen
for (let i = 0; i < snowflakeCount; i++) {
createSnowflake();
}
// Neuen Schneeflocken-Spawn interpretiere damit eine kontinuierliche Animation
setInterval(createSnowflake, 500);
```
Erklärung
1. **HTML**: Der Hauptcontainer für die Schneeflocken wurde in das `<body>` eingefügt.
2. **CSS**:
- Wir haben einen dunkelgrauen Hintergrund eingestellt, der gut zu den weißen Schneeflocken passt.
- Schneeflocken sind weiß, haben eine zufällige Größe und fallen von oben nach unten.
3. **JavaScript**:
- Hier erzeugen wir eine Anzahl von Schneeflocken mit zufälligen Positionen, Größen und Animationseffekten.
- Nach der Animation wird jede Schneeflocke vom DOM entfernt, um Ressourcen zu sparen.
- Ein Intervall sorgt dafür, dass kontinuierlich neue Schneeflocken erzeugt werden.
Füge diesen Code in deine Webanwendung ein, und du wirst eine schöne Schneeflockenanimation sehen, die eine winterliche Stimmung erzeugt!
Die Schneeflocken im Head Bereich
Einloggen
Melden Sie sich in Ihrem JIMDO-Account an und navigieren Sie im linken Menü zu „Einstellungen“. Wählen Sie dort den Bereich „Head bearbeiten“.
Hineinkopieren
Fügen Sie den folgenden Code ganz unten in den Head-Bereich Ihrer Seite ein. Achten Sie darauf, keine vorhandenen Codes zu löschen oder zu ändern:
htmlcode zum einfügen:
<script type="text/javascript" src="https://u.jimcdn.com/cms/o/s51a3da6495106a16/userlayout/js/schnee.js"></script>
Speichern und Ausloggen
Speichern Sie Ihre Änderungen, loggen Sie sich aus und freuen Sie sich über das Ergebnis!
Die Funktion kann nicht garantiert werden!