Meine Codepens ,My Codepens ,Schnee der fällt

snow_fall.php

Quell Code

<!DOCTYPE html> <html lang="de">
<head>
<meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

h1{
  text-align:center;
  margin-top:30px;
  color:red;
}




body{ 
  margin:0; 
  font:normal 75% Arial, Helvetica, sans-serif; 
  height:800px;
  padding:20px;
  }
  canvas{ 
    display: block; 
    vertical-align: bottom; 
  } 
  #particles-js{ 
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
    width:100%;
    background-color: #232741; 
  } 
  
  .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; }
  
  .js-count-particles{ font-size: 1.1em; } 
  #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } 
  #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 
  .count-particles{ border-radius: 0 0 3px 3px; }

  </style>
  <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> 
  <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
  </head>

<body>
  <h1>Jetzt kann man drüber schreiben</h1>
<p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  <p> Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
Lorem ipsum ip sum sum sagt dieipsumlorem ip fertig sum su bumerum sum sum sum bumo
  </p>
  
  
  
<div id="particles-js"></div> <div class="count-particles"><span class="js-count-particles">--</span> particles </div>   


<script>
  particlesJS("particles-js", {"particles":{"number":{"value":341,"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":1,"random":true,"anim":{"enable":true,"speed":1,"opacity_min":0,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":4,"size_min":0.3,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":1,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":600}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":250,"size":0,"duration":2,"opacity":0,"speed":3},"repulse":{"distance":400,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);
  
  g=$('body').height();
$('#particles-js').css('height',g+'px')
  </script>

</body>