How can I modify and use this cool effect in a page?
and also need the background transparent if possible.
Check this site too for an reference : Constellations
Hi
Today there is no way to do it on wixCode because we have no access to canvas.
However, for specific specific you can use html component and write your code there
Could I know what is the html code to be put for getting that effect?
Hi,
The code should be in this template:
<html>
<style>
// css
</style>
<body>
// html
<script>
// javascript
</script>
</body>
</html>
Please Update in your progress.
Good luck!
Roi.
I would like to say that the html code provided by Roi is not working to get that effect, please give me the correct code soo that i can get the effect mentioned in the link given above.
Hi,
Unfortunately we are not able to code your Wix site on your behalf,
You can hire an expert in Wix Arena .
Or
Actually I have been able to do this by a adding an html element to the page with this custom code:
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<style>
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
width: 100%;
height: 100%;
background-color: transparent;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
position: absolute;
top: 0;
z-index: 1;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div id="particles-js"><canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="1853" height="491"></canvas></div>
<script id="rendered-js">
/* ---- particles.js config ---- */
particlesJS("particles-js", {
"particles": {
"number": {
"value": 100,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#FFF"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#FFF"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.75,
"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": "#ffffff",
"opacity": 0.5,
"width": 1
},
"move": {
"enable": true,
"speed": 4,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"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
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "transparent",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover",
"position": "absolute",
"z-index": "1",
"top": "0"
}
});
</script>
</body>
</html>