Create a Stroke Parallax Overlap Effect with Elementor

Creating a Stroke Parallax Overlap Effect in Elementor can add a dynamic layer to your website’s design. This tutorial will guide you through the steps to achieve this effect.

Prerequisites

Please make sure you have the following installed and activated:

• Elementor (Pro)

Setting Up the Container

1. Open your Elementor page and add a container widget.
2. Go to the Layout settings of the container.
3. Set the Height option to vh100 to make the container take up the full viewport height.

Adding and Styling the Heading

1. Drag a Heading widget from the Elementor sidebar into the container you just created.
2. Click on the heading to open its settings.
3. Change the text to “Summertime” in the Content tab.
4. Navigate to the Style tab.
5. Adjust the Typography settings to set the font size and weight according to your preference.
6. Under Advanced > Position select “Absolute” and place it to your liking.

Applying Motion Effects

1. Navigate to the Advanced tab of the heading widget.
2. Scroll down and click on Motion Effects.
3. Enable Scrolling Effects by toggling the switch.
4. Choose Horizontal Scroll from the dropdown menu.
5. Set the direction to “Right”.
6. Adjust the speed and range using the sliders to get the desired scrolling effect.

Creating the Stroke Effect

1. Right-click on the original heading widget and choose Duplicate.
2. Click on the duplicated heading to open its settings.
3. Rename this new heading to “Outline Heading” for easier identification.
4. Navigate to the Advanced tab.
5. Scroll down to CSS Classes and add the class name “outline-heading”.
6. Scroll down to Custom CSS and insert the following code:

   .outline-heading {
     -webkit-text-stroke: 2px #fff;
   }
   

Note: Make sure to style your two headings differently so that it has a transition effect.

Layering Elements

1. Drag an Image widget into the section, placing it below the heading.
2. Set under Advanced > Positioning the Z-index like the following:
   • Original Heading
     Z-index: 1
   • Image
     Z-index: 2
   • Outline Heading
     Z-index: 3

Stroke Parallax Overlap Effect for Elementor – Conclusion

By following these detailed steps, you’ll successfully create a Stroke Parallax Overlap Effect in Elementor. This effect will add a visually engaging and dynamic layer to your website.