Creating a smooth and engaging user experience on the web often involves combining JavaScript and CSS transitions. In this post, we will explore how to use the setTimeout function in JavaScript to gradually reveal elements on a webpage with CSS transitions.
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!
Top comments (0)