Мыльный пузырь для сайта ⇐ CSS

[Anonymous]

Я хочу сделать такой же мыльный пузырь, как на сайте Rouser (https://www.rouserlab.com/about/), чтобы он имел такие же свойства (отскакивал от края экрана, прилипал к стенам ; взрывается при слишком сильном столкновении с краем экрана, разбрасывании брызг и т. д.) и является очень близкой копией мыльного пузыря из Rouser, если не точной.
Я написал код. в HTML, JavaScript и CSS, но это не решает проблем:

Код: Выделить всё

Bubble

body {
margin: 0;
padding: 0;
background-color: #111;
}
canvas {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}









/* global dat, particlesJS */
particlesJS.load('canvas', '', function() {
console.log('callback - particles.js config loaded');
});

var gui = new dat.GUI();
var config = {
"background": "#111",
"bubbleColor": "#ffffff",
"bubbleCount": 100,
"bubbleMinSize": 5,
"bubbleMaxSize": 50,
"bubbleSpeed": 1,
"bubbleOpacity": 0.5,
"bubbleNoise": 0.05
};
gui.addColor(config, 'background').onChange(function(value) {
document.body.style.backgroundColor = value;
});
gui.addColor(config, 'bubbleColor').onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: value },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: config.bubbleMinSize,
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleCount', 0, 1000).step(1).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: value },
shape: { type: 'circle' },
size: {
value: config.bubbleMinSize,
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable:  false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleMinSize', 0, 100).step(1).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: value,
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleMaxSize', 0, 100).step(1).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: {
min: config.bubbleMinSize,
max:  value
},
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleSpeed', 0, 10).step(0.1).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: {
min: config.bubbleMinSize,
max: config.bubbleMaxSize
},
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: value,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleOpacity', 0, 1).step(0.01).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: {
min: config.bubbleMinSize,
max: config.bubbleMaxSize
},
random: true,
anim: { enable: false }
},
opacity: {
value: value,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
},
onclick: {
enable: false,
mode: 'push'
}
},
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
});
});
gui.add(config, 'bubbleNoise', 0, 1).step(0.01).onChange(function(value) {
particlesJS('canvas', {
particles: {
color: { value: config.bubbleColor },
number: { value: config.bubbleCount },
shape: { type: 'circle' },
size: {
value: {
min: config.bubbleMinSize,
max: config.bubbleMaxSize
},
random: true,
anim: { enable: false }
},
opacity: {
value: config.bubbleOpacity,
random: true,
anim: { enable: false }
},
line_linked: {
enable: false
},
move: {
enable: true,
speed: config.bubbleSpeed,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: true,
rotateX: 600,
rotateY: 1200
}
},
array: []
},
interactivity: {
events: {
onhover: {
enable: false,
mode: 'repulse'
}
}
}
}

Мне бы хотелось, чтобы вы помогли мне исправить существующие ошибки в сценарии или даже внести новые, чтобы помочь достичь моей цели.

Подробнее здесь: https://stackoverflow.com/questions/759 ... r-the-site