Question 298350 in Html Question posted in
Some basic documentation can be found here.

Html – Scrolling zoom effect for text

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!

Tags:

2

Answers


  1. 0

    enter image description here

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search