TrueParallax is a 3D parallax technology built into Oxygen. It lets you create gorgeous mobile-responsive parallax sections on your Weebly website.
Weebly does offer "parallax" background images as part of their Weebly sections element, but its very different from what we offer. Weebly's parallax offering is just a fixed background image. Our TrueParallax actually moves the image as the user scrolls down, simply at a slower rate, creating a 3D illusion of depth. Furthermore, our TrueParallax works on mobile, whereas Weebly's solution does not.
TrueParallax works on any device, mobile or desktop, whereas Weebly's parallax solution only works on desktop devices and won't scroll on mobile.
Weebly's parallax isn't "true" parallax, as it doesn't simulate 3D depth. TrueParallax creates an illusion of depth via rate changes.
TrueParallax leverages integrated native dependency-free code, yielding faster website speeds & loading for better SEO performance.
Let's go through the procedure of adding TrueParallax sections to your Weebly website.
The first step is to actually add the TrueParallax sections onto the page you're building. You can do this in two different ways, as outlined below:
Note: After adding TrueParallax, we recommend a quick browser refresh prior to editing it.
By now, you should've created a page with your desired amount of parallax sections.
If you added TrueParallax by setting the header type to Parallax (option 2) instead of using the page builder (option 1): the number of parallax sections in a page is proportional to the number of white non-parallax sections. For example, if you chose "parallax-3" as your header type, you'll have three parallax sections and three white content sections in an alternating pattern.
To add an image, click the "Toggle Background Editability" button that is below the parallax section you wish to edit. Clicking this button will "unlock" the section, making it possible to click on it and upload your own custom image.
After you click the button to "unlock" the parallax section, click on the section itself. You should see a pop-up appear, letting you upload your own custom image.
Upload your desired image. After it's done uploading, click the button again to "relock" the section. You'll notice the image you uploaded will shift into its correct position.
After you "relock" the section, you'll be able to drag and drop Weebly elements on top of the section. For instance, you can add text and forms on top of the parallax section.
When adding background images to your parallax sections, please ensure that your background images are large enough to cover the entire screen. Therefore, we recommend uploading high quality images that have a resolution of at least 1920 x 1080. Any smaller and the images may not stretch to fill the section, leaving white space.
To remove a background image, click on the "toggle" button again and hover over the bottom of the image. You'll need to scroll until the section is right in the middle of the screen. Hover over the image until you see a small popup appear with a trash icon. Click on it to delete the image. If nothing pops up, it means you have to toggle the background editability again.
Simply drag 'n drop elements from the sidebar into the parallax sections to drop them in place. The more items you drop, the bigger the parallax sections get. They will automatically adjust their height to accommodate your content. If you need more padding between the edges of the parallax section and your content, use the "spacer" Weebly element.
You may notice that your parallax pages have white content spaces in between parallax sections. What if you don't want a white content space? Or if you want only parallax images? The solution is very simple. If you don't add any content to the white sections in between the parallax image sections, they will disappear on the live version of your website.