How to display elements inside a div one after another?
Solution 1:
You don't need jQuery for that you can use javascript vanilla Intersection Observer API to keep track of your spans intersection ratio
basically, you need to follow these steps :
- add an opacity transition to the span element with the desired delay
- add base
opacity:0to the span element - create an
Intersection Observer - change the current
entry.target.style.opacity(current span) to '1' based onentry.intersectionRatio
demo :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
/* for demo purposes only */
margin: 30em 0;
}
body span {
/* for demo purposes only */
display: flex;
flex-direction: row;
opacity: 0;
font-size: 1.5em;
padding: 3.33em 0;
transition: opacity 1200ms linear;
}
</style>
<title>Intersection Observer API</title>
</head>
<body>
<section id="content-wrapper">
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
<span>span item</span>
</section>
<script>
let observer = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.intersectionRatio) {
entry.target.style.opacity = '1'
observer.unobserve(entry.target)
}
})
},
{ rootMargin: '0px 0px 100px 0px' },
)
document.querySelectorAll('span').forEach((span) => {
observer.observe(span)
})
</script>
</body>
</html>complete info on Intersection Observer API : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API