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>