I have made a particle effect that I want to limit so that it covers the entire screen (not the entire web page) so that it creates a parallax type effect. The problem is that I can limit the height with pixels but when I try to use height: 100vh; anything below the div class="main tag" does not appear. Any help plzz?
Here is my html:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>A Pen by Rithik Kapoor </title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<head>
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<div class="main" id="particles-js">
<center>
<div class="whole">
<div class="wrap">
v
</div>
<p>
COMP D' AFFAIRES<p></center>
</div>
</div>
</section>
<div id="box">
lol
</div>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
My CSS:
html{
width:100%;
height:100%;
overflow:hidden;
}
body{
margin:0;
padding:0;
width:100%;
font-rendering:optimizeLegibility;
-webkit-font-smoothing: antialiased;
height:100%;
font-family: 'Righteous', cursive;
color: white;
font-size: 100px;
}
.main{
width:100%;
height:100vh;
background: #000000;
background-attachment: fixed;
background-size:cover;
display:table;
}
.wrap{
font-size: .7em;
overflow: hidden;
margin:0;
width: 100px;
height:100px;
border-radius: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-webkit-transition:all 0.3s ease;
transition: all 0.3s ease;
position: absolute;
left:400px;
bottom: -100px;
padding: 0px;
margin: 0px;
}
.wrap:hover{
box-shadow: 0px 0px 0px 8px #4F5E7F;
border: solid 4px #965F8A;
}
.wrap img{
width:100%;
}
.whole{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#box {
background-color:black;
height:100vh;
width:100%;
background-attachment: fixed;
background-size:cover;
display:table;
z-index:1000000;
}
My javascript:
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#11ff00"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.9,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ff0000",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 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": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 140,
"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
});
/* ---- stats.js config ---- */
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);
you are using overflow:hidden here look
html{
width:100%;
height:100%;
overflow:hidden;
}
remove this overflow:hidden and see out Here is the working fiddle