In this tutorial and Let's Build we look at how to build Thrive Themes' 2020 Year in Review page. This page features movement on scrolling, fade ins, and really a great example of what's possible in Thrive Architect using absolutely nothing but the tool itself. In order to maximize our time (and it still ran long) I focused on only a few aspects of the page as well as the desktop version. 

Parallax Scroll Behavior

Parallax is what gives the elements on the page that "move as you scroll up and down" effect. In Thrive Architect, this is very easy to accomplish on images. Simply select the image, find Scroll Behavior, then select parallax. Most of the parallax in this video uses the horizontal and vertical scrolling option. Simply adjust the speed and when they stop moving (viewport) and you'll be able to trial and error until you get it just right.

Relevant and Absolute Positioning

To place the images exactly where we need them to be, we need to use absolute positioning and sometimes relevant positioning. You can find these under 'Advanced' in the Layout and Position section of the element options.

Absolute positioning's worst enemy is different screen sizes and devices because it is just that: absolutely positioning. You'll want to be sure to adjust these settings for the mobile options to ensure they look right.

Parallax and Scroll Effects on Mobile

The mobile version of this tutorial simply reduces the amount of parallax and replaces most of it with "fade in" effects. Although much simpler, it maintains a very neat effect when the images are overlayed at different vertical heights.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Join Convology Pro

Get access to all Convology Courses, Workshops, and exclusive community with our all-access-pass called Convology Pro.