How to Make the Most of Thrive Architect's Parallax Feature

How to Make the Most of Thrive Architect’s Parallax Feature?

Facebook
Twitter
LinkedIn

Table of Contents

Introduction

In the realm of web design, captivating your audience is of paramount importance. You want your website to stand out, engage visitors, and leave a lasting impression. One powerful tool at your disposal for achieving this is the “Parallax” feature in Thrive Architect. In this comprehensive tutorial, we will delve into the intricacies of this feature, exploring how to use it effectively and enhance your website’s visual appeal.

Understanding the “Parallax” Feature

The “Parallax” feature is a game-changer when it comes to web design. It allows you to infuse your web pages with dynamic and engaging effects, creating a unique user experience. This feature is particularly handy when you want to add a touch of sophistication and interactivity to your website. With “Parallax,” you can apply advanced parallax/scroll animations to various elements on your page, ensuring that your content not only informs but also captivates.

Selecting the Right Element

To embark on your journey of creating stunning parallax effects, you first need to choose the element you want to enhance. Thrive Architect offers a plethora of elements to pick from, making it a versatile tool for web designers. Whether you want to accentuate an image, a text block, or any other element, the process remains the same.

Adding a New Element

If you’re starting from scratch and need to add a new element to your page, follow these steps:

  1. Click on the plus sign in the right sidebar to access the list of elements.
    Parallax Element Clicking the Plus Symbol
  2. Find the element you wish to use the “Parallax” feature on.
    Parallax Element Finding the Image Element
  3. Drag and drop the element to your desired location on the page.
    Parallax Element Drag and drop the image Element

If you’ve already added the element you want to enhance, simply click on it to select it.

Unveiling the “Scroll Behavior” Option

With your chosen element in place, it’s time to unveil the all-important “Scroll Behavior” option. This is where the magic of the “Parallax” feature begins.

  1. Click on the selected element, and you’ll see its options appear in the left sidebar.
    Parallax Element General Options
  2. Look for the “Scroll Behavior” option and click on it to access its settings.

Applying the Parallax Effect

Now that you’ve accessed the “Scroll Behavior” option, you’re ready to add and set up the “Parallax” effect.

Scroll Behavior

Within the “Scroll Behavior” option, click on the blue “Add New Effect” button.
Parallax Element Scroll Behavior

Add New Effect

A pop-up section will appear, allowing you to configure your chosen effect.
Parallax Element Adding a New Effect

Choosing Your Parallax Effect

Thrive Architect offers a variety of parallax effects to choose from, each with its unique appeal:

  1. Vertical Scroll: This effect makes your element appear from a vertical position as users scroll up or down the page.
    Parallax Element Vertical Scroll Effect
  2. Horizontal Scroll: Elements using this effect emerge from a horizontal position as users scroll.
    Parallax Element Horizontal Scroll Effect
  3. Transparency: The transparency effect gradually reveals your element as users scroll, adding an element of intrigue.
    Parallax Element Transparency Effect
  4. Blur: Elements utilizing this effect start blurred and gradually become clearer as users scroll.
  5. Rotate: The “Rotate” effect adds a dynamic twist to your element as it rotates on the scroll.
  6. Scale: With the “Scale” effect, your element can grow or shrink in size as users scroll.

Configuring Your Effect

Once you’ve chosen an effect, you can fine-tune its behavior:

Type

The “Type” option allows you to define precisely how the effect should be showcased:

  • Vertical Scroll: Choose between “Up” or “Down” to control the direction of the element’s appearance.
  • Horizontal Scroll: Select “Left” or “Right” to determine the horizontal emergence of your element.
  • Transparency: Opt for “Fade In” or “Fade Out” to control the element’s transparency transition.
  • Blur: Decide between “Fade In” or “Fade Out” to govern the element’s blur transformation.
  • Rotate: Pick “Left” or “Right” to dictate the direction of rotation.
  • Scale: Choose “Scale Up” or “Scale Down” to control the element’s scaling.

Speed/Level

Depending on the effect you’ve chosen, you can adjust its speed or intensity:

  • For “Vertical Scroll,” “Horizontal Scroll,” “Rotate,” and “Scale,” adjust the effect’s speed to control how quickly it appears.
  • For “Transparency” and “Blur,” modify the effect’s level to determine its intensity.

Viewport Start & Viewport End

Fine-tuning your effect further involves specifying when it begins and ends within the user’s viewport:

  • “Viewport Start” defines when the effect commences relative to the element’s position in the viewport.
  • “Viewport End” marks when the effect concludes as the element exits the viewport.

Preview and Application

As you configure your parallax effect, you can preview it in real-time using the “Parallax preview mode.” This feature allows you to see how the effect will appear on your element as you make adjustments.

To apply your configured effect, simply click the “Apply” button within the pop-up. Your element will now showcase the chosen parallax effect, enriching your website’s visual appeal.

Editing and Deleting Effects

Should you wish to modify or remove an effect, Thrive Architect offers straightforward options:

Editing the Effect

  1. Click the “Edit” option (pencil icon) next to the effect you want to modify.
  2. The familiar pop-up will appear, enabling you to make adjustments.
  3. Once satisfied, click “Apply” to save your changes.

Deleting the Effect

If you decide to remove an effect:

  1. Click the “Remove” option (trash icon) next to the effect.
  2. Confirm your choice in the pop-up window.

Customizing Parallax Sections: A Simple Guide for Thrive Architect Users

Let’s learn about parallax sections and how they can make your website look cool. Parallax sections make your website more interesting by making different parts move at different speeds when someone scrolls.

Step 1: Add a Parallax Section

Open Thrive Architect for the page you chose.
Pick the section where you want the parallax effect.
Press the “+” icon, and choose “Background Section.”
Select “Parallax” as the background type.

Step 2: Set Parallax Settings

Click on the Scroll Behavior section, and choose “Parallax”.

Then, select the “Add New Effect” tab.

Type

Pick “Classic,” “Simple,” or “Mouse Move.”

Speed

Choose how fast the parallax effect goes.

Direction

Decide which way the parallax moves.

Step 3: Add Content

Inside the parallax section, put in your text, images, buttons, etc.
Arrange them in layers to make the parallax effect better.

Step 4: Style it Up

Make your parallax section look good by changing colors, fonts, and spacing.
Try different styles until you like how it looks.

Step 5: Mobile-Friendly

Click on the mobile icon in Thrive Architect to see and adjust the parallax section for phones.
Make changes to make sure it looks good on all screen sizes.

Step 6: See and Save

Click the eye icon to see your whole page.
Check if the parallax section works well when you scroll.
Save your changes to make the parallax effect show up on your website.

Conclusion

Incorporating the “Parallax” feature into your web design arsenal can elevate your website to new heights. With its dynamic and engaging effects, you can capture your audience’s attention and create a memorable online experience. From choosing the right element to configuring your preferred parallax effect, Thrive Architect empowers you to craft visually stunning web pages that leave a lasting impression.

Enhance your website today with the “Parallax” feature and unlock the potential for captivating, immersive user experiences.

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer