Okay, so I figured that I could just emulate the use of Javascript using a background video, and I like it, but it’s not exactly what I want to do. I would love to add on top of my background that is a “STRIP” Particles that move with the mouse cursor using an HTML iFrame. I have done it previously in WIX with someone else’s code , but now I’m getting an “Index.js Unexpected Token Error”, but don’t know how to fix it. Maybe someone could help!!!
It’s possible, because I copied someone else’s code in from the WIX CODE forum and it worked.
My process
- Build the js on codepen.io (it works!) (transparent background. Tilt Screen Particles are WHITE)
RESOURCES
(https://gist.github.com/whoisrnavi/77cccf07f027738e4d76510af4c35f65)
(https://codepen.io/whoisrnavi/pen/aaMrbq)
- Tried to Add CSS and Javascript to the HTML.
3) Add to HTML iFrame
4) No Display (HELP!!!)
Here’s the Code I have after editing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>particles.js</title>
<style>
/* ---- 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: #000000;
opacity: 0.05;
filter: alpha(opacity=0);
background-image: url("");
background-repeat: no-repeat;
background-size: 100;
background-position: 50% 20;
} </style>
</head>
<body>
<script>
particlesJS("particles-js", {
"particles": {
"number": { "value": 160, "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": 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": "push" },
"resize": true
},
"modes": {
"grab": {"distance": 400, "line_linked": { "opacity": 1 } },
"bubble": {
"distance": 158.35505639876231,
"size": 12.181158184520177,
"duration": 6.0905790922600875,
"opacity": 0.016241544246026904,
"speed": 3
},
"repulse": {"distance": 414.159378273686, "duration": 0.4 },
"push": {"particles_nb": 4 },
"remove": {"particles_nb": 2 }
}
},
"retina_detect": true
});
</script>
</body>
</html>
THANK YOU IN ADVANCE!!!