<div class="container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint distinctio
rerum blanditiis.</p>
<img src="https://ljc-dev.github.io/hosted-assets/thumb-a.png" alt="avatar a">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, beatae eius iste minima veritatis tempora
molestiae harum. Perspiciatis praesentium odit magnam recusandae earum. Similique, magnam ratione. Sint distinctio
rerum blanditiis.</p>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
}
.container {
display: flex;
flex-flow: column;
align-items: center;
}
img {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
opacity: 0;
transform: translateY(100px);
transition: transform 1s, opacity 1s;
}
.fadeIn {
opacity: 1;
transform: translateY(0px);
}
p {
font-size: 2rem;
margin: 2rem 0;
width: 300px;
}
const img = document.querySelector("img")
const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("fadeIn")
}
})
}
const options = {}
const myObserver = new IntersectionObserver(callback, options)
myObserver.observe(img)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.