How to use particles.js - particles.js as background - background particles animation jquery

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...

[@rubesh-kumar]

Cheers..!! Worked like magic in 2020

[@MuzammilSaleem-vv7zp]

wow its so awesome , no bakwas seedha kam , thanks bro

[@temickab]

I'm unable to put content on top of it. The particles moves to the bottom of the page.

[@alistairferns8502]

z-index: -1

[@muhammadsalah9598]

Some how i always keep coming back to this channel

[@kyrie4728]

this is exactly what iam looking for, thanks alot bro

[@mojtabataheri8918]

The hot weather was great, I was looking for the easiest way I saw

[@myfirstchannel5031]

Thank you very much. This was really great. It worked with me very fine.

[@abdulazizmashrabov770]

Awesome. Best luck for your career

[@hieuminh9402]

OMG- Thank Bro. I love U so much.

[@MB-bi2tq]

I LOVE THIS KZbin CHANNEL ;)

[@OnlineTutorialsYT]

+Marco Balestra love u too bro

[@extrahax8414]

DUDE I JUST LOVE YOUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU :D

[@wolfisraging]

Thanks man, I've learned a lot from u

Wow! Amazing effect! Thanks! Congratulations

[@lindsayes702]

THANK YOU! So helpful.

[@kristinayordanova365]

Thanks dude, good one!

[@tchackeg9370]

Bro i really appreciate quality of content you share..Amazing, thanks a lot! also i Enrolled in your udemy course "Next Level CSS Animation and Hover Effects", it's really nice.

[@MuzammilSaleem-vv7zp]

good bro, thanks

[@mostafashash9855]

Very nice work .. respect❤️ 👌

[@maskman4821]

this is pretty cool, I like it!!!

[@OnlineTutorialsYT]

thanks

[@Riviasussss]

This perfect 👌

[@L8rCloud]

Wow, you're a legend. You can install simple scripts and load them in the browser. You obviously never worked out how to place something in front of it - you know, like a real programmer.

[@mgGelloiss]

How do I place a block or an element inside?

[@Dyl04]

test See there, I used and then placed my content and then closed the div a few lines later. In style.css I added: #overlay { position: relative; }

[@wetspinachtv]

@@Dyl04 doesnt work

[@ttscripts9523]

@@Dyl04 LEGEND TY

[@herr_pouya]

Seriously Great, Thanks!

[@OnlineTutorialsYT]

thanks :)

[@anandsainai2169]

Its looking very nice and its easy to use..

[@OnlineTutorialsYT]

hmmm

[@tidrel7497]

Nicely done. Thank You

[@PhilippineMachine]

Amazing code! thank you!

[@shikhasreekumar]

Thank you sooooooo much for this Tutorial :)

[@syedumar7159]

awesome bro.........................

[@munisaashurova2542]

thank you very much you are very good

[@asispkrl]

thank you sir can i use in my site ?

[@drummerplace590]

Coll tut, but if u add voice sound for this video, u will get more likes!!! Thanks for your tut!!! ;)

[@eugeneponomarov7429]

Is it always important to copy 3 letters? Is it possible to type it on your own?

[@MoonMoon-vu2li]

1 million like for you

[@OnlineTutorialsYT]

+Mi Mi thank u so much

[@multiFuture123]

Hey @Online Tutorials I really enjoy your videos but is it possible to make those particles into text? Thanks,

[@DJ-pt4wh]

Yes, you can have the particles be an SVG image, so you'd need to export the text that way.

[@FuzzyGreenM0nkey]

@@DJ-pt4wh would you make a tutorial about it??

[@VivekKumar-gd4zo]

I followed the whole video correctly, but cannot see any result in the browser. The background color change can be seen, but not the particle and line. Please help!

[@TheBurker]

Is is possible to use this in a certain section of the page. Say in a small div?

[@OnlineTutorialsYT]

yes bro...u use with css

[@TheBurker]

I've tried it a few times and it pushes everything else down and expands the div.

[@AnthonyHowell11]

You might not need this but use parallax with Bootstrap to do this

[@IroshanVithanage]

maybe flex box

[@v_nut_v]

The js file create a element in your html file. In your css file: canvas { position: absolute; top: 0; z-index: -1 } But this will lose mouse hover interactive effect

[@ronitchaurasia5604]

I put text on it but particles coming above text...even z-index is not working.... I want my text above particles..plz help

[@MinedoPov]

It stays at the top, how can I put it in the background?

[@travismartin2186]

is there any way to make particlesJS a background in a flex container?

[@OnlineTutorialsYT]

many way bro

[@matthewsmith1571]

Sorry but this is the most useless reply ever haha

[@Jarxay]

1:50 how do you duplicate lines like that

[@LordAlexPop]

Alt+Shift+Arrow Down

[@eratechsolutions9746]

very attractive thing

[@hazqier]

It was working on my PC but now on my laptop, the animation won't load. It's just white. Even changes the background-color. Still no animations.

[@kristinarousseau275]

is it possible to add this to square space as a page background?

[@ahhao7726]

i just wan to set as background and put some content inside ... how to make it

[@OnlineTutorialsYT]

use bg image

[@ahhao7726]

how to use... or may u sent me the code then i will compare the difference... pls

[@videocasetteTV]

Does chrome browser support it

[@subhamsamir9209]

awesome job bro

[@brenmazzz]

Awesome, beautiful music which is it please?

[@d.feernando]

guys, how do I put text on it? I'm from Brazil !! thanks for the content

[@tabrezshaikh5603]

