[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)';
    }
  })
}

 

2. css

.on-screen {
  transition: transform 0.7s, opacity 1s;
}

 

 

Result

 

See the Pen by wkddkdud (@angpeng) on CodePen.

 

 

 

 

 

코드 해석

- javascript

1. html 코드에서 애니메이션 적용을 원하는 태그에 class명('on-screen')을 설정한다.

 

2. querySelectorAll를 이용해 on-screen 클래스가 지정된 모든 요소를 찾아 elements에 저장한다.

const elements = document.querySelectorAll('.on-screen');

 

3. forEach 배열 API를 통해 elements을 돌아가며 각 요소의 현재 위치(y축)와 현재 윈도우의 innerHeight를 받아온다.

const top = element.getBoundingClientRect().y;

const innerHeight = window.innerHeight;

 

4. 스크린에서 scroll 이벤트가 발생할 때 마다 변수 top(요소 위치)과 innerHeight(화면 높이)를 비교한다.

- 각 엘리먼트가 화면보다 아래에 존재할 경우 요소의 스타일을 ' 투명도 - 0,  translateY - 70px '로 설정하고

- 엘리먼트가 화면 위로 올라오게 되는 순간 ' 투명도 - 1,  translateY - 0px ' 으로 변경해주면 자연스러운 애니메이션 적용이 가능하다.

 

- 2개의 함수로 구현한 js 코드

function isElementUnderBottom(element) {
    const top = element.getBoundingClientRect().y;
    const innerHeight = window.innerHeight;
    return top > innerHeight ? true : false;	// top(요소 위치)가 innerHeight보다 클경우 true 반환 (= 화면 크기보다 하단에 존재)
}

function handleScroll() {
  const elements = document.querySelectorAll('.on-screen');
  elements.forEach( element => {
    if (isElementUnderBottom(element)) { 	// 요소가 화면 아래에 존재하는 것이 참일 경우 적용할 스타일
      element.style.opacity = "0";
      element.style.transform = 'translateY(70px)';
    } else {
      element.style.opacity = "1";
      element.style.transform = 'translateY(0px)';
    }
  })
}

 

- isElementUnderBottom 함수를 한줄로 담아 코드 길이를 줄인 js 코드

function handleScroll() {
  const elements = document.querySelectorAll('.on-screen');
  elements.forEach(element => {
    if ( element.getBoundingClientRect().y > window.innerHeight ) { // isElementUnderBottom 함수 한줄로
      element.style.transform = 'translateY(70px)';
    } 
    else {
      element.style.opacity = "1";
      element.style.transform = 'translateY(0px)';
    }
  })
}

 

- css

css의 경우 transition을 통해적용해줄 스타일(투명도와 축 위치)의 속도를 설정해주면 된다.

.on-screen {
  transition: transform 0.7s, opacity 1s;
}

 

 

 

이렇게 간단한 css와 javascript 코드 추가를 통해 조금 더 디자인적으로 향상된 웹사이트 구현이 가능하다.

 

 

참 고

https://blueshw.github.io/2019/10/13/show-items-on-scroll/

 

 

Posted by Ang