- 9
- 37 982
BobbySmurf
Приєднався 30 гру 2016
Hello, I make stupid videos, sometimes I make gaming videos, and sometimes I just do what I want.
NEW 2024 React Particle JS Tutorial
In this tutorial I will be showing you how you can implement the new version of particles.js into any react project. I am using the new 2024 version of particles, known is Tsparticles. If you like this video and want to see more content surrounding React, CSS, Javascript, HTML, and web related stuff please subscribe, like, or comment!
PROJECT GITHUB - github.com/BobbySmurf/particles
CODE -
paste.quest/?a91fdd8d09442c68#8EXweAHS8M9cwuqzgBDouvWAjwRHU6mgeGoTdvA8wEPy
#react #webdevelopment #design #web #website #websitedesign #particles #javascript #coding #tutorial #jsx #js #html #css
PROJECT GITHUB - github.com/BobbySmurf/particles
CODE -
paste.quest/?a91fdd8d09442c68#8EXweAHS8M9cwuqzgBDouvWAjwRHU6mgeGoTdvA8wEPy
#react #webdevelopment #design #web #website #websitedesign #particles #javascript #coding #tutorial #jsx #js #html #css
Переглядів: 11 226
Відео
Dog Gets Shot and KILLED!! *WARNING*
Переглядів 3303 роки тому
THIS VIDEO IS NOT FOR THE LIGHT HEARTED!! DONT WATCH IF YOUR SENSITIVE!!!
Creeper, Aw Man Minecraft Csgo Clip Meme
Переглядів 3325 років тому
Me and my friend made a video together this is just a clip from it that I edited original clip ua-cam.com/video/ZQp5DaYxm-s/v-deo.html
How do you add gradient as the background. I have tried all I could
Thank you so much! After spending hours on this, I finally got it done with your help.
You are my HERO! THX
Glad to help!
saved my project thanks bro
you called me slurs on counter strike
nice i got whitescreen,ty very much
how to add a values of the particles? i try using number {value: 200} is not working
In the particles.js, find this part of the code number: { density: { enable: true, }, value: 150, }, then all you need to do it change the number in value like this: number: { density: { enable: true, }, value: 200, },
Thanks, it help me a alot.
I literally wasted hours doing this in React. Thank you, man. I can't appreciate it more
right to the point, love it
If I want to show the ts particles show only home page how can do that
is there a way around for react+vite ? I can see the particles initially, but they do not move AT ALL.
I tested this with vite+react and it worked fine for me. I did however change the file from particles.js to particles.jsx. I doubt this actually made a difference, I would check if you have any errors in console and check if it works on other browsers.
@@bobbysmurf9915 it didn't work after all. I decided to use vanta.js instead. Thanks anyway 👍
thanks
mine works fine but theres no interactivity tho i had it true interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "repulse", }, onclick: { enable: false, mode: "push", }, resize: true, }, modes: { grab: { distance: 400, line_linked: { opacity: 1, }, }, bubble: { distance: 400, size: 6, duration: 2, opacity: 1, speed: 3, }, repulse: { distance: 200, duration: 0.4, }, push: { particles_nb: 4, }, remove: { particles_nb: 2, }, }, },
Just from looking at this some of your events like onhover and onclick are all lowercase and I think it needs to be: onHover, onClick. If its not the case then could you look in the inspection console for any errors?
@@bobbysmurf9915 thnx buddy i fixed it the error was that my wifi disconnected so after reconnecting i had to refresh the page 😂😂
Thanks
Hi ! Thank you for your explainations ! tsparticles can do amazing things ! I am using it in a small app (for training), which is a small game. The app had been made with React / Vite. I used fireworks preset, and I customized the emitters options, so it would stop after 30 emissions. This is the only solution I've found to stop it... I saw that, when we are not using React, we can pause the animation, and restart it later. But I didn't manage to find how I could do this with @tsparticles/react. My problem is that the sounds don't actually totally stop, and sometimes restart later, and I can't launch another firework if the player wins again. Is there a way to stop and resume the animation in @tsparticles/react ?
thanks, this video really is a life saver
goat
i dont know why this is not worling
your video really helped a lot!!!
I want to fix this in my website banner div please help me
Need more details then that
@@bobbysmurf9915 yes
Its working but browser crash
I like the fact how you created a component for it, really good when a project is organized 👍
thank you!
Thank you man you saved my time thanks a lot
Your welcome!
thks very muchhhh !! I tryed multiple forms anyone has workk, u are my savior
Thank you thank you thank you thank brother.................Ummah😍😍😍
IMPORTANT! As of now there seems to be an issue using react+vite that causes the particles to flicker so I recommend to not use it. Edit: It seemed that it updated and it works in vite with the downside of being a little laggy!
it is not work in react+vite
@tarunkumarkale1972 yes, that's literally what I said. XD
exist a method for use this in react + vite?
@@wayelias I tested it in vite and it seemed to work! it must of updated at some point so I would give it a try, the only downside is that it seems a little laggy.
@@bobbysmurf9915 what error are u getting? and what y change? i cant use it xd
Thankyou for this video buddy really was feed up by watching those videos and implementing that old stuff great work subscribed keep going ❤
Glad that I could help
Which version is this?
Latest version of tspartcles package which replaced particles, should work as long as you install what I did.
@@bobbysmurf9915 had to try it but why its flickering all of time like just 1 frame per second
@@24.muhammadnuralim61 Hi, this is a very strange issue but Ill try to help you out. I checked if there was any updates to the package which their was not. I would try cloning the github project which I left in the description, using a different browser, and testing the website on another device.
@@bobbysmurf9915have the same issue as the other guy, except instead of flickering, the particles pop in and out of existence every couple seconds. i used vite to create my react project btw. very strange.
@allenuh yeah I just tested it with react+vite and getting the same issue. It's likely something wrong with tsparticles itself.
How stereotypes would depict Omar Sy as:
Bigot
damn right
@@bobbysmurf9915 bet you are into tgirls
@@LesbianQueen97 WTF fuck you for making me look that up, thats nasty as fuck.
@@bobbysmurf9915 you like us lol, looks like you are a hypocrite
@@LesbianQueen97 lol, this profile picture is not even me. You trying to say that your people look ugly?
B a g u e t t e
dog chicken?
YES
Am I crying? Yes. Does my stomach hurt? Yes. Is it because of how much I have laughed today? Probably. Anyway *T H I C C*
Keep up the good work!
very old video but thanks
Very funny
What
Loool😂
Mua
Very funny
song?
ua-cam.com/video/p-Z3YrHJ1sU/v-deo.html
wtf
minecraft in csgo xd
Wow.
What's the anime intro music called?
Thanks man
Pain
@@absolutelyodd2506 you're welcome my friend !
Wut
Dont like it sry
what how dare you assault me and my cat it is cause he is big? are you rasict? wow
@@bobbysmurf9915 uhmmm not that way i dont like the way u added things xd not my style