XF 2.1 How to add Particle.js to background?

HazedOff

Active member
Hi,

I'm currently using the xenbase theme created by @Russ and PixelExit.

Unfortunately Russ has informed me he has too much back log to help me out at the moment which is fine so I'm wondering if anyone in the community can maybe help me in the interim.

I'm looking to add particle.js to my xenforo forum background.


When I do the following:

1) edit template " template helper_js_global "

2) Find
Code:
<!--XF:JS-->

3) Add This code below that line:
HTML:
    <script src="https://cdn.rawgit.com/jnicol/particleground/69195da3/jquery.particleground.min.js"></script>

    <script>

        $(".p-body").particleground();

    </script>

4) and add this to my extra.less file:
CSS:
.pg-canvas {
    position: absolute;
    z-index: 1;
}
* {
    z-index: 2;
}

It does actually work, but the animation is extremely choppy/laggy it's not as fluid and smooth as it should be for example on here:


Anyone have any ideas what the issue could be or how to use my own custom particle.js script?
 

BassMan

Well-known member
I just tried on my test forum. It works smoothly with the CDN path.

But I use default style. Have you checked if it works on your default style?
 

HazedOff

Active member
I just tried on my test forum. It works smoothly with the CDN path.

But I use default style. Have you checked if it works on your default style?

I haven't as I don't have a default style installed currently. Perhaps its an issue with either my theme its self or my hosting? but if I'm using the CDN my web host shouldn't be a factor?
 

BassMan

Well-known member
Well, you can install default style alongside this one and disable it for users. It's always good to have default style at least for testing things out. If it works on default style, then you know it's a custom style issue.

What PHP version do you run?

Maybe you can check with your hosting if they block something in the firewall, but I doubt this is it.
 

HazedOff

Active member
Well, you can install default style alongside this one and disable it for users. It's always good to have default style at least for testing things out. If it works on default style, then you know it's a custom style issue.

What PHP version do you run?

Maybe you can check with your hosting if they block something in the firewall, but I doubt this is it.

Everything works seamlessly on my host, php is 7.2+ can't imagine my host being the issue. Does seem to be a custom style issue, I did as you advised and installed the default theme, added the same bits of code as in my first post and it works seamlessly.

Perhaps the way XenBase uses some type of custom jQuery is effecting it, will have to wait for @Russ to help me out. I purchased the theme a few days ago and $30 isn't exactly cheap so I hope he manages to get back to me soon.

Thanks so much @BassMan for your help thus far.
 

djbaxter

Well-known member
PixelExit just released a major update for all their styles and on some forums that is requiring a lot of direct input by @Russ

Sometimes it's just klutz stuff (yep... guilty) and sometimes it's customized termplates affected by the upgrade. Understanably, that's the highest priority right now.

I would really recommend that you re-install the XF default style while you're waiting. If the problem still present on the default style, you'll know that it isn't the PixelExit custom style but something else.
 

Mangini

Active member
Which browser are you using? From my understanding particle.js tends to be choppier in Firefox than browsers like Chrome or Safari. Not sure if you've tested those out yet.
 
Last edited:

Russ

Well-known member
Everything works seamlessly on my host, php is 7.2+ can't imagine my host being the issue. Does seem to be a custom style issue, I did as you advised and installed the default theme, added the same bits of code as in my first post and it works seamlessly.

Perhaps the way XenBase uses some type of custom jQuery is effecting it, will have to wait for @Russ to help me out. I purchased the theme a few days ago and $30 isn't exactly cheap so I hope he manages to get back to me soon.

Thanks so much @BassMan for your help thus far.

Just to be clear, and I hope I don't come off rude as that's not my intention but modifications like this shouldn't be expected to be covered under my normal style support. I do try my best to help everyone with their custom modifications and prioritize as I see fit. If everyone who purchased a style wanted a custom script to be implemented, I'm not sure I'd have any time to do anything :D. That's why I mentioned I'd swing back around to your request when I had more time.

That being said, we don't use any addition JS out of the box on the majority of our styles. The only exception is really just the backstretch option which only loads the JS if you enable it. I'd definitely attempt to get it working on a stock style to eliminate any potential conflicts with our styles.
 

HazedOff

Active member
Just to be clear, and I hope I don't come off rude as that's not my intention but modifications like this shouldn't be expected to be covered under my normal style support. I do try my best to help everyone with their custom modifications and prioritize as I see fit. If everyone who purchased a style wanted a custom script to be implemented, I'm not sure I'd have any time to do anything :D. That's why I mentioned I'd swing back around to your request when I had more time.

That being said, we don't use any addition JS out of the box on the majority of our styles. The only exception is really just the backstretch option which only loads the JS if you enable it. I'd definitely attempt to get it working on a stock style to eliminate any potential conflicts with our styles.


Hi @Russ , I'm not asking you to make the script for me. I have a script that works fine when I build it into a basic HTML page and also works fine with the default theme but becomes choppy when used with xenbase.

All I'm asking for is a little support on getting it working.
 

Russ

Well-known member
Hi @Russ , I'm not asking you to make the script for me. I have a script that works fine when I build it into a basic HTML page and also works fine with the default theme but becomes choppy when used with xenbase.

All I'm asking for is a little support on getting it working.

Does it work fine on the default style on your site or are you saying this based on what Bassman mentioned? I responded to your support request on my site but it appears you're loading some custom slider which is loading a second copy of a rather old jquery version which may very well be the problem.

Our stock XenBase style loads zero additional JS as I mentioned, it more than likely has nothing to do with the style.
 

HazedOff

Active member
Does it work fine on the default style on your site or are you saying this based on what Bassman mentioned? I responded to your support request on my site but it appears you're loading some custom slider which is loading a second copy of a rather old jquery version which may very well be the problem.

Our stock XenBase style loads zero additional JS as I mentioned, it more than likely has nothing to do with the style.
Hi @Russ,

No I followed @BassMan advice and installed the default xenforo theme, I then went ahead and did the edits mentioned in my OP. The particle.js script is fluid as supposed to be as seen on here: https://vincentgarreau.com/particles.js/

However, I have now also made it live on my normal theme so you will be able to observe, it's what I can only describe as non-fluid or "choppy".

I disabled the uninstalled the slider add-on I actually didn't realise that was even still there we haven't used that in quite some time, much appreciated pointing that out.

Again thank you for your responses and help thus far @Russ
 

HazedOff

Active member
@Russ,

What I have found is that on the homepage it's very "slow" or "choppy" however inside node categories, it works exactly as intended.

I figure something to do with how long the homepage is because of all the nodes is something to do with the problem I'm experiencing. Unfortunately I'm a little out of my depth with javascript, if you could give any insight to how I might find a remedy for this issue I'd much appreciate it.

I am willing to pay you a little extra for your time if you can help me with a solid fix for this @Russ
 

Russ

Well-known member
If you want to submit a ticket on my site with an admin login I can take a look. I'd like to see both the default and a Xenbase style with the same particle effect to eliminate any problems with my style off the bat.
 
Top