блок в зоне видимости
Цитата:
Сообщение от drkrol
дык при чём тут ленивая загрузка? Я хочу из opacity 0 делать opacity 1
|
:-?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.box {
width: 150px;
height: 150px;
margin: 50px;
background: white;
float:left;
opacity: 0;
transition: 1s;
}
.box.alt{
background-color: #228B22;
opacity: 1;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', ready);
function ready()
{
const options = {
rootMargin: '1px',
threshold: 1.0,
};
const observer = new IntersectionObserver(lazyLoad, options);
const boxs = document.querySelectorAll('.box');
boxs.forEach(pic => {
observer.observe(pic);
});
function lazyLoad(elements) {
elements.forEach(item => {
if (item.intersectionRatio > 0) {
observer.unobserve(item.target);
targetInSight(item.target);
}
});
}
function targetInSight(target)
{
target.classList.add('alt')
}
}
</script>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
|