✨ Create a Synthwave Parallax Scrolling Effect with Trig.js 🌄

In this post, I’ll show you how to create a synthwave-inspired parallax effect with a mountain scape using Trig.js—a lightweight JavaScript library I created for scroll animations. Let’s dive into the process!

You can check out the live demo of this effect here on CodePen:

View the Demo

🚀 What You’ll Learn:

• How to create a parallax scroll effect with Trig.js.
• A breakdown of how to manipulate background layers to create a dynamic, interactive scene.
• How to use CSS variables and Trig.js to trigger effects based on scroll position.

🔍 The Code Breakdown:

Let’s go through the core parts of the code to see how everything works. I'll cover the most important sections as you can checkout the codepen source for the full code.

🌟 The HTML Structure

The structure is simple: we have a container that holds a parallax section (.pinContainer) where the main animation takes place. Inside it, there's an h1 tag for the title, which will also be affected by the scroll.

<div class="container">
  <div class="pinContainer" data-trig data-trig-var="true" data-trig-pixels="true" data-trig-min="-200" data-trig-max="100">
    <h1 id="title">TRIG.JS</h1>
  </div>
</div>

• data-trig: This attribute tells Trig.js to apply the scroll-based animation to the .pinContainer.
• data-trig-var="true": Enables variable updates based on scroll.
• data-trig-pixels="true": This tells Trig.js to work with pixel values rather then percentages.
• data-trig-min and data-trig-max: These define the minimum and maximum values for the scroll animation.

💻 The CSS Styling

The Parallax Layers:

We create the parallax effect by stacking multiple background images at different depths. These layers move at different speeds when you scroll, creating the illusion of 3D depth.

.pinContainer {
  background: url(https://idevgames.co.uk/codepen/background.jpg), #000000;
  background-size: 100% 200%;
  background-position: center calc((var(--trig-reverse) / 2) + 40%);
  transition: background-position ease-out 0.3s;
  background-repeat: repeat-y;
}

.pinContainer::before {
  background-image: url(https://idevgames.co.uk/codepen/mountainrange.png);
  background-position: center calc((var(--trig) / 5) + 20%);
  filter: blur(3px);
}

• background-position: center calc((var(--trig-reverse) / 2) + 40%): The background-position is dynamically updated with a CSS variable (--trig-reverse), which is linked to the scroll position. This ensures the background moves as you scroll, creating the parallax effect.
• filter: blur(3px): Adding a slight blur effect to the mountain layer creates a sense of distance.

The Title Animation:

The title (h1) also responds to the scroll, scaling the underlines width with a transition effect based on the scroll position.

#title:after {
  transform: scaleX(calc(var(--trig) - 13%));
}

• transform: scaleX(calc(var(--trig) - 13%)): The scaleX() function is used to scale the underline's width. As you scroll, Trig.js adjusts the --trig variable, and the title's underline width changes accordingly. This gives the title a dynamic, interactive feel.

📚 How Trig.js Powers It All

Trig.js works by updating CSS variables based on the user’s scroll position. It uses simple triggers to change values, which in turn modify the appearance of elements.

Here’s how the core interaction works:

• Scroll triggers the change: As you scroll, Trig.js changes the value of the --trig and --trig-reverse CSS variables.
• Backgrounds move at different speeds: By linking the scroll position to these variables, the backgrounds move at different rates due to calc math. The mountain range moves slowly (giving the illusion of being far away), while the foreground moves more quickly (as if closer to the viewer).
• Smoothing with transitions: We use CSS transitions to ensure the movement is smooth, enhancing the overall experience.

🌟 Why Use Trig.js for This?

Trig.js is super lightweight, and it makes it incredibly easy to create scroll-based animations. You don’t need to deal with complex JavaScript logic—just a few data attributes and CSS variables, and you're good to go! It’s perfect for effects like parallax scrolling, revealing animations, and other scroll-triggered transformations.

🔗 Check Out More Examples:

• CSS Car Scroll Animation Using Trig.js
• Tell a Story with Trig.js 3D CSS Scroll Animation
• Trig.js GitHub Repository

🎉 Get Started Today!

Feel free to explore more of Trig.js on the GitHub repository and try it out in your own projects! With Trig.js, you can create smooth, engaging scroll-based animations with minimal effort.

Let me know if you have any questions or ideas for other types of animations you’d like to see with Trig.js!