[CSS] 스크롤 시 내용이 떠오르는 css 효과
Summary 1. js 코드 function handleScroll() { const elements = document.querySelectorAll('.on-screen'); elements.forEach(element => { if ( element.getBoundingClientRect().y > window.innerHeight ) { // 각 요소의 위치와 스크린 높이 비교 // css 스타일에 변화 적용 element.style.opacity = "0"; element.style.transform = 'translateY(70px)'; } else { element.style.opacity = "1"; element.style.transform = 'translateY(0px)'; } })..
2021.09.17