I’ve just posted a new tutorial on How to add Interactive Particles Background using a new and interesting tool. checkout the latest tutorial as that is fresh and better.
Recently I applied a nice moving particle background effect on my Free Website Templates Landing Page(s). You will see the effect in the header and in the bottom email subscribe section.
Many people asked me how to do it so here is the quick Step by Step tutorial.
Integrate ParticleJs library to your theme.
You can download this small JS library from here and follow the instructions mentioned there to integrate it properly in your theme. However to make it more easier for non-techie friends i have created a small plugin which will do this all for you by simply installing and activating the plugin.
Once the plugin is activated you will see a new Backend menu item called “Particle Background” as seen in the screenshot bellow.
Clicking on this will take you to this screen, where you can add your code which will explain shortly.
Now you are fully ready to apply some nice background effects to your website / page. Let’s first find and configure a cool effect from the particleJs Demo here. There are multiple configurations you can play with and generate an effect as per your liking / need. All options there are self explanatory and you need to play with it and generate a code. Some screenshots to help you find the options.
1) Default Screen on Particle JS Demo
2) Choose a Preset you like
3) Play with options
4) Download Generated Code
5) Copy & Paste Code
This is json code ( don’t worry if you what it is ), open the downloaded file in any text editor or ide of you have. The code will look like the image bellow. JUst select all from top to bottom and copy it.
Now go to My Plugin setting page which i showed you in the start of this post. Now you need to paste the code in the text area available there, but you must paste this code in between following code.
particlesJS('UNIQUE_ID_HERE',
PASTE YOUR CODE HERE
);
You need to paste the code exactly where i have pointed, and also assign a Unique id where i have mentioned. You can duplicate this whole code to add another unique id and apply it to another div / Section.
Now the last part is to apply the same id to a section / div on your page where this background effect will be applied.
For Divi Users:
You may easily apply an ID to a section from the section setting as seen bellow.
For Elementor Users:
You may easily apply an ID to a section from the section’s Advance setting as seen bellow.
You may notice that the moving particle are above your content, in that case just give the content column / row a “z-index:5(or more)”
Hope i have explained it well, i am not a content writer so this tutorial may not be very well structured / written, but i hope you get it 🙂
Let me know for any issues / questions in comment here and i will try best to help you out with it.
Hi
I did everything according to your instructions.
I installed the plugin, download json file, paste default code.
I applied it in a slider module. On the first slider efect is great, after going to the next slider effect disappears.
Worse, images/pictures on all my pages were gone. After the plugin is disable images back.
What is wrong?
Hi Karol,
Could you please create a demo page and add the section you are applying this effect on and activate and follow the tutorial on that demo page and provide me with the demo page’s link and i will see if i can help. I have not tested it on a Module like you said you have used it on Slider module. I have tested it on a section only as in my tut mentioned. However i will try to debug your issue.
Thanks,
Munir
I got this error as I want to activate plugin:
Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected end of file in /srv/www/blackhen/htdocs/wp-content/plugins/ParticleJs-WP-Plugin-master-2/particlejs.php on line 77
Can you please suggest what to check, change?
goran
I have fixed it now. Please download the plugin again from the link provided as i have updated it.
hi,
I get this error when I want to activate plugin:
Parse error: syntax error, unexpected end of file in /srv/www/blackhen/htdocs/wp-content/plugins/ParticleJs-WP-Plugin-master-2/particlejs.php on line 77
Can you please help me?
Goran
I have fixed it now. Please download the plugin again from the link provided as i have updated it.
I get an error when trying to install the plugin: Parse error: syntax error, unexpected end of file in E:\Trabajo\xampp\apps\wordpress\htdocs\wp-content\plugins\ParticleJs-WP-Plugin-master\particlejs.php on line 77
I have fixed it now. Please download the plugin again from the link provided as i have updated it.
That fixed it, thanks.
Hello, could you please clarify, where exactly put “z-index:5” to make particles showing behind the element? thank you!
Hi Dina,
May i request the url where you have applied it and i will specifically point you to that?
Thanks
Hi
I changed the z-index to 5 but it still appearing on my content. help?
Link Please
hi,
I want to add this via builder but this is not divi. I can not find css id anywhere. Where should I put this and how? Like css class or?
Thanks,
Goran
Hi,
Do you mean you want to add this on a non divi site? This tutorial is however specific to a divi site Which framework exactly are you using?
hi,
yes I want to add this on non divi site. I am using Themify builder. Any help for this builder?
Replied to your other comment. Thanks
hi,
yes I want to add this on non divi site. I am using Themify builder. Any help for this builder? or if you can show how you put this on Elementor.
Thanks,
Goran
Reply
Hi,
I haven’t used the Themify builder. Could you provide me a link of page where you are trying to add this? I might help you. Or may be better to create a test page and add your section and apply this tutorial and than i can see what to fix in it.
Thanks
hi,
thanks for reply. Can you tell me how do you add this in Elementor?
Thanks,
Goran
I have not even done this for elementor yet. There is a problem with that i need to tweak out how it could work with elementor yet. Once i get time to do it will post it on the blog about it too 🙂
I have followed all your instructions. I have pasted my generated Json code where you intstructed. I have named my Section with a unique CSS ID and then have put that unique ID in the JSON plugin code, but it will not work.
Any idea why?
Hi Joe,
Sorry for late response, Could you please let me know what exactly you put in the plugin Text area box? Please paste your code here.
Thanks
“Now go to My Plugin setting page which i showed you in the start of this post”
I guess i am blind, where do i need to put these lines ?
´particlesJS(‘UNIQUE_ID_HERE’,
PASTE YOUR CODE HERE
);´
Sorry i am not a good writer 🙂
Let me explain that here, when you install the plugin a new admin page is created called “Particle Background” which contains one text area box and there you need to put that code. The screenshot is also provided in the post and here it is for you.
No your writing was fine, guess it was my clumsy brain,it´s working like charm now, i even put 2 different backgrounds on the same site.Thanks so much and have a nice christmas
Hi there,
Does this plugin work on an Avada theme?
Hey, i would like to use particles.js as background for my wordpress site. Im using the OneUp Theme. I did everything right, but having problems with giving the background the unique css id. I really dont know how to explain better 🙁
Hello,
I am using X theme right now, and tried adding the id to a section. The background with the moving particles appears, however it applies it to the whole page. Any ideas?
Thanks so much for putting this together! It looks great in your demo, but unfortunately is not working for me.
I’ve installed the plug in, pasted in the JSON code and added the CSS ID, but I just get a white background. I’ve tried adding to both a section and the full width header module.
I’d appreciate the help as I love this effect:
particlesJS(‘SVG’,
{
“particles”: {
“number”: {
“value”: 80,
“density”: {
“enable”: true,
“value_area”: 800
}
},
“color”: {
“value”: “#ffffff”
},
“shape”: {
“type”: “circle”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “img/github.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: false,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 3,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“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”: “repulse”
},
“onclick”: {
“enable”: true,
“mode”: “push”
},
“resize”: true
},
“modes”: {
“grab”: {
“distance”: 400,
“line_linked”: {
“opacity”: 1
}
},
“bubble”: {
“distance”: 400,
“size”: 40,
“duration”: 2,
“opacity”: 8,
“spese”: {
“distance”: 200,
“duration”: 0.4
},
“push”: {
“particles_nb”: 4
},
“remove”: {
“particles_nb”: 2
}
}
},ed”: 3
},
“repul
“retina_detect”: true
}
);
Sorry, its working great now, no idea why it wasnt working!
Is there a way to introduce other animations, for example:
http://soulwire.github.io/Muscular-Hydrostats/
Hi Munir,
Thank you for the plugin this is great, but I can’t get mine to work.
Here is the URL: http://nerddigital.com/
I hope you can help.
Hey Marcio,
It’s bitt different to make it work in the slider, let’s try to debug the issue. I can see from your page’s source the id “particlebg” is used 2 times? it should be used once thus this is an id not a class. Could you please use the id on the main slider and not on each slide? And see if this works for you that way?
I would also try it out on a section to test if it’s working there to make sure other steps are followed properly 🙂
Hope it helps to make it work for you?
Cheers,
Munir
Hi Munir,
can not make it shown on my second section, https://www.businessonwww.com/home/
would you please help me to make it work? Thank you
Hi Diana,
When you put the code in the plugin box, where it says “UNIQUE_ID_HERE” this is actually an CSS ID, you may need to change it (not necessary). Now because this is an id you can’t use it twice, as i can you have used it on a section and also with in that section you used it on the image module as well. Please remove it from image module and than it will work on the section.
Now if you wish to add the same effect on another section, you need to first duplicate the whole code in the plugin box you added, so you will have 2 codes like this:
particlesJS(‘UNIQUE_ID_HERE’,
PASTE YOUR CODE HERE
);
particlesJS(‘UNIQUE_ID_HERE_2’,
PASTE YOUR CODE HERE
);
Both IDs should be unique and than you need to simply put that second id to the second section you need to use it.
Hope it makes it clear. let me know if this doesn’t work.
Cheers!
Munir
Hi Munir,
I really appreciate your help! But it is not working after I fixed the ID.
would you please take a look at NOT working URL:
https://www.businessonwww.com/test-no-particles/
and working URL:
http://photo.businessonwww.com/test-mac-particles/
The only difference between these two sites: the site where particles not working has plugin “Divi Custom FullWidth Header Extended” installed. this plugin has particles implemented into it. May be there is a conflict between two plugins? Thank you very much! I really love your plugin because of flexible design!
Hi Diana,
I can see that on the site where the particles animation not working is not loading the particles.js script. And on the other site where it is working it’s loading the script fine.
umm.. I am not sure about the other plugin, can you try disabling it for test and see if this works than?
Cheers,
Munir
Hi Munir,
I did not want to experiment with my main website https://www.businessonwww.com deactivating that plugin because I already build several pages (I do not want to mess them up:), so I just uploaded that plugin on http://photo.businessonwww.com/test-mac-particles/ , your plugin is still working, soo I can not figure out why particles.js script is not loading to the site https://www.businessonwww.com/test-no-particles/…. I really appreciate your time! Thank you!
There must be some plugin conflict, the only way ( i may suggest ) to find out is disable all plugins ( on your demo site if this is the perfect clone of the main website with the same theme / plugins ) and activate them one by one and find out what plugin is causing this not to work.
Thank you very much! I love your plugin because of design flexibility , so would be able to use it on my other sites! May be the particles.js script not loading because that site has SSL certificate … I will check with plugins also…any way, Thank you very much for your time!
Congratulations and Thank you!
I for one apriciate your hard work.
done everything on the instructions, and is not working what could I be doing wrong ?some help please
cheers
Any live link to review?
Hello,
very nice work, thank you.
Would it be possible to, instead of assigning an ID, assign a class instead? Can this be done?
Best regards
Hi Alex,
Sorry for late response. No it can only be done via ID as far i understand from the instructions provided by the library we are using here.
Hi my particles only show when clicked. how can i fix this?
thanks
Sorry for late response, could you please provide the url so i can review it?
It’s totally fine! Just very grateful you can help!
http://test.swesajt.se/sample-page/
If you need log in details i happily give them to you over email =)
Ahh i see, you actually have white background and your particles color is white also so when you click as it highlights the div you see them, but basically they are there.
You may need to change the background color of this section or you need to alter the color of those moving particles from the site you created and copied the code.
Hope it helps.
Munir
I see, simple as that huh 🙂
But how do i get the background color a diferent color without changing it in wordpress but in the particles.js code. (jonson code)
thank you!
Hi,
Followed the instruction given yet the background looks white and empty. I have copy/paste the code for your reference. Please let me know if I paste the wrong code cause I not familiar with code.
particlesJS(‘pb’,
{
“particles”: {
“number”: {
“value”: 118,
“density”: {
“enable”: true,
“value_area”: 631.3280775270874
}
},
“color”: {
“value”: “#ffffff”
},
“shape”: {
“type”: “circle”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “img/github.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: false,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 3,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“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”: “repulse”
},
“onclick”: {
“enable”: true,
“mode”: “push”
},
“resize”: true
},
“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
}
I guess i was able to help you sort this via the email. Let me know if you still have any issues 🙂
The section background color needs to be changed via the Section setting when you edit this page in divi builder. It’s not related to that particle js code.
I did exactly as you mentioned here and wow I love how it looks on my own website! I used it on almost all the page headers. See it in action at ramboruizdotcom
Thanks a ton CakeWP
Glad it helped you, btw i would suggest you to try one small change in the code find “detect_on”: “canvas” and change canvas to window than on pages / sections where you see the click is not working properly it will work better.
Cheers
Hello,
I did everything you mentioned, but I want to add this to a slide on ‘slider revolution’ is there a way to do it? and, I’m not sure how to call an ID for a section. Please help.
Thanks
Hi Hussein,
Could you please share a url where you are testing it? I have not personally tried it on slider revolution but let me inspect the code and it might work. Please share url where all the steps from the tutorial is followed.
Cheers
i tried it on revolution slider and it worked. just give an id to the section that contains your slider revolution slider. and then use that id in the particle settings page as explained above. it will work
Hello bro, I have been struggling on how to do this with the revolution slider plugin but I was unable to do it. Can you please show where exactly to put the ID on the section with a screenshot? Thanks
This is so cool. I’ve added it to one of my client’s site who is an astrologer. It’s working beautifully. Thank you!
Hi, thanks for this tutorial.
We did everything you mentioned but the effects doesn’t show up. We set two different codes in this page: http://farmacia-beta.pramaweb.com/particle-pramaweb/, normal section and large section on Divi.
Could you help us please?
Thanks. Best regards
Hi,
The code i can see on your website is working fine, you can’t see the moving particles because their color is white and so the section background color is white as well. So they are not visible.
You will need to either change the particles color or the section / page background color.
Cheers,
Munir
Hi,
This is a great plugin. Thank you for this.
The only problem that I experience is that the content is behind the background.
This is the css that I used:
.header_one {
z-index:5;
}
.header_two {
z-index:5;
}
Hi,
After implementation step by step pops up an error:
Uncaught DOMException: Failed to execute ‘querySelector’ on ‘Document’: ‘#100 > .particles-js-canvas-el’ is not a valid selector.
at new pJS (http://nowa.codersdesign.pl/wp-content/plugins/ParticleJs-WP-Plugin-master//includes/particles.js?ver=4.7.4:12:28)
at window.particlesJS (http://nowa.codersdesign.pl/wp-content/plugins/ParticleJs-WP-Plugin-master//includes/particles.js?ver=4.7.4:1517:17)
at http://nowa.codersdesign.pl/?preview_id=252&preview_nonce=6b55feb6fc&_thumbnail_id=3942&preview=true:689:12
Thanks for the tutorial. I am trying to figure out how to fix one problem. The height is being set to the height of the page, so it causes the polygons to stretch. I’m not sure how to fix this.
I am using Beaver Builder. My row is set to #hero.
Here is the site: http://checkyoursite.net/dev/meehanmd.com/
Hello,
I did everything like you mentioned but couldnt make it worked ith Visual Composer.. Can you help me please ?
Hey, I’ve been trying to get particles.js work on my site. After following the instructions, I can see the particles but it is pixelated as if it is zoomed in, only when I use the Inspect function of the browser that it switches to the way it should look like but then I tried to click any buttons and nothing is working – it’s like the background is on top of the content. Here is a test page link for you to see:
http://klbalangue.co.uk/testing-page/
Hello thanks for the tutorial you are great help!
my problem i can’t see the particles.
Add Your Json Code here
MY Json Code:
particlesJS(‘UNIQUE_ID_HERE’,
{
“particles”: {
“number”: {
“value”: 80,
“density”: {
“enable”: true,
“value_area”: 800
}
},
“color”: {
“value”: “#ffffff”
},
“shape”: {
“type”: “circle”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “img/github.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: false,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 3,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“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”: “window”,
“events”: {
“onhover”: {
“enable”: true,
“mode”: “bubble”
},
“onclick”: {
“enable”: true,
“mode”: “repulse”
},
“resize”: true
},
“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
}
);
but no work i dont look the animations 🙁 i put the ID too
Please provide the page link where you have applied it.
Hi
I am using Enfold. I created 2 particlesJS unique ID.
The first one is ‘ID_A’, and the other is ‘ID_B’.
When I implemented on first section – ID_A is working
Then I use ID_B on another section, but it is not working.
The codes are exactly the same. I copy n paste and just change ID name.
How can u help?
Hi,
This should work fine, could you please share the whole code you added to the plugin?
Thanks,
Munir
Working perfectly on my Blog 🙂
Thanks !
hi it is work in visual composer? I,try installed it to my site but nothing happen, hope you could assist me, thank you
It may work, you need to make a workaround for that.
Thank you so much for such a nice plug-in.
highly appreciate you effort!!!!
HELLO, How do I fix this issue?
Here’s the link.
zamerat.com/contact
What issue exactly? I don’t see the particles at all?
I want this on my Homepage of Newspaper theme having TagDiv composer. How I can add this to my Homepage.
If your composer (I’ve not used it) allow you to assign a CSS ID to a section/row, you can use the same tutorial steps and at the end assign your Unique ID to the section.
Thank you so much, this looks awesome. But i still have a small trouble. I only want the particles to appear on an image on one page. So I did the following:
random text
random text
But the particles move outside the image as well. Is there a way to set their border right where the image ends? Hope you understand my problem.
Kind Regards, Patrick Peter
Not sure I understand your issue clearly. Could you please explain more with demo link.
Hello how can you add the particles to display in the complete website and every page , footer and header.?
Simply assign the CSS ID to the header another to the Footer, you may need to edit your template files pretty out of scope to explain it here.
Hi Cake, great plugin!
but is there a way to make it work without additional plugins such as elementor?
I’ve using the unfold theme and ‘just’ would like to add this to the background.
thanks
It doesn’t require additional plugin like elementor to add these particles effect, you can apply this to any section/page by assigning the CSS ID to it.
Hello, thanks for that nice tutorial. I set it up as you described and wanted to use it for a single section. But the particles only show up in the header slider not as the background of the specific section I added the ID. Do you have an idea to solve that?
if you are trying to use the same CSS ID multiple times on a page it will only work once. You need to create multiple IDs as explained in the tutorial.
Hey there! Thanks so much for your tutorial! I’m having trouble figuring out why I cant get particles to show this time (I’ve used it before, but I’m in Divi on WordPress using your plugin. Can you take a look for me?
https://blandy.io
How can I implement this with visual composer?
Simply pass the CSS ID to your section via visual composer.
Hey. Thanks for the sharing. I just saw a website from a member of elementor community that using this style for his header. Just google it and found your tutorial.
Its great !
Any reason my particles would be stretching? They don’t seem to for you?
May be some CSS conflict? But looks like you have fixed it already.
Hi Munir! First of all, thank you so much for creating this plug-in, it makes particle life so much easier for WP folks like me! There’s just this question about using image as particle: Where should I store my .svg files in wordpress directory and how should I write the path in json code?
What I tried but did not work (svg files in folder “includes”, same as particle.js)
particlesJS(‘BGparticle’,
{
“particles”: {
“number”: {
“value”: 80,
“density”: {
“enable”: false,
“value_area”: 800
}
},
“color”: {
“value”: “#000000”
},
“shape”: {
“type”: “image”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “Asset1.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 6,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“line_linked”: {
“enable”: false,
“distance”: 150,
“color”: “#848181”,
“opacity”: 0.4,
“width”: 1
},
“move”: {
“enable”: true,
“speed”: 6,
“direction”: “none”,
“random”: true,
“straight”: false,
“out_mode”: “bounce”,
“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”: 158.35505639876231,
“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
}
);
I guess you need to provide the absolute path there, not just the file name?
Not sure why, but I changed the below to double quotes
from
particlesJS(‘p111’,
to
particlesJS(“p111”,
and it now works for me…
how can I use it in the body background
Simply pass the id to your body tag.
Any Hint for Visual Composer (WPBakery)?
I added code, i see it in view:source – but i don’t see it on site
i get
particles.js?ver=4.9.6:1495 Uncaught TypeError: Cannot read property ‘getElementsByClassName’ of null
at window.particlesJS (particles.js?ver=4.9.6:1495)
at (index):839
Many Thanks!
Unfortunately I have not used VC much lately. But the it seems like your site is not loading jQuery or loading it after the particles.js file loaded by my plugin. If you are using any js minification or optimization plugin, please exclude jQuery.
Hello,
I am trying to add the particles to the banner at the top of the page but they don’t show up! This is the code i’ve used:
particlesJS(‘particlesbg’,
{
“particles”: {
“number”: {
“value”: 265,
“density”: {
“enable”: true,
“value_area”: 400.8530152163807
}
},
“color”: {
“value”: “#ffffff”
},
“shape”: {
“type”: “circle”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “img/github.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: false,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 1.5,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“line_linked”: {
“enable”: false,
“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”: “repulse”
},
“onclick”: {
“enable”: true,
“mode”: “bubble”
},
“resize”: true
},
“modes”: {
“grab”: {
“distance”: 400,
“line_linked”: {
“opacity”: 1
}
},
“bubble”: {
“distance”: 194.89853095232286,
“size”: 8.120772123013452,
“duration”: 0.40603860615067255,
“opacity”: 0.07308694910712106,
“speed”: 3
},
“repulse”: {
“distance”: 121.81158184520177,
“duration”: 0.4
},
“push”: {
“particles_nb”: 4
},
“remove”: {
“particles_nb”: 2
}
}
},
“retina_detect”: false
}
);
Make sure you are passing the exact same id to the section/div so that it appears there.
Hi,
Thank you for this plugin, how to change the background in transparent?
and the size of the canvas ?
Could you please provide more details? A url as well to your website.
Hi,
I have this working, but the particles canvas is stretched horizontally, and looks odd as a result.
Also the mouseover event is occurring in the wrong place, several inches under the actual particles.
Any ideas why?
I am using DIVI BTW, and have applied to a DIVI section.
http://redseige.michaels.me.uk/
I guess you have already fixed it.
Thank you so much. This plugin still work in 2018!!
Thanks! Works like charm on WPBakery
The guide was a little bit confusing, but; IT WORKS (On my divi page)! 😀
This is awesome! Very, very good…
I was google for a solution like that for a long time…
If you want, i can help you structure this guide a little better. 🙂 Contact me if you want!
its very good tnx your awsome
yayyyy tnxxxxxxxxxxxx