Is it possible to do this for a proboards banner?

[♥ ℒʊ√ ♥]

Very cool, Peter !

[Former Member]

1,200 particles ? That's quite a few. Are you pooling some of those objects or creating 1,200 instances?

[seaturtle]

Mar 9, 2017 14:28:46 GMT -8 Peter said:

1,200 particles...

Wow what on earth, that is so amazing. Does it mess up your forum in any way? Lag? Bugs etc?

[seaturtle]

Mar 9, 2017 14:18:00 GMT -8 Peter said:

Mar 9, 2017 11:48:39 GMT -8 seaturtle said:

peter How did you achieve it? I am impressed that you managed to do it.

My banner is quite large, so even with a few moving about I think it would look pretty cool. I noticed it does seem to make the background picture a bit funny though, perhaps a simple dark grey or black background would work well and reduce that effect?

A link to the rep. with documentation is found in the plugin.

Nope, that's the quality of the GIF.  Test the plugin on a forum and it should be fine.  All it is, is a canvas element sitting on top of the banner.

Is it possible to walk it through with me? I downloaded it but I just got confused. I don't even understand the first step:

"Download and include `parallax.min.js` in your document after including jQuery."

So it wants me to copy and paste the entire parallax.min.js contents into the HTML? I tried that and it just messed up my forum. Then it says "after including jQuery". That's not very helpful, I don't actually get what it wants me to do. Where do I find the jQuery? Apologies, I am hopeless

[Peter]

Mar 9, 2017 15:35:23 GMT -8 @synthtec said:

1,200 particles ? That's quite a few. Are you pooling some of those objects or creating 1,200 instances?

From a quick look at the source, it doesn't appear that any pooling is done, as there is no pooling canvas created.

github.com/VincentGarreau/particles.js/blob/master/particles.js

So yeah, could be optimised quite a bit.

[Peter]

Mar 9, 2017 16:06:45 GMT -8 seaturtle said:

Mar 9, 2017 14:28:46 GMT -8 Peter said:

1,200 particles...

Wow what on earth, that is so amazing. Does it mess up your forum in any way? Lag? Bugs etc?

No issues at all.  1,200 is a bit extreme though

[Peter]

Mar 9, 2017 16:17:14 GMT -8 seaturtle said:

Mar 9, 2017 14:18:00 GMT -8 Peter said:

A link to the rep. with documentation is found in the plugin.

Nope, that's the quality of the GIF.  Test the plugin on a forum and it should be fine.  All it is, is a canvas element sitting on top of the banner.

Is it possible to walk it through with me? I downloaded it but I just got confused. I don't even understand the first step:

"Download and include `parallax.min.js` in your document after including jQuery."

So it wants me to copy and paste the entire parallax.min.js contents into the HTML? I tried that and it just messed up my forum. Then it says "after including jQuery". That's not very helpful, I don't actually get what it wants me to do. Where do I find the jQuery? Apologies, I am hopeless

Just download and install the plugin I posted earlier.  It is a working example that adds the particles to the header.  I didn't have to do much at all.  All I did was wrap the particle call with a ready event and passed the banner ID.

The plugin has a link to the source which explains all the options that can be changed.

github.com/VincentGarreau/particles.js

[seaturtle]

Mar 9, 2017 16:35:45 GMT -8 Peter said:

Mar 9, 2017 16:17:14 GMT -8 seaturtle said:

Is it possible to walk it through with me? I downloaded it but I just got confused. I don't even understand the first step:

"Download and include `parallax.min.js` in your document after including jQuery."

So it wants me to copy and paste the entire parallax.min.js contents into the HTML? I tried that and it just messed up my forum. Then it says "after including jQuery". That's not very helpful, I don't actually get what it wants me to do. Where do I find the jQuery? Apologies, I am hopeless

Just download and install the plugin I posted earlier.  It is a working example that adds the particles to the header.  I didn't have to do much at all.  All I did was wrap the particle call with a ready event and passed the banner ID.

The plugin has a link to the source which explains all the options that can be changed.

github.com/VincentGarreau/particles.js

Thanks for responding peter

Download and install what though? There is nothing to download nor install, it just shows a long wall of code. Is there some special program or software I am supposed to use? 

"All I did was wrap the particle call with a ready event and passed the banner ID."

Yeah I'm so sorry, I don't understand what this means 

[♥ ℒʊ√ ♥]

seaturtle , download the link that Peter posted in the third reply on this thread.

It's directly above the image and reads "Particles.pbp (9.68 KB) ".

Next, go to the Plugin Section of your Admin Panel and in the drop down menu select "Manage Plugin". Click on the "Import Plugin" button on that page.

[seaturtle]

Mar 10, 2017 12:09:07 GMT -8 ♥ ℒʊ√ ♥ said:

seaturtle , download the link that Peter posted in the third reply on this thread.

It's directly above the image and reads "Particles.pbp (9.68 KB) ".

Next, go to the Plugin Section of your Admin Panel and in the drop down menu select "Manage Plugin". Click on the "Import Plugin" button on that page.

Oh haha, I completely missed that link he posted  
Did he use Github to do that? How did he get from:

github.com/VincentGarreau/particles.js

to the plugin?

[seaturtle]

peter thanks so much for the plugin, I didn't realise you posted it. I just have a question for you, I have text on my banner, which gets shifted up too high. Do you know how I could make it so the particles are "behind" or "in front" of the forum name?

[seaturtle]

Ok so I figured out that if you just copy this into your HTML sheet you can get the particles but I need to incorporate this into the banner that it lays "in front" of the banner image and banner text


<script src="//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
   
   <div id="particles-js">
   <header role="banner">
       <div id="banner-container">
           <div id="banner">
               
}
<script>particlesJS("particles-js", {
 "particles": {
   "number": {
     "value": 380,
     "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": "grab"
     },
     "onclick": {
       "enable": true,
       "mode": "push"
     },
     "resize": true
   },
   "modes": {
     "grab": {
       "distance": 140,
       "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
});</script>