XF 2.1 How to add Particle.js to background?

  • Thread starter Thread starter Deleted member 91401
  • Start date Start date
D

Deleted member 91401

Guest
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:

vincentgarreau.com

particles.js - A lightweight JavaScript library for creating particles

A lightweight JavaScript library for creating particles.
vincentgarreau.com vincentgarreau.com

Anyone have any ideas what the issue could be or how to use my own custom particle.js script?
 
Sort by date Sort by votes
BassMan said:
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?
Click to expand...

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?
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
BassMan said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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:
Upvote 0 Downvote
HazedOff said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
Russ said:
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.
Click to expand...


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.
 
Upvote 0 Downvote
HazedOff said:
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.
Click to expand...

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.
 
Upvote 0 Downvote
Russ said:
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.
Click to expand...
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
 
Upvote 0 Downvote
@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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

W
  • Question Question
XF 2.2 trying to add particles to header
Replies
4
Views
352
williamt
W
Bulbagarden
  • Question Question
XF 2.2 Change header/logo row background image based on custom user field
Replies
8
Views
694
Bulbagarden
Bulbagarden
securedme
  • Question Question
XF 2.2 Add background image to forum view top?
Replies
5
Views
356
mjda
mjda
C
  • Question Question
XF 2.2 Need help to add background image in Body Header
Replies
1
Views
380
TPerry
TPerry
E
  • Question Question
XF 2.2 How to change guest welcome message register button background color?
Replies
5
Views
503
SeaWolf
SeaWolf
Top Bottom