Scrolling zoom effect for text

343 Views Asked by Adrian Barbur At 04 December 2023 at 19:51

I recently came across an impressive visual effect on a website and was wondering how I could implement it in my own web application. The effect is as follows: as you scroll down the page, the text gradually zooms in until it reaches a certain maximum size, at which point another element appears.

I've tried searching on Google using various keywords such as "scroll zoom effect," "text zoom on scroll," "reveal element on scroll," etc., but I haven't found a clear guide or example of implementation.

I would greatly appreciate it if someone could guide me or share information on how I could achieve this effect using HTML, CSS, and JavaScript. Whether it's using an existing library or writing the code from scratch, any advice or links to relevant resources would be welcomed.

To help you better understand what I'm looking for, I found a video that demonstrates exactly the effect I want:

Thank you in advance for any help and guidance!

Original Q&A

There are 2 best solutions below

Juan Manuel Garcia Montealegre On 04 December 2023 at 20:09

Hi Adrian.

Here is a basic implementation example.

I leave you different guides to do more complex things.

1: https://matcha.fyi/zoom-scroll-tutorial/ 2: https://nicepage.com/feature/zoom-animation-effect-488591#:~:text=The%20Zoom%20Effect%20is%20the,Responsive%20Animation%20Effects%20Theme%20Settings

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#container {
  height: 200vh;
}

#zoom-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  transition: font-size 0.25s ease-out;
}

.content {
  height: 100vh;
}

</style>
</head>
<body>

<div id="container">
  <h1 id="zoom-text">Adrián Barbur</h1>
  <!-- Add more content to make the page scrollable -->
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <!-- ... -->
  <div class="content"></div>
</div>

<script>
document.addEventListener('scroll', function() {
  var scrollPosition = window.pageYOffset;
  var zoomLevel = Math.min(2, 1 + scrollPosition / 500);

  var zoomText = document.getElementById('zoom-text');
  zoomText.style.transform = 'translate(-50%, -50%) scale(' + zoomLevel + ')';
});

</script>

PassThru On 04 December 2023 at 21:00

It looks like a series of several css animations.

Here's how one animation works; let's just call it "elastic text", something to get you started with and you can then build on this using the same animation technique by changing the alternating CSS property as required.

<!DOCTYPE html>
<head>

<style type="text/css">

.Container {
 position: absolute;
 left: 50px; 
 top: 50px;
 width: 300px;
 height: 100px;
 overflow: hidden;
 border: 1px solid black;
 text-align: center;
 padding: 10px;
}

.Message {
 color: #000000;
 font: normal 400 20px "Arial";
 animation: AnimText 1.0s linear 0s infinite alternate none;
}

@keyframes AnimText {
  0% {font-size: 10px;}
 25% {font-size: 15px;}
 50% {font-size: 25px;}
 75% {font-size: 50px;}
100% {font-size: 75px;}
}

</style>
</head>

<body>
       
<div class="Container">

 <div class="Message">Adrian</div>

</div>
    
</body>
</html>

Scrolling zoom effect for text

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in SCROLL

Related Questions in GSAP

Related Questions in SCROLLTRIGGER

Trending Questions

Popular # Hahtags

Popular Questions