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.
![](https://static.wixstatic.com/media/a27d24_8a2ead1b6f49405dae181208ed9d3644~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_8a2ead1b6f49405dae181208ed9d3644~mv2.png)
My process
1) Build the js on codepen.io (it works!) (transparent background. Tilt Screen Particles are WHITE)
![](https://static.wixstatic.com/media/a27d24_fc70651ff7da44dbad5ac0796ecaad46~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_fc70651ff7da44dbad5ac0796ecaad46~mv2.png)
RESOURCES
(https://gist.github.com/whoisrnavi/77cccf07f027738e4d76510af4c35f65)
(https://codepen.io/whoisrnavi/pen/aaMrbq)
2) Tried to Add CSS and Javascript to the HTML.
![](https://static.wixstatic.com/media/a27d24_38c85172c5fe4571b27be470ed8ca0e5~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_38c85172c5fe4571b27be470ed8ca0e5~mv2.png)
3) Add to HTML iFrame
![](https://static.wixstatic.com/media/a27d24_dc065ddea3c64adfa20abace9933de68~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_dc065ddea3c64adfa20abace9933de68~mv2.png)
4) No Display (HELP!!!!)
![](https://static.wixstatic.com/media/a27d24_e943fe33b61049ecaff2d9848dbf8394~mv2.png/v1/fill/w_49,h_28,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/a27d24_e943fe33b61049ecaff2d9848dbf8394~mv2.png)
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!!!!!!
this works everywhere but wix xD :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>particles.js</title>
<style type="text/css">
/* ---- 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: #1b1166; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
</style>
</head>
<body>
<!-- particles.js container -->
<div id="particles-js"></div> <!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles
</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> <!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script>
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":200,"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);;
</script>
</body>
</html>
I am also looking forward to a resolution to this issue. I am also working on a similar effect on my website.
I really love this idea. It's similar to what I am looking for in trailing mouse for a kids page. Can you point me in the direction how to do this?