dev-resources.site

for different kinds of informations.

Create Stunning Gradual Div Reveals with JavaScript setTimeout and CSS Transitions

Published at

1/14/2025

Overview

The goal of this example is to create a series of div elements that fade in one after the other. We will leverage the setTimeout function to control the timing of each element's appearance, while CSS transitions will handle the visual effects.

HTML Structure

We will start by defining our HTML structure. Here’s a simple layout with several divs containing images and links:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Gradual Div Reveal</title>
    <link rel="stylesheet" href="src/style.css" />
  </head>
  <body>
    <div class="toggle-div">
      <img src="https://aws.amazon.com/startups/upload/e4d8d468-90d1-704f-a34e-7e195ce4025a/ceac2e85-dca6-4da4-bbf7-359df7db739d.png" />
      <a href="">perplexity.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://aimode.co/wp-content/uploads/2024/07/meta-ai-logo.webp" />
      <a href="">meta.ai</a>
    </div>
    <div class="toggle-div">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Microsoft_365_Copilot_Icon.svg/2048px-Microsoft_365_Copilot_Icon.svg.png" />
      <a href="">copilot.microsoft.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://www.deepseek.com/favicon.ico" />
      <a href="">chat.deepseek.com</a>
    </div>
    <div class="toggle-div">
      <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-gemini-icon.png" />
      <a href="">gemini.google.com</a>
    </div>
    <script src="src/script.js"></script>
  </body>
</html>

CSS for Transitions

Next, we will define the CSS styles that will control the appearance and transition effects of our divs:

.toggle-div {
  opacity: 0; /* Start hidden */
  transition: opacity 1s ease; /* Transition effect */
  height: 50px; /* Set a height for visibility */
  background-color: lightblue; /* Background color for visibility */
  margin: 10px 0; /* Spacing between divs */
  padding: 12px 80px;
  display: flex;
  align-items: center;
}

.toggle-div img {
  height: 100%;
  margin-right: 8px;
}

.toggle-div a {
  font-size: 20px;
}

Explanation of CSS

Opacity: Initially set to 0, making the divs invisible.
Transition: The opacity property will transition over 1 second with an ease effect.
Styling: Basic styling is applied to ensure visibility and layout.

JavaScript for Gradual Reveal

Finally, we will implement the JavaScript logic to control when each div becomes visible:

// JavaScript to reveal divs
const divs = document.querySelectorAll('.toggle-div');

divs.forEach((div, index) => {
  setTimeout(() => {
    div.style.opacity = 1; // Change opacity to make it visible
  }, index * 500); // Delay each div by half a second multiplied by its index
});

Explanation of JavaScript

Query Selector: We select all elements with the class .toggle-div.
forEach Loop: We iterate over each selected div.
setTimeout: For each div, we set a timeout that changes its opacity to 1, making it visible. The delay increases with each iteration, creating a staggered reveal effect.

Here is the final product:

Check it out: https://playcode.io/2219619

Conclusion

By combining JavaScript's setTimeout function with CSS transitions, we can create visually appealing effects that enhance user interaction. This approach is not only simple but also effective in providing a polished feel to web applications.
Feel free to experiment with different timings and styles to see how they affect the overall user experience!

css Article's

30 articles in total