scroll visible text

Store Design
, , ,
1

How can I add this scroll animation? If you scroll down, you can see more visible text. If you scroll up, you can see less text.

Screenshot (23).png
Screenshot (23).png2560×1080 216 KB

2

Hello @Joel1234

Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?

3

Hey** @Joel1234 **,

You can achieve this scroll-reveal text effect using CSS and JavaScript. The idea is to gradually reveal the text as the user scrolls down and hide it as they scroll up.

Here’s how we can have the basic implementation:

1. HTML

<div class="scroll-text">
  <p>sofi measures the impact of plants to improve the way we <span class="fade-text">feel & sleep</span></p>
</div>

2. CSS (For Styling & Masking)

.scroll-text {
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  position: relative;
  overflow: hidden;
  height: 100vh; /* Full-screen effect */
  display: flex;
  align-items: center;
  justify-content: center;
}

.fade-text {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

3. JavaScript (To Handle Scrolling)

document.addEventListener("scroll", function () {
  const text = document.querySelector(".fade-text");
  const scrollY = window.scrollY;
  const revealPoint = 100; // Adjust this based on when you want it to show

  if (scrollY > revealPoint) {
    text.style.opacity = 1;
  } else {
    text.style.opacity = 0;
  }
});

This will make the text fade in as you scroll down and disappear as you scroll up. If you want a more advanced version like the one on sofiahealth.com, it will require more complex animations and intersection observers.

Let us know if you need custom work, and we’d be happy to help!

Cheers!
Shubham | Untechnickle