Comments (4)
matteobruni
commented on May 27, 2024
Can you please provide a reproducible sample? I can't see the options that you are using
from tsparticles.
liuyangjuncong20202570
commented on May 27, 2024
Can you please provide a reproducible sample? I can't see the options that you are using
of course, I just copy the code from 'https://particles.js.org/samples/index.html#Background%20Mask', I didn't change anything.
const options = {
autoPlay: true,
background: {
color: {
value: '#ffffff'
},
image: "url('https://particles.js.org/images/background3.jpg')",
position: '50% 50%',
repeat: 'no-repeat',
size: 'cover',
opacity: 1
},
backgroundMask: {
composite: 'destination-out',
cover: {
color: {
value: {
r: 255,
g: 255,
b: 255
}
},
opacity: 1
},
enable: true
},
clear: true,
defaultThemes: {},
delay: 0,
fullScreen: {
enable: true,
zIndex: 0
},
detectRetina: true,
duration: 0,
fpsLimit: 120,
interactivity: {
detectsOn: 'window',
events: {
onClick: {
enable: true,
mode: 'push'
},
onDiv: {
selectors: {},
enable: false,
mode: {},
type: 'circle'
},
onHover: {
enable: true,
mode: 'bubble',
parallax: {
enable: false,
force: 2,
smooth: 10
}
},
resize: {
delay: 0.5,
enable: true
}
},
modes: {
trail: {
delay: 1,
pauseOnStop: false,
quantity: 1
},
attract: {
distance: 200,
duration: 0.4,
easing: 'ease-out-quad',
factor: 1,
maxSpeed: 50,
speed: 1
},
bounce: {
distance: 200
},
bubble: {
distance: 400,
duration: 2,
mix: false,
opacity: 1,
size: 100,
divs: {
distance: 200,
duration: 0.4,
mix: false,
selectors: {}
}
},
connect: {
distance: 80,
links: {
opacity: 0.5
},
radius: 60
},
grab: {
distance: 100,
links: {
blink: false,
consent: false,
opacity: 1
}
},
push: {
default: true,
groups: {},
quantity: 4
},
remove: {
quantity: 2
},
repulse: {
distance: 200,
duration: 0.4,
factor: 100,
speed: 1,
maxSpeed: 50,
easing: 'ease-out-quad'
},
slow: {
factor: 3,
radius: 200
},
light: {
area: {
gradient: {
start: {
value: '#ffffff'
},
stop: {
value: '#000000'
}
},
radius: 1000
},
shadow: {
color: {
value: '#000000'
},
length: 2000
}
}
}
},
manualParticles: {},
particles: {
bounce: {
horizontal: {
value: 1
},
vertical: {
value: 1
}
},
collisions: {
absorb: {
speed: 2
},
bounce: {
horizontal: {
value: 1
},
vertical: {
value: 1
}
},
enable: false,
maxSpeed: 50,
mode: 'bounce',
overlap: {
enable: true,
retries: 0
}
},
color: {
value: '#ffffff',
animation: {
h: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0
},
s: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0
},
l: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: true,
offset: 0
}
}
},
effect: {
close: true,
fill: true,
options: {},
type: {}
},
groups: {},
move: {
angle: {
offset: 0,
value: 90
},
attract: {
distance: 200,
enable: false,
rotate: {
x: 3000,
y: 3000
}
},
center: {
x: 50,
y: 50,
mode: 'percent',
radius: 0
},
decay: 0,
distance: {},
direction: 'none',
drift: 0,
enable: true,
gravity: {
acceleration: 9.81,
enable: false,
inverse: false,
maxSpeed: 50
},
path: {
clamp: true,
delay: {
value: 0
},
enable: false,
options: {}
},
outModes: {
default: 'out'
},
random: false,
size: false,
speed: 2,
spin: {
acceleration: 0,
enable: false
},
straight: false,
trail: {
enable: false,
length: 10,
fill: {}
},
vibrate: false,
warp: false
},
number: {
density: {
enable: true,
width: 1920,
height: 1080
},
limit: {
mode: 'delete',
value: 0
},
value: 80
},
opacity: {
value: 1,
animation: {
count: 0,
enable: false,
speed: 2,
decay: 0,
delay: 0,
sync: false,
mode: 'auto',
startValue: 'random',
destroy: 'none'
}
},
reduceDuplicates: false,
shadow: {
blur: 0,
color: {
value: '#000'
},
enable: false,
offset: {
x: 0,
y: 0
}
},
shape: {
close: true,
fill: true,
options: {},
type: 'circle'
},
size: {
value: {
min: 1,
max: 30
},
animation: {
count: 0,
enable: false,
speed: 5,
decay: 0,
delay: 0,
sync: false,
mode: 'auto',
startValue: 'random',
destroy: 'none'
}
},
stroke: {
width: 0
},
zIndex: {
value: 0,
opacityRate: 1,
sizeRate: 1,
velocityRate: 1
},
destroy: {
bounds: {},
mode: 'none',
split: {
count: 1,
factor: {
value: 3
},
rate: {
value: {
min: 4,
max: 9
}
},
sizeOffset: true
}
},
roll: {
darken: {
enable: false,
value: 0
},
enable: false,
enlighten: {
enable: false,
value: 0
},
mode: 'vertical',
speed: 25
},
tilt: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false
},
direction: 'clockwise',
enable: false
},
twinkle: {
lines: {
enable: false,
frequency: 0.05,
opacity: 1
},
particles: {
enable: false,
frequency: 0.05,
opacity: 1
}
},
wobble: {
distance: 5,
enable: false,
speed: {
angle: 50,
move: 10
}
},
life: {
count: 0,
delay: {
value: 0,
sync: false
},
duration: {
value: 0,
sync: false
}
},
rotate: {
value: 0,
animation: {
enable: false,
speed: 0,
decay: 0,
sync: false
},
direction: 'clockwise',
path: false
},
orbit: {
animation: {
count: 0,
enable: false,
speed: 1,
decay: 0,
delay: 0,
sync: false
},
enable: false,
opacity: 1,
rotation: {
value: 45
},
width: 1
},
links: {
blink: false,
color: {
value: '#ffffff'
},
consent: false,
distance: 150,
enable: true,
frequency: 1,
opacity: 1,
shadow: {
blur: 5,
color: {
value: '#000'
},
enable: false
},
triangles: {
enable: false,
frequency: 1
},
width: 1,
warp: false
},
repulse: {
value: 0,
enabled: false,
distance: 1,
duration: 1,
factor: 1,
speed: 1
}
},
pauseOnBlur: true,
pauseOnOutsideViewport: true,
responsive: {},
smooth: false,
style: {},
themes: {},
zLayers: 100,
name: 'Background Mask',
motion: {
disable: false,
reduce: {
factor: 4,
value: true
}
}
};from tsparticles.
matteobruni
commented on May 27, 2024
Can you please provide a reproducible sample? I can't see the options that you are using
of course, I just copy the code from 'https://particles.js.org/samples/index.html#Background%20Mask', I didn't change anything.
const options = { autoPlay: true, background: { color: { value: '#ffffff' }, image: "url('https://particles.js.org/images/background3.jpg')", position: '50% 50%', repeat: 'no-repeat', size: 'cover', opacity: 1 }, backgroundMask: { composite: 'destination-out', cover: { color: { value: { r: 255, g: 255, b: 255 } }, opacity: 1 }, enable: true }, clear: true, defaultThemes: {}, delay: 0, fullScreen: { enable: true, zIndex: 0 }, detectRetina: true, duration: 0, fpsLimit: 120, interactivity: { detectsOn: 'window', events: { onClick: { enable: true, mode: 'push' }, onDiv: { selectors: {}, enable: false, mode: {}, type: 'circle' }, onHover: { enable: true, mode: 'bubble', parallax: { enable: false, force: 2, smooth: 10 } }, resize: { delay: 0.5, enable: true } }, modes: { trail: { delay: 1, pauseOnStop: false, quantity: 1 }, attract: { distance: 200, duration: 0.4, easing: 'ease-out-quad', factor: 1, maxSpeed: 50, speed: 1 }, bounce: { distance: 200 }, bubble: { distance: 400, duration: 2, mix: false, opacity: 1, size: 100, divs: { distance: 200, duration: 0.4, mix: false, selectors: {} } }, connect: { distance: 80, links: { opacity: 0.5 }, radius: 60 }, grab: { distance: 100, links: { blink: false, consent: false, opacity: 1 } }, push: { default: true, groups: {}, quantity: 4 }, remove: { quantity: 2 }, repulse: { distance: 200, duration: 0.4, factor: 100, speed: 1, maxSpeed: 50, easing: 'ease-out-quad' }, slow: { factor: 3, radius: 200 }, light: { area: { gradient: { start: { value: '#ffffff' }, stop: { value: '#000000' } }, radius: 1000 }, shadow: { color: { value: '#000000' }, length: 2000 } } } }, manualParticles: {}, particles: { bounce: { horizontal: { value: 1 }, vertical: { value: 1 } }, collisions: { absorb: { speed: 2 }, bounce: { horizontal: { value: 1 }, vertical: { value: 1 } }, enable: false, maxSpeed: 50, mode: 'bounce', overlap: { enable: true, retries: 0 } }, color: { value: '#ffffff', animation: { h: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 }, s: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 }, l: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 } } }, effect: { close: true, fill: true, options: {}, type: {} }, groups: {}, move: { angle: { offset: 0, value: 90 }, attract: { distance: 200, enable: false, rotate: { x: 3000, y: 3000 } }, center: { x: 50, y: 50, mode: 'percent', radius: 0 }, decay: 0, distance: {}, direction: 'none', drift: 0, enable: true, gravity: { acceleration: 9.81, enable: false, inverse: false, maxSpeed: 50 }, path: { clamp: true, delay: { value: 0 }, enable: false, options: {} }, outModes: { default: 'out' }, random: false, size: false, speed: 2, spin: { acceleration: 0, enable: false }, straight: false, trail: { enable: false, length: 10, fill: {} }, vibrate: false, warp: false }, number: { density: { enable: true, width: 1920, height: 1080 }, limit: { mode: 'delete', value: 0 }, value: 80 }, opacity: { value: 1, animation: { count: 0, enable: false, speed: 2, decay: 0, delay: 0, sync: false, mode: 'auto', startValue: 'random', destroy: 'none' } }, reduceDuplicates: false, shadow: { blur: 0, color: { value: '#000' }, enable: false, offset: { x: 0, y: 0 } }, shape: { close: true, fill: true, options: {}, type: 'circle' }, size: { value: { min: 1, max: 30 }, animation: { count: 0, enable: false, speed: 5, decay: 0, delay: 0, sync: false, mode: 'auto', startValue: 'random', destroy: 'none' } }, stroke: { width: 0 }, zIndex: { value: 0, opacityRate: 1, sizeRate: 1, velocityRate: 1 }, destroy: { bounds: {}, mode: 'none', split: { count: 1, factor: { value: 3 }, rate: { value: { min: 4, max: 9 } }, sizeOffset: true } }, roll: { darken: { enable: false, value: 0 }, enable: false, enlighten: { enable: false, value: 0 }, mode: 'vertical', speed: 25 }, tilt: { value: 0, animation: { enable: false, speed: 0, decay: 0, sync: false }, direction: 'clockwise', enable: false }, twinkle: { lines: { enable: false, frequency: 0.05, opacity: 1 }, particles: { enable: false, frequency: 0.05, opacity: 1 } }, wobble: { distance: 5, enable: false, speed: { angle: 50, move: 10 } }, life: { count: 0, delay: { value: 0, sync: false }, duration: { value: 0, sync: false } }, rotate: { value: 0, animation: { enable: false, speed: 0, decay: 0, sync: false }, direction: 'clockwise', path: false }, orbit: { animation: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: false }, enable: false, opacity: 1, rotation: { value: 45 }, width: 1 }, links: { blink: false, color: { value: '#ffffff' }, consent: false, distance: 150, enable: true, frequency: 1, opacity: 1, shadow: { blur: 5, color: { value: '#000' }, enable: false }, triangles: { enable: false, frequency: 1 }, width: 1, warp: false }, repulse: { value: 0, enabled: false, distance: 1, duration: 1, factor: 1, speed: 1 } }, pauseOnBlur: true, pauseOnOutsideViewport: true, responsive: {}, smooth: false, style: {}, themes: {}, zLayers: 100, name: 'Background Mask', motion: { disable: false, reduce: { factor: 4, value: true } } };
Oh ok, there's some known issues (tsparticles/website#20) with the JSON editor on the left, it needs to be fixed.
You can import that config using @tsparticles/configs like it's done here:
Instead of configs.basic, use configs.backgroundMask.
You can find that config and more others here: https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src
from tsparticles.
liuyangjuncong20202570
commented on May 27, 2024
Can you please provide a reproducible sample? I can't see the options that you are using
of course, I just copy the code from 'https://particles.js.org/samples/index.html#Background%20Mask', I didn't change anything.
const options = { autoPlay: true, background: { color: { value: '#ffffff' }, image: "url('https://particles.js.org/images/background3.jpg')", position: '50% 50%', repeat: 'no-repeat', size: 'cover', opacity: 1 }, backgroundMask: { composite: 'destination-out', cover: { color: { value: { r: 255, g: 255, b: 255 } }, opacity: 1 }, enable: true }, clear: true, defaultThemes: {}, delay: 0, fullScreen: { enable: true, zIndex: 0 }, detectRetina: true, duration: 0, fpsLimit: 120, interactivity: { detectsOn: 'window', events: { onClick: { enable: true, mode: 'push' }, onDiv: { selectors: {}, enable: false, mode: {}, type: 'circle' }, onHover: { enable: true, mode: 'bubble', parallax: { enable: false, force: 2, smooth: 10 } }, resize: { delay: 0.5, enable: true } }, modes: { trail: { delay: 1, pauseOnStop: false, quantity: 1 }, attract: { distance: 200, duration: 0.4, easing: 'ease-out-quad', factor: 1, maxSpeed: 50, speed: 1 }, bounce: { distance: 200 }, bubble: { distance: 400, duration: 2, mix: false, opacity: 1, size: 100, divs: { distance: 200, duration: 0.4, mix: false, selectors: {} } }, connect: { distance: 80, links: { opacity: 0.5 }, radius: 60 }, grab: { distance: 100, links: { blink: false, consent: false, opacity: 1 } }, push: { default: true, groups: {}, quantity: 4 }, remove: { quantity: 2 }, repulse: { distance: 200, duration: 0.4, factor: 100, speed: 1, maxSpeed: 50, easing: 'ease-out-quad' }, slow: { factor: 3, radius: 200 }, light: { area: { gradient: { start: { value: '#ffffff' }, stop: { value: '#000000' } }, radius: 1000 }, shadow: { color: { value: '#000000' }, length: 2000 } } } }, manualParticles: {}, particles: { bounce: { horizontal: { value: 1 }, vertical: { value: 1 } }, collisions: { absorb: { speed: 2 }, bounce: { horizontal: { value: 1 }, vertical: { value: 1 } }, enable: false, maxSpeed: 50, mode: 'bounce', overlap: { enable: true, retries: 0 } }, color: { value: '#ffffff', animation: { h: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 }, s: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 }, l: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: true, offset: 0 } } }, effect: { close: true, fill: true, options: {}, type: {} }, groups: {}, move: { angle: { offset: 0, value: 90 }, attract: { distance: 200, enable: false, rotate: { x: 3000, y: 3000 } }, center: { x: 50, y: 50, mode: 'percent', radius: 0 }, decay: 0, distance: {}, direction: 'none', drift: 0, enable: true, gravity: { acceleration: 9.81, enable: false, inverse: false, maxSpeed: 50 }, path: { clamp: true, delay: { value: 0 }, enable: false, options: {} }, outModes: { default: 'out' }, random: false, size: false, speed: 2, spin: { acceleration: 0, enable: false }, straight: false, trail: { enable: false, length: 10, fill: {} }, vibrate: false, warp: false }, number: { density: { enable: true, width: 1920, height: 1080 }, limit: { mode: 'delete', value: 0 }, value: 80 }, opacity: { value: 1, animation: { count: 0, enable: false, speed: 2, decay: 0, delay: 0, sync: false, mode: 'auto', startValue: 'random', destroy: 'none' } }, reduceDuplicates: false, shadow: { blur: 0, color: { value: '#000' }, enable: false, offset: { x: 0, y: 0 } }, shape: { close: true, fill: true, options: {}, type: 'circle' }, size: { value: { min: 1, max: 30 }, animation: { count: 0, enable: false, speed: 5, decay: 0, delay: 0, sync: false, mode: 'auto', startValue: 'random', destroy: 'none' } }, stroke: { width: 0 }, zIndex: { value: 0, opacityRate: 1, sizeRate: 1, velocityRate: 1 }, destroy: { bounds: {}, mode: 'none', split: { count: 1, factor: { value: 3 }, rate: { value: { min: 4, max: 9 } }, sizeOffset: true } }, roll: { darken: { enable: false, value: 0 }, enable: false, enlighten: { enable: false, value: 0 }, mode: 'vertical', speed: 25 }, tilt: { value: 0, animation: { enable: false, speed: 0, decay: 0, sync: false }, direction: 'clockwise', enable: false }, twinkle: { lines: { enable: false, frequency: 0.05, opacity: 1 }, particles: { enable: false, frequency: 0.05, opacity: 1 } }, wobble: { distance: 5, enable: false, speed: { angle: 50, move: 10 } }, life: { count: 0, delay: { value: 0, sync: false }, duration: { value: 0, sync: false } }, rotate: { value: 0, animation: { enable: false, speed: 0, decay: 0, sync: false }, direction: 'clockwise', path: false }, orbit: { animation: { count: 0, enable: false, speed: 1, decay: 0, delay: 0, sync: false }, enable: false, opacity: 1, rotation: { value: 45 }, width: 1 }, links: { blink: false, color: { value: '#ffffff' }, consent: false, distance: 150, enable: true, frequency: 1, opacity: 1, shadow: { blur: 5, color: { value: '#000' }, enable: false }, triangles: { enable: false, frequency: 1 }, width: 1, warp: false }, repulse: { value: 0, enabled: false, distance: 1, duration: 1, factor: 1, speed: 1 } }, pauseOnBlur: true, pauseOnOutsideViewport: true, responsive: {}, smooth: false, style: {}, themes: {}, zLayers: 100, name: 'Background Mask', motion: { disable: false, reduce: { factor: 4, value: true } } };Oh ok, there's some known issues (tsparticles/website#20) with the JSON editor on the left, it needs to be fixed.
You can import that config using @tsparticles/configs like it's done here:
Instead of configs.basic, use configs.backgroundMask.
You can find that config and more others here: https://github.com/tsparticles/tsparticles/tree/main/utils/configs/src
OK，I'll try it later
from tsparticles.
Related Issues (20)
- Migrating from Particles.js, but the effect is different when using multiple instances. HOT 1
- The generator cannot reflect any changes HOT 1
- [Bug]: tsParticles - Error in animation loop TypeError: Cannot read properties of undefined (reading 'circleRange') HOT 1
- Help me, display the particles in only one area and wherever the hover goes, it will follow. HOT 3
- [Bug]: Class extends value undefined is not a constructor or null HOT 1
- [Bug]: `Range` class from this library overwrites browser's native `Range` class
- [Bug]: change the background to a picture but it doesn't work HOT 1
- Can't remove position fixed from tsparticles-slim on next.js HOT 1
- Absorber Split on Click or Size limit reached HOT 1
- Canvas position is stuck on fixed HOT 1
- [Bug]: 'z-index' is not work HOT 1
- [Bug]: Everything is fine in localhost but after deployment on netlify, initial page is loading is too slow HOT 2
- [Bug]: The package particles.js can't be installed with tsparticles, since it can lead to unexpected behaviors, please uninstall particles.js and remove it from the package.json file. HOT 1
- [Bug]: autoprefixer Gradient outdated syntax Warning ( Tailwind ) HOT 3
- Feature Request
- [Bug]: Confetti flat option is not passed to new calls HOT 2
- Issue : Need an appropriate loader to handle file type HOT 1
- [Bug]: HOT 6
- [Bug]: Responsive object not working in options object for ReactJS HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from tsparticles.