Einbinden von Particles (Codepen)

p_e_z · 30. Januar 2020

Hallo,

ich möchte diesen Pen in meine Seite einbinden bzw. diese Funktion. (Pen: https://codepen.io/VincentGarreau/pen/pnlso)

In der index.html habe ich folgendes im Header:

Code

<script src="particles.js"></script>

Und im Body, da wo ich es haben möchte noch dieses div:

Code

<div id="particles-js"></div>

In der styles.css habe ich den CSS Code einfach reinkopiert.

Und in der .js Datei eben den Javascript code.

Nun habe ich schon gelesen, dass man auf die Eigenschaft beim Zahnrad gucken muss.

In diesem konkreten Fall wäre das dieser Link: https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js

Muss ich diesen ebenfalls im Header einbinden? Wenn ja, wie?

Die Seite läuft momentan nur lokal auf meinem PC.

Vielen Dank.

basti1012 · 30. Januar 2020

Warum fragst du das nicht in den anderen Thema wo schon mal über das Script geredet wuerde ?

Particles

Aber ja im head

Code

<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>

und das kannst du weg lassen

https://threejs.org/examples/js/libs/stats.min.js

weil du die Box oben Links ja nicht haben willst.

Lösche aber die anderen sachen auch raus die im anderen Thema schon gesagt wurden

p_e_z · 30. Januar 2020

Weil das im HTML Thread war und es hier (glaub ich) nur am Javascript scheitert.

Leider funktioniert es trotzdem nicht. Die Particles sieht man gar nicht.

basti1012 · 30. Januar 2020

Ich weiß nicht was du falsch machst.

Einfaches Copy Paste

HTML

<html>
  <head>
    <style>
body {
  margin: 0;
  font:normal 75% Arial, Helvetica, sans-serif;
}
canvas {
  display: block;
  vertical-align: bottom;
}
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
    </style>
    
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>  
  </head>
  <body>
<div id="particles-js"></div>
    <script>
      
      /* ---- particles.js config ---- */

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 380,
      "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": 3,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 6,
      "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": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 140,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

      
    </script>
  </body>
</html>

Alles anzeigen

p_e_z · 31. Januar 2020

Hab ich vergessen. Es funktioniert wenn ich alles in die html Datei schreibe. Die Vorgabe ist jedoch die .js Datei auszulagern und als externe Datei einzubinden.

basti1012 · 31. Januar 2020

das ist doch jetzt ein Witz oder ?

Code aus <script></script> In datei speichern

Dann

Fertig

p_e_z · 31. Januar 2020

Nein ist kein Scherz. Ich habe es genau so eingebunden (siehe mein erstes Posting).

Arne Drews · 31. Januar 2020

Dann stimmt der Pfad nicht oder die Konsole des Browsers gibt Aufklärung.

p_e_z · 31. Januar 2020

Das hab ich aus der Konsole:

particles.js:1 Uncaught ReferenceError: particlesJS is not defined

at particles.js:1

(anonymous) @ particles.js:1

p_e_z · 31. Januar 2020

Ist erledigt

Einbinden von Particles (Codepen)

Jetzt mitmachen!

Teilen