css
.sa { opacity: 0;
.scrollup1 {
transform: translate(0,100px);
.scrollup { transform: translate(0, 100px); border: solid black;}
.scrollup2 { transform: translate(0,100px);
border: solid black;}
.scrolldown { transform: translate(0, -100px); border: solid black; }
.scrolldown1 { transform: translate(0, -50px); border: solid black;}
.scrollright { transform: translate(-100px, 0); border: solid black;}
.scrollleft { transform: translate(100px, 0); border: solid black; }
.scrollrotateL { transform: rotate(180deg); border: solid black;}
.scrollrotateR { transform: rotate(-180deg); border: solid black;}
.scrollscaleDown { transform: scale(2); border: solid black;}
.sa.show { opacity: 1; transform: none; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="aa.css" />
<title>bar</title>
<body>
<main>
<section>
<div class="sa scrollup1" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrolldown1" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrollup2" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
</section>
<section>
<div class="sa scrollup" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrolldown" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrollright" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
</section>
<section>
<div class="sa scrollrotateL" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrollrotateR" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
<div class="sa scrollscaleDown" onmouseenter="zoomIn(event)"
onmouseleave="zoomOut(event)"></div>
</section>
</main>
<script>
function zoomIn(event) {
event.target.style.transform = "scale(1.2)";
event.target.style.transition = "all 0.5s";
}
function zoomOut(event) {
event.target.style.transform = "scale(1)";
event.target.style.transition = "all 0.5s";
}
</script>
<script>
const scrollMargin = 300;
const scrollEl = document.querySelectorAll('.sa');
const Scroll = function() {
for (const element of scrollEl) {
if (!element.classList.contains('show')) {
if (window.innerHeight > element.getBoundingClientRect().top + scrollMargin) {
element.classList.add('show');
}
}
}
}
window.addEventListener('load', Scroll);
window.addEventListener('scroll', Scroll);
</script>
</body>
</html>
스크롤 올리면 박스들 사라지고 내리면 다시 애니메이션 효과 나타나게 하고 싶은데
어케 해야할까
