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

Werbung