100% Viewport Height Groups With Parallax Background-Image (using Toolit, Toolkit, Classify plugins & Jarallax)

Thanks to @AliFarahat for the excellent Toolit plugin, first off!

This tool allows us to quickly and easily create 100% viewport height groups.

I’m looking to achieve something similar to this site:
https://www.seymourpowell.com/

It has multiple hero groups stacked vertically, each one with a nice parallax-like effect.

I’d like to use a simple js library like Simple Parallax to get a similar effect using bubble.

Simple Parallax can find all img elements and apply the effect to each of them with no problem:
var images = document.querySelectorAll(‘img’);
new simpleParallax(images);

Problems:

  1. I’m having problems getting images to stretch with the herosizing group.

  2. I’m not sure how to get the Simple Parallax tool to work with background-image for the group.

If I could figure out a solution to one of the problems mentioned above, I think it’d work.

Hoping somebody may be able to point me in the right direction. Thanks!

Some progress to report for anybody looking to achieve:

100% viewport height groups with parallax background-image

I’ve got a working example (for desktop users at least) here:
https://d15.bubble.is/site/experimentalappspace/version-test/parallax-hero

I’m using three plugins here: Classify, Toolit, CSSTools

Here’s what I’ve done to get it working to this point:
Created four groups - each having the herosizing element inside them (from the toolit plugin)

Each group has background style set to image, center the image, make image as wide as parent element, crop the image to fit the element size

Using the classify plugin assign the ID Attribute for each group as: {class: [“hero”]}

Drop a CSSTools element somewhere on the page

Workflow:
Page is loaded: Add Custom Style to Head CSSTools:
.hero{
background-attachment: fixed;
}

The editor is here:

On desktop it is great. Can somebody point me in the right direction for getting this to work well on mobile devices? It renders fine on all sizes of desktop browser windows but on mobile it looks, uh, terrible- and no parallax.

Thanks in advance for any help you may be able to lend!

4 Likes

Not to beat a dead horse but I wanted to share a third post in this lonely thread, one man’s journey to achieve parallax scrolling with 100% viewport height divs - I’ve got an updated example that works on desktop & mobile:

https://d15.bubble.is/site/experimentalappspace/version-test/jarallax

(You may have to refresh the page if it the parallax doesn’t load on the first try. I’ve noticed a bug where on first page load the js library doesn’t reliably fire off. Anybody with suggestions on how to fix that problem?)

Editor:

Using Bubble Plugins:
Toolkit
Toolit
Classify
(No CSSTools required for this solution)

Along with the Jarallax parallax library:
https://free.nkdev.info/jarallax/

Put this in the Page HTML Header:

Add a workflow that runs when condition is true: When Page Loaded (entire) = Y:
Run Javascript:
jarallax(document.querySelectorAll(’.jarallax’), {
speed: 0
});

The jarallax library works on mobile whereas my previous css approach failed as mobile devices don’t like background-attachment: fixed

I’m certain there are easier ways to achieve this – maybe somebody will make a killer plugin that does this out of the box -

Hoping it helps somebody down the line in the meantime. Also, if somebody can improve on this approach I hope you’ll share your solution.

9 Likes

That’s great @jason1!

Doesn’t load on first try? As a bandaid, until you fix yer bug, you could always fire a reload automatically if you’re saying that reloading a page fixes it… It ain’t pretty, but until you fix your bug it might create a better user experience, amirite?

Sincerely,

Ashley

This looks great. I’ve done this before…also had a background video playing for some different types of view ( not only photos ) which was pretty nice looking effect.

However, my problem was that I had content on top of the photos ( so part of the group ) and when the screen height was small ( think iphone turned sideways ) everything got messed up as the text elements etc. would get cutoff…

Have you found a way to dynamically change the content within the groups so that when the page height changes drastically the content stays proportional and visible?