Has i was having issues on code pen with CORS when using canvas, decided to convert this piece into css and js from canvas. The JavaScript currently only creates the particles.
A Pen by Mario Duarte on CodePen.
<div class="container"> | |
<div class="background"></div> | |
<div id="particles"></div> | |
<div class="foreground"></div> | |
</div> |
// Let's define the required varibles such as the number of particles to be created and an array to hold the particles | |
const particleContainer = document.getElementById('particles'); | |
const Nparticles = 100; | |
let particles = []; | |
// function to return a random number from a given min and max | |
function rand(min, max) { | |
return Math.floor(Math.random() * (max - min)) + min; | |
} | |
// This constructor will generate the required information for each particle and it's html structure to be added to the document | |
function createParticle(i) { | |
this.id = i; | |
this.width = rand(1,20) + 'px'; | |
this.height = this.width; | |
this.x = rand(10,90) + '%'; | |
this.delay = rand(1,60) + 's'; | |
this.duration = rand(10,60) + 's'; | |
this.html = '<span style=" width: '+this.width+'; height: '+this.height+'; left: '+this.x+'; animation-delay: '+this.duration+'; animation-duration: '+this.duration+'; "></span>'; | |
} | |
// Let's loop through till we reach the max number of particles and save them to the array and append them to the document | |
while ( particles.length <= Nparticles ) { | |
let Particle = new createParticle(particles.length); | |
particles.push(Particle); | |
particleContainer.innerHTML += Particle.html; | |
} | |
// Hope you liked it and that has inspired you to create something awesome |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
// Colour Variables | |
$magenta : #a42b52; | |
$blue : #224154; | |
// this loops through and generates a random animation for each particle so that hte wallpaper feels more unpredictable and less boring - this loop is also used to assign the animation to the right particle | |
@for $i from 1 through 100 { | |
@keyframes particle-#{$i} { | |
0% { transform: translateX( 0px ) translateY(0vh); opacity: 1; }; | |
30% { transform: translateX( (random(80) - 40) + px ) translateY(-10vh); opacity: 0.9; }; | |
40% { transform: translateX( (random(80) - 40) + px ) translateY(-20vh); opacity: 0.8; }; | |
50% { transform: translateX( (random(80) - 40) + px ) translateY(-30vh); opacity: 0.7; }; | |
60% { transform: translateX( (random(80) - 40) + px ) translateY(-40vh); opacity: 0.6; }; | |
70% { transform: translateX( (random(80) - 40) + px ) translateY(-50vh); opacity: 0.5; }; | |
100% { transform: translateX( (random(80) - 40) + px ) translateY(-100vh); opacity: 0; }; | |
} | |
.container #particles span:nth-child(#{$i}) { animation-name: particle-#{$i}; } | |
} | |
// let's make the body full width and height and hide any overflow, also let's give it a minimun width so that the images don't get too small, maybe in a future I will make this fully responssive | |
html,body { | |
position: relative; | |
height: 100%; | |
background-color: $blue; | |
text-align: center; | |
overflow: hidden; | |
min-width: 768px; | |
} | |
.container { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
.background { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 100%; | |
height: 100%; | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-background.png'); | |
background-position: center bottom; | |
background-repeat: no-repeat; | |
background-size: 100% auto; | |
z-index: 0; | |
} | |
#particles { | |
position: absolute; | |
top:0; | |
right:0; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
z-index: 1; | |
span { | |
display: inline-block; | |
position: absolute; | |
bottom: 0%; | |
border-radius: 50%; | |
background-color: $magenta; | |
opacity: 1; | |
box-shadow: 0px 0px 10px 5px rgba(164, 43, 82, 1); | |
transform: translateX(0%) translateY(0%); | |
animation-iteration-count: infinite; | |
animation-timing-function: linear; | |
} | |
} | |
.foreground { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 100%; | |
height: 100%; | |
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-foreground.png'); | |
background-position: center bottom; | |
background-repeat: no-repeat; | |
background-size: 100% auto; | |
z-index: 2; | |
} | |
} |
Has i was having issues on code pen with CORS when using canvas, decided to convert this piece into css and js from canvas. The JavaScript currently only creates the particles.
A Pen by Mario Duarte on CodePen.