[How to] Add a Particles.js Background to your Page Section

design

#1

floaty

Looking for a quick win to add some futuristic animation to your landing page? You’re in luck! We have ascended to new levels of background technology with what we are calling floaty particles. You can achieve this effect in just two easy steps!

Big thanks to @aucaitlin for bringing this functionality up in the Community, without which this wouldn’t have been brought to our attention! :tada:

You can see this floaty in action (built in Unbounce) here:
https://landingpage.noahmatsell.ca/particles/


:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


Click here for instructions

Heres a link to the script: https://gist.github.com/noahub/a81e35c65425a3233239100755ad8ffa

Step 1.

Copy the latest version of the script above and paste it in your Javascripts section with placement ‘Before Body End Tag’

Step 2.

Copy the ID of the target page section and replace the value of the variable section in the code snippet.

Now sit back and let the floaty particles attract all those conversions!


Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks


Particle.js background
#2

YAASSS! I love this effect!


#3

Epic script. Even more epic name! Floaty Particles for the win!


#4

I just lost at least 10mins of my day playing with the interactive floaty particles… awesome!


#5

I love this effect. My only concern would be that it’s a distraction for the user in getting the conversion. It’s just too fun to play with!


#6

For some reason it make my page longer, I am able to scroll down and see white space ( hovewer I have blue bacground everythere)