Kurze Scripte und Codeschnipsel ,hintergrund particle

hintergrund_particle.php

Quell Code

<html>
<head>
<style>
 body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } 
 canvas{ display: block; vertical-align: bottom; }
 #particles-js{ position:absolute; z-index:-1;width: 100%; height: 100%; background-color:black; 
 background-repeat: no-repeat; background-size: 20%; background-position: 50% 50%; }
 .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; }
 
 
#mond{
  background:none;
  border-radius:50%;
  position:absolute;
  left:-999px;
}

 
 
</style>
 <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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<body>
<div id="particles-js"></div>
<div class="count-particles"> 
<span class="js-count-particles">--</span> particles 
</div>

 
 
 
 
 
 
 
 
 
 
 





<img id="mond" src="https://vignette.wikia.nocookie.net/howrsewiki/images/0/0f/Mond_Sonnensystem.jpg/revision/latest?cb=20151205190448">


 
 
 
 
 
 
 
 
 
 
 
 
 
 <script>
 
 
 particlesJS("particles-js", {"particles":{"number":{"value":160,"density":{"enable":true,"value_area":100}},"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);
 
 
 
 

 function hole(min1,max1){
   var xx=Math.round((Math.random() * (max1 - min1)) + min1);
   return xx;
 }

 function plum(){
    var plumi=Math.round(Math.floor(Math.random() * 2) + 1);
    return plumi;
 }
 

 
function start(g){
    hh=plum();
    if(hh==1){
       d='';
       dd='-';
    }else{
       d='-';
       dd='';
}

  var min=10000;
  var max=60000;
  var min1=1;
  var max1=100;
  var time=Math.round((Math.random() * (max - min)) + min);
  var lef2=hole(min1,max1) 
  var lef1=hole(min1,max1)
  var top1=hole(min1,max1)+100;
  var top2=hole(min1,max1)+100;
  g++;

$(function() {
  var keyframes = '#mond {' 
+     'animation-name: fadeInDown; '
+     'animation-duration: '+time+'ms; '
+     'animation-delay: 1111ms; }'
+     '@keyframes fadeInDown {0% {'
+     'top:'+d+''+top1+'vh;left:'+d+''+lef1+'vw;'
+     'position:absolute'
+     '}100% {'
+     'top:'+dd+''+top2+'vh;left:'+dd+''+lef2+'vw;'
+     'position:absolute'
+     '}' 
+     '}';
 $('<style id="w'+g+'" type="text/css">' + keyframes + '</style>').appendTo($('head'));

  setTimeout(function(){
      $('#w'+g+'').remove();
      start(g);
  },time);
  });
}
 start(0);



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