A particle.js coming soon page
Created
September 28, 2021 01:17
-
-
Save orangemn6/52181385d41b31ebf8dc60fbbc8f1d5f to your computer and use it in GitHub Desktop.
Particle.js coming soon
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- particles.js container --> | |
<div id="particles-js"> | |
<h1>Coming soon</h1> | |
</div> | |
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> | |
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This Pen is a fork of Mesut Koca's Pen : | |
// https://codepen.io/koca/details/eNJVKQ#forks | |
// Thanks to him ! | |
particlesJS("particles-js", { | |
"particles": { | |
"number": { | |
"value": 88, | |
"density": { | |
"enable": true, | |
"value_area": 700 | |
} | |
}, | |
"color": { | |
"value": ["#aa73ff", "#f8c210", "#83d238", "#33b1f8"] | |
}, | |
"shape": { | |
"type": "circle", | |
"stroke": { | |
"width": 0, | |
"color": "#000000" | |
}, | |
"polygon": { | |
"nb_sides": 15 | |
} | |
}, | |
"opacity": { | |
"value": 0.5, | |
"random": false, | |
"anim": { | |
"enable": false, | |
"speed": 1.5, | |
"opacity_min": 0.15, | |
"sync": false | |
} | |
}, | |
"size": { | |
"value": 2.5, | |
"random": false, | |
"anim": { | |
"enable": true, | |
"speed": 2, | |
"size_min": 0.15, | |
"sync": false | |
} | |
}, | |
"line_linked": { | |
"enable": true, | |
"distance": 110, | |
"color": "#33b1f8", | |
"opacity": 0.25, | |
"width": 1 | |
}, | |
"move": { | |
"enable": true, | |
"speed": 1.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": false, | |
"mode": "repulse" | |
}, | |
"onclick": { | |
"enable": true, | |
"mode": "push" | |
}, | |
"resize": true | |
}, | |
"modes": { | |
"grab": { | |
"distance": 400, | |
"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 | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ---- reset ---- */ | |
body { | |
margin: 0; | |
font: normal 75% Arial, Helvetica, sans-serif; | |
} | |
canvas { | |
display: block; | |
vertical-align: bottom; | |
} /* ---- particles.js container ---- */ | |
#particles-js { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-color: #323840; | |
background-image: url(""); | |
background-repeat: no-repeat; | |
background-size: cover; | |
background-position: 50% 50%; | |
} | |
h1 { | |
box-sizing: border-box; | |
position: fixed; | |
font-family: "Source Sans Pro", sans-serif; | |
font-size: 28px; | |
z-index: 50; | |
top: 50%; | |
left: 50%; | |
right: 0; | |
width: 300px; | |
margin: -28px 0 0 -150px; | |
text-align: center; | |
color: #fff; | |
padding: 10px 0px; | |
border: solid 3px #fff; | |
font-weight: 600; | |
text-transform: uppercase; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment