آموزش صفر تا صد IntersectionObserver

const observer = new IntersectionObserver((entries,observer)=>{
	entries.forEach((entry)=>{
		if (entry.isIntersecting){
			console.log("عنصر در دید کاربر قرار گرفت !")
		}else{
			console.log("عنصر از دید کاربر خارج شد !")
		}
	})
});
const target = document.querySelector(".target-element")
observer.observe(target)

const options = {
	root:null,
	rootMargin:"10px 20px 10px 20px",
	threshold: 0.5
}

const options = {
	root:null,
	rootMargin:"10px 20px 10px 20px",
	threshold: 0.5
}

const observer = new IntersectionObserver((entries,observer)=>{
	entries.forEach((entry)=>{
		if (entry.isIntersecting){
			console.log("عنصر در دید کاربر قرار گرفت !")
		}else{
			console.log("عنصر از دید کاربر خارج شد !")
		}
	})
},options);
const target = document.querySelector(".target-element")
observer.observe(target)

<div class="offset-y"></div>

<div class="card-container">
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
	<div class="card"></div>
</div>

.offset-y{
	height: 1200px;
}
.card-container{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 16px;
	text-align: center;
	perspective: 1000px;
}
.card{
	height: 340px;
	width: 100%;
	transition: 5s;
	transform-style: preserve-3d;
}
.card:nth-child(odd){
	background: rgb(226, 144, 50);
}
.card:nth-child(even){
	background: rgb(51, 187, 62);
}

const animations = (elementList)=>{
	elementList.forEach((element)=>{
		element.style.transform = "rotateY(360deg)";
	})
}

const cards = document.querySelectorAll('.card')
const cardContainer = document.querySelector(".card-container");
const options = {threshold:0.4}

const observer = new IntersectionObserver((entries,observer)=>{
	entries.forEach(item=>{
		if (item.isIntersecting){
			animations(cards);
		}
	})
},options)
observer.observe(cardContainer);