1. Home
  2. Wissensdatenbank
  3. WordPress
  4. DIVI
  5. Schneeflocken auf deiner WordPress Webseite mit Divi, ohne Plugin

Schneeflocken auf deiner WordPress Webseite mit Divi, ohne Plugin

Um auf deiner WordPress-Webseite Schnee darzustellen, brauchst du kein Plugin. Füge unseren Code ein und …tada… es schneit!

1. JavaScript im Code Modul

Füge folgenden Code irgendwo auf der Seite im Code Modul ein:

<div id="snow"></div> 

<script> 
document.addEventListener('DOMContentLoaded', function(){ 
    var script = document.createElement('script'); 
    script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'; 
    script.onload = function(){ 
        particlesJS("snow", { 
            "particles": { 
                "number": { 
                    "value": 200, 
                    "density": { 
                        "enable": true, 
                        "value_area": 800 
                    } 
                }, 
                "color": { 
                    "value": "#ffffff" 
                }, 
                "opacity": { 
                    "value": 0.7, 
                    "random": false, 
                    "anim": { 
                        "enable": false 
                    } 
                }, 
                "size": { 
                    "value": 5, 
                    "random": true, 
                    "anim": { 
                        "enable": false 
                    } 
                }, 
                "line_linked": { 
                    "enable": false 
                }, 
                "move": { 
                    "enable": true, 
                    "speed": 5, 
                    "direction": "bottom", 
                    "random": true, 
                    "straight": false, 
                    "out_mode": "out", 
                    "bounce": false, 
                    "attract": { 
                        "enable": true, 
                        "rotateX": 300, 
                        "rotateY": 1200 
                    } 
                } 
            }, 
            "interactivity": { 
                "events": { 
                    "onhover": { 
                        "enable": false 
                    }, 
                    "onclick": { 
                        "enable": false 
                    }, 
                    "resize": false 
                } 
            }, 
            "retina_detect": true 
        }); 
    } 
    document.head.append(script); 
}); 
</script> 
Füge den Code in das Code Modul ein

2. CSS Code einfügen

Füge folgenden Code in den Seiteneinstellungen ein:

#snow { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    pointer-events: none; 
    z-index: 1000; 
} 
Füge den CSS-Code unter benutzerdefinierte CSS ein

3. Das Ergebnis

Auf dieser Beispielseite kannst du dir das Ergebnis anschauen!

Klicken Sie auf den unteren Button, um den Inhalt von testseite.olbricht.it zu laden.

Inhalt laden

War dieser Artikel hilfreich?

Ähnliche Artikel

Kommentar absenden

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Veröffentlicht am - 16. Nov 2021
Geändert am - 16. Nov 2021
Ansichten - 551
Likes - 3

Werbung