How To Make Reveal Text on Scroll Using Elementor Free

Quick Summary

(Exclusive: Click above link & use “JFD10” coupon code to get upto 78% DISCOUNT!)

In this tutorial, You’ll learn How to Create a FREE eCommerce / Online Shop Website with WordPress, Elementor and WooCommerce. This Masterclass is for Complete Beginners.

(Exclusive: Click above link & use “JFD10” coupon code to get upto 78% DISCOUNT!)

In this tutorial, I’ll show you how to create a fully professional and Amazing looking eCommerce website for completely FREE. We’ll be using only the best & free resources to create this online shop. We’ll use a FREE Theme, a FREE Page Builder & All FREE Plugins.

To create this Online Shop, we’ve taken all the features and inspiration from world’s top eCommerce websites like Amazon, AliExpress, Walmart, flipkart and so on.

Though we’ll be using all the FREE resources, it will have all the basics and necessary features like a fully professional eCommerce website.

You can sell any type of products – Physical products, Digital products, Products with different colors & sizes… You can name it.

We’ll cover all the advanced techniques: Like, People can add products into cart very easily, then their shipping cost & tax rate will be automatically calculated based on their location.

On checkout, people can pay using different payment methods like paypal,credit cards or your local payment gateways. So people don’t need to go to any third party website, they can pay directly on your website.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Reveal Text on Scroll Style CSS

<style>
.image-container {
  perspective: 1000px;
}

.scroll-image {
  will-change: transform;
  transition: transform 1s ease-in-out;
  transform-style: preserve-3d;
  z-index: 99;
}

.scroll-image.left {
  transform: translate3d(0px, 0px, 0px)
    scale3d(1, 1, 1)
    rotateZ(0deg)
    skew(0deg, 0deg);
}

.scroll-image.right {
  transform: translate3d(0px, 0px, 0px)
    scale3d(1, 1, 1)
    rotateZ(0deg)
    skew(0deg, 0deg);
}

.box-text{
    transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
.box-text {
    position: relative !important;
    }
}
</style>

Reveal Text on Scroll CSS Classes

image-container
scroll-image
left
right
box-text

Swap Button Style CSS

.icon-swap-button {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.icon {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.icon-1 {
  opacity: 1;
  transform: scale(1);
}

.icon-2 {
  opacity: 0;
  transform: scale(0);
  overflow: hidden;
}

.icon-swap-button:hover .icon-1 {
  opacity: 0;
  transform: scale(0);
  overflow: hidden;
}

.icon-swap-button:hover .icon-2 {
  opacity: 1;
  transform: scale(1);
}

Swap Button Style CSS Classes

icon-swap-button
icon
icon-1
icon-2

Reveal Text on Scroll JS Code

<script>
const leftImages = document.querySelectorAll(".scroll-image.left");
const rightImages = document.querySelectorAll(".scroll-image.right");

const maxSteps = 14;
const scrollRange = 1000; // Adjust based on your content height or preference

window.addEventListener("scroll", () => {
  if (window.innerWidth <= 767) return;

  const scrollTop = window.scrollY;
  const progress = Math.min(1, scrollTop / scrollRange); // Clamp between 0 and 1
  const currentStep = progress * maxSteps;

  leftImages.forEach((img, index) => {
    const x = -450 * progress;
    const y = (150 - index * 30) * progress;
    const r = -22 * progress;
    img.style.transform = `translate3d(${x}px, ${y}px, 0px)
      scale3d(1, 1, 1)
      rotateZ(${r}deg)
      skew(0deg, 0deg)`;
  });

  rightImages.forEach((img, index) => {
    const x = 450 * progress;
    const y = (150 - index * 30) * progress;
    const r = 22 * progress;
    img.style.transform = `translate3d(${x}px, ${y}px, 0px)
      scale3d(1, 1, 1)
      rotateZ(${r}deg)
      skew(0deg, 0deg)`;
  });
});
</script>

How To Make Reveal Text on Scroll Using Elementor Free

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel