I am trying to set up similar page as this, here with central element in front of animation that is running behind:
https://vincentgarreau.com/particles.js/#default
I set up something like this and it occupies its own space, separated from other content, not behind:
I would like my text appear in front of particles animation. Could you please help with this? I tried using "z-index" without success: <div style="z-index: -1"></div>
My full code is here, or pasted below with most important bits only.
I added this to my HTML:
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
CSS:
body {
background-color: #789;
margin-left: 5px;
margin-right: 5px;
padding-top: 60px;
z-index: 900;
position:relative;
}
#particles-js {
background-color: #255;
z-index: 850;
position:relative;
}
JS:
window.addEventListener("hashchange", function() {
scrollBy(0, -55);
});
particlesJS("particles-js", {
particles: {
number: { value: 80, density: { enable: true, value_area: 800 } },
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: 0.5,
random: false,
anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false }
},
size: {
value: 3,
random: true,
anim: { enable: false, speed: 40, size_min: 0.1, sync: false }
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
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: "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: 100, 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);
The answer is by ZohirSalak CeNa:
setting your canvas to this position : absolute; width:100%;
height:100%; z-index:-1;
I would clarify for beginners:
In HTML the animated element is <div id="particles-js"></div>
This element should go to the background. Notice the value of id= element.
In CSS I simply added:
#particles-js {
position : absolute;
width:100%;
height:100%;
z-index:-1;
}
Notice after # the name that matches id= from HTML file (particles-js).
Now it looks like this:
Related
When I create scroll animations using GSAP and Scrolltrigger with multiple scenes I face two issues. One is that when transitioning between two pinned sections the previous or next section tends to overlap. Another issue is suddenly from time to time (random) all the pinned sections overlap on top of each other making it look like the HTML is broken. Not sure why I face this issue any guidance will be helpful. Also any suggestions on how to modify the code to prevent repetition will help. Following is the code
// Section: Criteria
var timlineCriteria = gsap.timeline();
timlineCriteria
.from("#mainCand", { opacity: 0, y: "-50px" }, "one-0")
.from("#mainCand1", { opacity: 0, x: "50px" }, "one-0")
.from("#mainCand2", { opacity: 0, x: "-50px" }, "one-0")
.from(".critieria__points", { opacity: 0 }, "one-1");
timlineCriteria
.from(".criteria__point_pt1", { opacity: 0 }, "one-2")
.to(".criteria__point_pt1", { opacity: 1 }, "one-3")
.to(".criteria__point_pt1", { opacity: 1 }, "one-4")
.to(".criteria__point_pt1", { opacity: 0 }, "one-5");
timlineCriteria
.to(".critieria__points", { backgroundColor: "#B2C8DF" }, "two-0")
.from(".criteria__point_pt2", { opacity: 0 }, "two-0")
.to(".criteria__point_pt2", { opacity: 1 }, "two-1")
.to(".criteria__point_pt2", { opacity: 1 }, "two-2")
.to(".criteria__point_pt2", { opacity: 0 }, "two-3");
timlineCriteria
.to(".critieria__points", { backgroundColor: "#C9BBCF" }, "three-0")
.from(".criteria__point_pt3", { opacity: 0 }, "three-0")
.to(".criteria__point_pt3", { opacity: 1 }, "three-1")
.to(".criteria__point_pt3", { opacity: 1 }, "three-2")
.to(".criteria__point_pt3", { opacity: 0 }, "three-3");
timlineCriteria
.to(".critieria__points", { backgroundColor: "#90C8AC" }, "four-0")
.from(".criteria__point_pt4", { opacity: 0 }, "four-0")
.to(".criteria__point_pt4", { opacity: 1 }, "four-1")
.to(".criteria__point_pt4", { opacity: 1 }, "four-2")
.to(".criteria__point_pt4", { opacity: 0 }, "four-3");
timlineCriteria
.to(".critieria__points", { backgroundColor: "#DEB6AB" }, "five-0")
.from(".criteria__point_pt5", { opacity: 0 }, "five-0")
.to(".criteria__point_pt5", { opacity: 1 }, "five-1")
.to(".criteria__point_pt5", { opacity: 1 }, "five-2");
var pinCriteria = ScrollTrigger.create({
animation: timlineCriteria,
trigger: "#criteria",
pin: true,
scrub: true,
start: "top 100px",
end: "+=300%",
pinSpacing: true,
toggleClass: { targets: "#criteria", className: "is-active" },
markers: false,
});
// ==================================
// Section: Electors
// ==================================
var timlineElectors = gsap.timeline();
timlineElectors.from(".electors-who__one", { delay: 1, opacity: 0 }, "one-0");
timlineElectors.from(".electors-who__two", { opacity: 0 }, "two-0");
var pinElectors = ScrollTrigger.create({
animation: timlineElectors,
trigger: ".electors",
pin: true,
scrub: true,
start: "top 100px",
end: "+=200%",
pinSpacing: true,
toggleClass: { targets: ".electors", className: "is-active" },
markers: false,
});
// mlavotevalue
var pinMla = ScrollTrigger.create({
trigger: ".mlavotevalue",
pin: true,
scrub: true,
start: "top 100px",
end: "+=100%",
pinSpacing: true,
toggleClass: { targets: ".mlavotevalue", className: "is-active" },
markers: false,
});
// mpvotevalue
var pinMP = ScrollTrigger.create({
trigger: ".mpvotevalue",
pin: true,
scrub: true,
start: "top 100px",
end: "+=100%",
pinSpacing: true,
toggleClass: { targets: ".mpvotevalue", className: "is-active" },
markers: false,
});
var timlineBallotBox = gsap.timeline();
timlineBallotBox
.from("#candname3", { opacity: 0 }, "zero-2")
.from("#candname2", { opacity: 0 }, "zero-1")
.from("#candname1", { opacity: 0 }, "zero-0");
timlineBallotBox
.from("#pref1", { opacity: 0 }, "one-0")
.to("#pref1", { opacity: 1 }, "one-1");
timlineBallotBox
.from("#pref2", { opacity: 0 }, "two-0")
.to("#pref2", { opacity: 1 }, "two-1");
timlineBallotBox
.from("#pref3", { opacity: 0 }, "three-0")
.to("#pref3", { opacity: 1 }, "three-1");
timlineBallotBox
.to("#votingSlip", { scale: "0.5", x: "125px" }, "four-0")
.to("#votingSlip", { scale: "0.2", x: "200px" }, "four-2")
.to(
"#votingSlip",
{ scale: "0.1", x: "225px", y: "300px", opacity: 0 },
"four-3"
);
var pinBallotBox = ScrollTrigger.create({
animation: timlineBallotBox,
trigger: "#votingProcess1",
pin: true,
scrub: true,
start: "top 100px",
end: "+=600%",
pinSpacing: true,
toggleClass: { targets: "#votingProcess1", className: "is-active" },
markers: false,
});
var timlineCandSelect = gsap.timeline();
timlineCandSelect
.from("#cand1", { opacity: 0 }, "zero-0")
.from("#candtxt1", { opacity: 0 }, "zero-0");
timlineCandSelect
.from("#cand2", { opacity: 0 }, "zero-1")
.from("#candtxt2", { opacity: 0 }, "zero-1");
timlineCandSelect
.from("#cand3", { opacity: 0 }, "zero-2")
.from("#candtxt3", { opacity: 0 }, "zero-2");
timlineCandSelect
.from("#Bar1", { opacity: 0 }, "one-0")
.from("#Bar2", { opacity: 0 }, "one-1")
.from("#Bar3", { opacity: 0 }, "one-2");
timlineCandSelect.from("#cuttoff-50", { opacity: 0 }, "one-3");
timlineCandSelect.from("#eliminated3", { opacity: 0 }, "two-0");
timlineCandSelect.to("#cand3", { opacity: 0 }, "two-1");
timlineCandSelect.to("#eliminated3", { opacity: 0 }, "two-1");
timlineCandSelect.to("#candtxt3", { opacity: 0 }, "two-1");
timlineCandSelect.to("#Bar3", { y: -150, opacity: 0 }, "two-1");
timlineCandSelect.to("#bar22", { x: 0, width: 100 }, "two-1");
timlineCandSelect.to("#bar23", { x: 20, width: 50 }, "two-1");
timlineCandSelect.to("#bar11", { width: 190 }, "two-1");
timlineCandSelect.to("#bar12", { x: 20, width: 80 }, "two-1");
timlineCandSelect.to("#bar13", { x: 20, width: 50 }, "two-1");
timlineCandSelect.to("#cand1-group", { scale: 1.1, y: 50 }, "four-0");
timlineCandSelect.to("#cand2-group", { scale: 1.1, y: 100 }, "four-0");
timlineCandSelect.from("#eliminated2", { delay: 1, opacity: 0 }, "five-0");
timlineCandSelect.to("#cand2-group", { delay: 1, opacity: 0 }, "five-1");
timlineCandSelect.to("#cand1-group", { scale: 1.3, x: -50, y: 100 }, "five-2");
timlineCandSelect.to("#cuttoff-50", { opacity: 0 }, "five-2");
var pinCandSelect = ScrollTrigger.create({
animation: timlineCandSelect,
trigger: "#votingProcess2",
pin: true,
scrub: true,
start: "top 100px",
end: "+=600%",
pinSpacing: true,
toggleClass: { targets: "#votingProcess2", className: "is-active" },
markers: true,
});
I am trying to add style to the div element which gets created while adding particle component in React. I am adding the style in Component and not in the options params provided by tsparticles. But the height and visibility properties is getting added to the canvas. Please see attached screenshot in the post.
<Particles
className="react-particles"
id="particles-js"
style={
{
visibility: "hidden"
}
}
options={{
background: {
color: {
value: "#3e1110"
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse"
},
resize: true
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4
}
}
},
canvas:{
w: "500",
h: "500"
},
particles: {
number: {
value: 40,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#722035"
},
shape: {
type: "edge",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
"nb_sides": 5
},
image: {
src: "img/github.svg",
width: 50,
height: 50
}
},
opacity: {
value: 0.749690259550659,
random: true,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 3,
size_min: 1,
sync: false
}
},
line_linked: {
enable: false,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 3,
direction: "top-right",
random: true,
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: false,
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
}
}
},
detectRetina: true,
}}
/>
I am trying to replicate ts particle params to use in React particles. I used the same params what are working in tsparticles, But in React it is not getting displayed.
Here are the below config params for both TsParticle and React Particle.
TSParticles
particles: {
number: { value: 10, density: { enable: true, value_area: 9999999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
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: 0.5,
direction: "bottom-right",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
}
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
},
modes: {
grab: { distance: 191.80819180819182, line_linked: { opacity: 1 } },
bubble: { distance: 250, size: 0, duration: 2, opacity: 0, speed: 3 },
repulse: { distance: 695.3046953046953, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 }
}
},
React Particles
particles: {
number: { value: 10, density: { enable: true, value_area: 99999 } },
color: { value: "#ffffff" },
shape: {
type: "square",
stroke: { width: 0, color: "#000000" },
image: { src: "img/github.svg", width: 50, height: 50 }
},
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 }
},
move: {
enable: true,
speed: 0.5,
direction: "top-left",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 600 }
},
interactivity: {
detect_on: "canvas",
events: {
resize: true
}
},
},
Link for both TsParticles and React Particles
TSParticle
React Particle
I've been struggling with this problem for a while, I need to have the 100% graphic at the height of your container.
To weights that I indicate to him that his height: '100%' still follows with spaces above and below, tabiem I gave false value to yaxis but still the problem persists.
Someone who can solve it would appreciate it.
var options = {
chart: {
type: 'line',
width: '100%',
height: '100%',
toolbar: {
show: false
},
},
grid: {
show: false,
padding: {
left: 0,
right: 0
}
},
tooltip: {
intersect: false,
x: {
show: false
},
marker: {
show: false
}
},
dataLabels: {
enabled: false
},
yaxis: {
show: false,
},
xaxis: {
tooltip: {
enabled: false
},
labels: {
show: false
},
axisBorder: {
show: false
}
},
series: [{
name: 'sales',
data: [30,40,35,50,49,60,70,91,125]
}]
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
#chart{
width: 500px;
height: 200px;
border: 1px solid #000;
}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
If you don't need x-axis, y-axis to be displayed, you can turn on the sparkline.enabled flag to remove all unnecessary spaces above and below chart area
chart: {
sparkline: {
enabled: true
}
}
I am trying to make Particle JS work as a background. As you can see on my website, the body as the attribute particles but, the particles are only after the content. It doesn't follow the order. Here is the config:
particlesJS("particles-js", {
particles: {
number: {
value: 80,
density: {
enable: !0,
value_area: 800
}
},
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: .5,
random: !1,
anim: {
enable: !1,
speed: 1,
opacity_min: .1,
sync: !1
}
},
size: {
value: 3,
random: !0,
anim: {
enable: !1,
speed: 40,
size_min: .1,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 150,
color: "#ffffff",
opacity: .4,
width: 1
},
move: {
enable: !0,
speed: 6,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: !0,
mode: "grab"
},
onclick: {
enable: !0,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 140,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: !0
});
Thanks!
Try with that:
#particles-js {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#particles-js > canvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}