How can I create parallax elements in Webflow using the script from the provided link on Matthew Wagerfield's website?

To create parallax elements in Webflow using Matthew Wagerfield’s Parallax.js, follow these steps:

1. Add Parallax.js to Webflow

• Download the script from Parallax.js (Wagerfield).
• Upload the script to a CDN or use this hosted version:
  ```html```
• Embed it in Webflow by going to Page Settings > Inside tag and pasting the script.

2. Set Up Parallax Wrapper

• Create a div element in Webflow and give it a class (e.g., parallax-container).
• Add child elements (images, text, or shapes) inside this div to be animated.

3. Assign the data-depth Attribute

• Each child element inside the parallax container should have a custom attribute set:
• Select the element in Webflow Designer.
• Go to Settings (gear icon) > Custom Attributes.
• Add an attribute named data-depth with values between 0.1 (slow) and 1.0 (fast).

4. Initialize the Parallax Effect

• Add an Embed Code block inside your Webflow page and paste this script:
  ```html```
• This targets the .parallax-container and applies the parallax effect.

5. Publish and Test

• Publish your Webflow site and move your cursor to see the effect.
• Adjust data-depth values for better animation control.

Summary

You can integrate Parallax.js into Webflow by (1) adding the script, (2) creating a wrapper div, (3) assigning data-depth attributes to child elements, and (4) initializing the effect with a small JavaScript snippet. Adjust data-depth values for different movement intensities.