How To: Responsive Parallax Footer

Parallax Footer

The parallax effect reveals sections as if they were viewed from different positions. For this article, I will be focusing on the parallax effect on different instances of footers:

1. Footers with fixed heights
2. Footers that change in height due to content
3. Footers that are taller than the device itself on certain breakpoints

You can check out this demo here and Github repo here.

1. Your footer has a fixed height on all devices

If you have a footer that remains the same height on all devices, it’s quite simple to implement a parallax scroll effect to reveal your footer. See this example.

• position: relative for all sections besides your footer. This is crucial, because z-index won’t be applied without a specified position.
• z-index hierarchy of main content > footer > placeholder.
• A placeholder section that matches the footer height. This section will scroll with the normal flow of the page. When the user gets to the footer, the content is revealed underneath because the invisible section is acting as a placeholder for the footer.
• position: fixed & bottom: 0 for the footer. With this, the footer is removed from the flow of the document and is positioned at the very bottom (in relation to the document). It gets revealed when the user scrolls to the placeholder section.

2. Your footer has some content that changes its height

If your footer has some content — say a title, some paragraphs, maybe a couple of links — it will change in height when the text is forced to wrap around and continue onto the next line. There is a simple fix to make the parallax effect responsive. See this example.

The fix is: change the height using Javascript. CSS will remain the same as above.

3. Your footer is taller than the device height on some devices? 😳

The problem with this current implementation, is that if the footer is taller than the device height, the top of the footer will get cut off. See this example.

I came up with a work around. Here’s how it works:

1. .placeholder height should always match the footer height. Initialized on load, gets updated on resize.
2. Once the user scrolls to the footer, then the footer top is set to match .parallax-placeholder y/top position in relation to the viewport. The footer will then scroll with the page.

The scroll event should only get added when the footer height is greater than the window height. This is checked on load, and added on resize. If it is shorter than the window height, apply regular ol’ parallax logic (see #1 & #2 above).

Resources:

https://www.html5rocks.com/en/tutorials/speed/animations/