can u plz help me to change the color of Particles?

[@anonymonster1874]

for some reason Particle.js is only getting downloaded as a file in my laptop instead of like the whole software thing you're getting!! PLEASE HELP!

[@sivasenguttuvan7435]

Bro how to use letter in this instead of dots

[@yashmalhotra4932]

I am not getting any output. I use Mac computer and I don't think that should affect the output.

[@the_automaniacs]

Great job!

[@SyazaZachary]

Isit possible to make the particles form a shape or an image or 3d model? Where can I get the tutorial for this? I am making a project as a beginner and I really want to learn. Thanks

[@Rick-sf2cz]

How do I make this the background? So that if I write text over it the particles will simply continue behind the text as opposed to disappearing where the text dimensions are?

[@dominikakbary]

Mb just place a new container over it

[@AMGLiam]

doesn't work with atom, what editor do you use?

[@ahmedrashed5567]

thanks but I get this error Cannot read property 'getElementsByClassName' of null exist_canvas = pJS_tag.getElementsByClassName(pJS_canvas_class); hope help

[@ouder2479]

have you tried putting "" arround the pJS_canvas_class ?

[@gonzaloastorga882]

The music almost put me to sleep, and I am spanish and like mi siesta

[@noumanwahed6591]

can we upload background image rather then colour?(just started learning about web development)

[@dev10shah]

yes

[@Acharknews]

i cant usi it in background heder wordpress because i dont know how to use .js an html !

[@lissyuloh1957]

Thanks for this. Please how do i make this work on asp.net mvc. Am having issues

[@videocasetteTV]

cool , kindly may you create another tutorial you show in it how to have different looks from the particles

[@OnlineTutorialsYT]

ok bro...thanks

[@veltrox1911]

Awesome!

[@nabihossain3079]

Informative Tutorial bro

[@ԹագուհիԻսայան]

Thank you👍

[@ArjunKiLife19]

Particles use as a image. Is it possible???

[@DeVvuZOnYT]

my friend cant put that :c

[@DeVvuZOnYT]

PS: im gay

[@AurumDesignz]

Didn't come in as a background. just an item above other items.

[@usamaqasim1926]

how to create this slider in wordpress

[@baphelamus720]

Very very useful

[@Kalnikaldemang]

👍✅

[@defunct8185]

There is a way to load config files, how do you do that?

[@sierra991]

can you copy and paste all the code into paste bin or something please?

[@sierra991]

so... can you?

[@juhandvan]

Great ... great

[@OnlineTutorialsYT]

thanks :)

[@sylvrtortus]

THANKS VERY MUCH

[@mohammadyeasinalfahad3205]

Its not working on my browser I am getting this error `app.js:14 Uncaught ReferenceError: particlesJS is not defined` `at app.js:14` Help

[@mohammadyeasinalfahad3205]

opps just solved it. need to add the particles.js frist then app.js

[@0day386]

thanks alot!

[@madvier_8336]

please make like bubbles or liquid thing like in intelijidea website

[@erickasqui3909]

me he quedado con la boca abierta, eres exelente chico.

[@OnlineTutorialsYT]

:)

[@mirafzalqosimov3443]

Thanks a lot

[@ebisinteidennis]

AFTER I COMPLETE IT. THE PAGE ONLY DISPLAYS BLANK. I HAVE TRIED TROUBLESHOOTING BUT NO WAY YET

[@santhoshraghav143]

wow! superb bro

[@OnlineTutorialsYT]

thanks bro

[@mmusic.9507]

nice

[@NadeemWBR]

thanks bro

[@anuragmourya1120]

thank you

[@deepthilavanyanulu6096]

how to add different particle effects on different images??

[@avadheshmaurya1972]

change the modification in app.js file. You can get the different result as per your need.

[@shamarireland3896]

does anyone know the code on how to make the particles black in css? or do it have to be on the js part?

[@Bajrang.707]

you can easily do it in app.js file.

[@error53ish]

Holy cow. I think whomever recorded this needs to watch a "how to type tutorial". =/

[@akylbekandakulov1508]

thanks man

[@komalvyapari-sawant7967]

can u tell me how it install in wordpress also

[@OnlineTutorialsYT]

same method bro....call .js file

[@kiranjitmisra8832]

when I apply id="particles-js" in any div element just works but height is increased .plz help

[@avadheshmaurya1972]

put the value in particle id in css z-index: 1; OR give it a position absolute. This will resolve your issue.

[@LordAlexPop]

@@avadheshmaurya1972 it's not OR, it's AND. ;)

[@ExplorewithZac]

Hey man... This is NOT a tutorial on how to use the particles.js as a background. This is will not function as a background, it will be on the same level as all html elements, pushing them further down the page.

[@laurentiu0920]

Can I create something like this in After Effects? If someone has a tutorial, I'll be glad :)

[@PaymtheSheep]

Look on YT for Plexus

[@AltafHussainPatel]

press f11 in browser and record the screen :D

[@ЕльзаВикторовна-я7й]

thanks!

[@itachi-senpaii]

thanks

[@KaranChecker]

You'd rather go to a directory to copy a name as short as particle or app, rather than just typing it out. That's just sad.

[@druvanthchinnu9157]

Unable to put content on it

[@vic__5378]

wow men this is awesome thanks

[@OnlineTutorialsYT]

welcome

[@mouh327]

a biiiig like

[@OnlineTutorialsYT]

thanks bro

[@regensonne8908]

Can you send me the src? :C

[@OnlineTutorialsYT]

watch video