Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
particle.js
#1
Du brauchst doch nur den Code von Codepen nehmen und deine Eingaben da rein schreiben.
Und nicht vergessen den body schwarz machen sonst sieht man das bei deinen angaben nicht
**Link entfernt, weil Seite nicht mehr erreichbar **
PHP-Code:
<?php 
<!DOCTYPE HTML>
<
html>
   <head>
       <title>B A D E S P E A K</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
   
       
<link rel="stylesheet" href="assets/css/main.css" />
       <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
 
       
<style>
       body{
       background:black;
       }
       </style>
       <body>
       <div id="particles-js"></div>
               <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
                <script src="https://threejs.org/examples/js/libs/stats.min.js"></script>      
         
     
<script>
   
particlesJS
("particles-js", {
 "particles": {
   "number": {
     "value": 80,
     "density": {
       "enable": true,
       "value_area": 800
     
}
   },
   "color": {
     "value": "#ffffff"
   },
   "shape": {
     "type": "circle",
     "stroke": {
       "width": 0,
       "color": "#000000"
     },
     "polygon": {
       "nb_sides": 5
     
},
     "image": {
       "src": "img/github.svg",
       "width": 100,
       "height": 100
     
}
   },
   "opacity": {
     "value": 0.5,
     "random": false,
     "anim": {
       "enable": false,
       "speed": 1,
       "opacity_min": 0.1,
       "sync": false
     
}
   },
   "size": {
     "value": 10,
     "random": true,
     "anim": {
       "enable": false,
       "speed": 80,
       "size_min": 0.1,
       "sync": false
     
}
   },
   "line_linked": {
     "enable": true,
     "distance": 300,
     "color": "#ffffff",
     "opacity": 0.4,
     "width": 2
   
},
   "move": {
     "enable": true,
     "speed": 12,
     "direction": "none",
     "random": false,
     "straight": false,
     "out_mode": "out",
     "bounce": false,
     "attract": {
       "enable": false,
       "rotateX": 600,
       "rotateY": 1200
     
}
   }
 },
 "interactivity": {
   "detect_on": "canvas",
   "events": {
     "onhover": {
       "enable": false,
       "mode": "repulse"
     },
     "onclick": {
       "enable": true,
       "mode": "push"
     },
     "resize": true
   
},
   "modes": {
     "grab": {
       "distance": 800,
       "line_linked": {
         "opacity": 1
       
}
     },
     "bubble": {
       "distance": 800,
       "size": 80,
       "duration": 2,
       "opacity": 0.8,
       "speed": 3
     
},
     "repulse": {
       "distance": 400,
       "duration": 0.4
     
},
     "push": {
       "particles_nb": 4
     
},
     "remove": {
       "particles_nb": 2
     
}
   }
 },
 "retina_detect": true
});

         </script>
       </body>


Zitieren


Nachrichten in diesem Thema
particle.js - von admin - 22.04.2022, 00:53

Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
2 Gast/Gäste