top of page

Wix Studio Tips and Tricks

Public·1 member

Interactive Particle Background - Code

<style>

body, html {

margin: 0;

padding: 0;

overflow: hidden;

width: 100%;

height: 100%;

background: linear-gradient(135deg, #0F2027 0%, #203A43 100%);

}

#particles-js {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1;

}

</style>

<body>

<div id='particles-js'></div>


<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script>

<script>

particlesJS('particles-js', {

particles: {

number: { value:50, density: { enable: true, value_area: 800 } },

color: { value: '#ffffff' },

shape: {

type: 'circle',

stroke: { width: 0, color: '#000000' },

polygon: { nb_sides: 5 },

},

opacity: { value: 0.5, random: false },

size: { value: 3, random: true },

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: '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,

});

</script>

</body>

138 Views

About

Share your cool Wix Studio Tips and Tricks

bottom of page