여러분들 웹페이지 만들 때 고수처럼 보이고 싶으면 웹페이지에다가 애니메이션을 넣으시면 됩니다. 특히 스크롤시 동작하는 애니메이션

이런 것들 집어넣으면 개발 잘하는 것처럼 보일 수 있는데 자 근데 요거 구현이 좀 귀찮을 수 있습니다. 자

예전엔 어떻게 했냐면 자 html 요소의 높이 같은 거를 직접 측정하고요 스크롤 이벤트 리스너

써가지고 이제 계속 스크롤바 내릴 때마다 막 검사를 해야 됐습니다. 그리고 브라우저마다 막 오차 같은

것도 발생해서 좀 호환성도 그지 같고 그랬는데 저희 이거보다 조금 더 나은 방식도 있습니다. 인터섹션 옵저버라는 브라우저 기본

기능이 하나가 있는데 자 요거 쓰면 되게 쉽게 html 요소가 현재 화면에 보이는지 안 보이는지 이런 것들을 검사해 볼 수가 있어 가지고요

간단한 스크롤 애니메이션 같은 건 쉽게 만들어 낼 수 있습니다. 같이 한번 만들어 보도록 합시다. 자, 그렇기

때문에 html 파일 하나 만들어 가지고 여기서 이제 코드를 좀 짜 보도록 할 거고요. 자, 그 다음에 html 기본 템플릿 채워 넣구요. 그

다음에 이런 식으로 한번 디자인을 해 보도록 합시다. 자, 이렇게 세로로 긴 화면에다가 글씨 몇 개만 이렇게 채워 넣어

보도록 할게요. 일단 스타일 같은 거 이렇게 집어넣고요. 이런 식으로 세로로 길게 페이지를 하나 만들어 두면 될 것

같고요. 그 다음에 밑에다가 디브 박스를 한 4개 정도 이렇게 채워 넣어 보도록 합시다. 자, 그래서 저는 이런 식으로 코드를

잡았습니다. 자, 그래서 실제로 스크롤바를 내려보시면 이런 식으로 세로로 긴 사이트가 완성이 됐고요. 자,

근데 지금 스크롤바를 내려보면 좀 밋밋하죠 그죠 여기다가 애니메이션을 좀 줘 보도록 합시다 자요 글자가

등장하면 화면이 등장하면 투명도를 0에서 1로 이렇게 서서히 증가시키는 애니메이션 같은 걸 한번 줘 보도록

할게요 자 그러기 위해서 여기다가 스크립트 태그 열고요 자 그 다음에 아까 설명했던 인터섹션 옵저버라는 요 기능을 한번 갖다가 써

보도록 합시다 자 여기다가 뉴 인터섹션 옵저버라는 함수 같은 게 있는데 요거 갖다 쓰시면 되고요 그리고 소괄호 안에는

함수를 또 다른 함수를 하나 이렇게 집어넣게 되어 있는데 자 그래서 이렇게 채워 놓고 시작을 하시면 되고요 그 다음에 요거를 변수에

저장해서 한번 써 보도록 합시다 자 그 다음에 이런 식으로 변수에다가 저장을 해 놨다 자 그러면은 옵저버 점 observe라는 이런 함수를 갖다 쓸 수

있습니다 자요 함수가 어떤 역할을 해주냐면 자요 함수는요 내가 원하는 HTML 요소를 감시해 줄 수가 있습니다 자 뭐 특정 HTML 요소가

화면에 등장하는지 아니면 화면에서 사라지는지 이런 것들을 능동적으로 감시를 해준다고요 어떻게 쓰냐면 뭐

HTML 요소를 잡아서 여기다가 이렇게 집어넣으시면 되겠습니다 자 그러면 그 요소를 감시를 해줘야죠 그래서 예를 들어서 이제 div box

중에 하나를 한번 감시를 해 보도록 합시다요 첫 번째 div 박스를 한번 감시를 해보도록 했겠죠 감시하고

싶으면 자 일단 div 박스를 찾아가지고 그냥 여기다가 집어넣으시면 되는 거예요 자 일단 저 div 박스를 찾고

싶으면 document.querySelector 뭐 이런 거 같다 쓰면 되게 좋으죠 그 다음에 div라고 쓰면

이제 div 태그를 전부 다 찾아 줄 거예요 자 이거를 변수에다가 저장해서 이렇게 뭐 div 찾은 것 중에 0번째 그러니까

첫 번째 div 박스를 여기다가 코드를 짜면 이제요 첫 번째 div 박스를 감시를 해주기 시작을 합니다 두 번째 세 번째 네 번째 div 박스도 전부 다

감시를 하고 싶다 그러면 이런 식으로 코드를 짜면 되겠죠 자 그래서 아무튼 감시를 해줄 수 있는데 자 감시하면

뭐가 좋냐면 자 예를 들어서 이제 첫 번째 div 박스가 이런 식으로 화면에 이렇게 딱 등장을 했다 그러면요 안에 있는 코드를

실행해줍니다 뭐 둘째 셋째 넷째 div 박스도 마찬가지예요 아무튼 이 박스들이 화면에 이렇게 딱 등장한다 그러면요

안에 있는 코드를 실행해 준다고요 자 그럼 여기다가 그 div 박스 애니메이션을 추가해주세요라고 코드를 짜면 아까

만들려던 기능 완성 아니에요. 그래서 여기서 한번 코드를 지어 보도록 합시다. 자, 일단 여기다가 파라미터를 하나 추가할 수 있는데 자요.

파라미터를 출력해 보시면 현재 감시 중인 모든 딥 박스들이 이렇게 출력이 될 거예요. 어레이 자료 이런 것들에

담겨 가지고 이렇게 출력이 될 거예요. 자, 그래서 이제 그 모든 딥 박스에다가 이제 뭐 애니메이션을 추가하고 싶으면 여기다가

for each 같은 거 같았으면 붙이면 이제 왼쪽 어레이 자리에 있던 데이터들을 하나씩 꺼내 줄 수 있으니까요. 자

그래서 여기다가 이제 파라미터를 하나 추가해주면 자, 이제 감시 중인 박스가 하나씩 이렇게 출력이 될 거예요.

의심스러우면 한번 콘솔에 출력해 보시고요. 아무튼 자 이 박스에다가 애니메이션을 추가하고 싶으면 어떤

식으로 하는지 좀 알아보도록 합시다. 애니메이션은 되게 쉬운데, 자 그냥 CSS 트랜지션 갖다 쓰면 되는

거예요. 자 CSS 트랜지션 애니메이션은 어떤 식으로 구현하냐면, 자 여기 뒷박스에다가 일단 오파시티를

0으로 설정을 합니다. 자 그러면 이제 안 보이겠죠. 자 그 다음에 트랜지션, 뭐 0.5초 이런 식으로 코드를 짜면 이제

오파시티 같은 게 변경이 되면 앞으로 이제 서서히 0.5초에 걸쳐서 이렇게 변경을 해 줄 거예요.

믿어 주시면 되고요. 자 그렇기 때문에 이제요 박스에다가 박스 점 타겟 점 뭐 스타일.오파시티를

그러니까 58ct를 이렇게 1로 변경해 주세요라고 코드를 짜면 이제요 박스가 화면에 보일 때 오파시티가 1로 증가합니다. 자 근데

트랜지션 때문에 서서히 이렇게 0.5초에 걸쳐서 1로 이렇게 변경이 될 거예요. 자 근데 이런 식으로

코드를 짜면 약간 이제 부정확할 수 있는데 자 왜냐하면 자 여기 안에 있는 코드는요 뒷 박스가 화면에

등장할 때 딱 실행된다고 했죠. 그죠? 근데 하나의 상황이 더 있습니다. 자요 뒷박스가 화면에서 안 보일 때도 이

코드가 또 실행이 됩니다. 그런 식으로 이중으로 동작을 하는 거예요. 자 그렇기 때문에 화면에 보일 때만 딱 오퍼시티를 1로 설정해 주세요라고

이렇게 코드를 짜는 게 훨씬 더 정확해요. 그리고 싶으면 여기다가 이 부분을 추가하면 되는 거예요. 여기다가요 박스가 화면에 보일 때만

요거 해주세요라고 코드를 짜면 되겠죠. 그걸 이 부분으로 이렇게 검사하시면 되는데 저 검사할 때는 이거 갖다

쓰시면 되겠습니다 저 박스 점이지 인터셉틴이라는 요런 변수 하나를 갖다 쓸 수 있는데 자 이런 면이 있어요 이

박스가 화면에 보일 때는 요거가 자동으로 트루가 되고요 박스가 안 보일 때는요 변수가 자동으로 펄스가 됩니다 자 그래서 이렇게 하시면

의도대로 잘 동작을 할 거예요 그래서 새로고침하시고 스크롤바를 내려보시면 자요 박스가 등장할 때

서서히 등장하죠 그죠 자 그래서요 변수를 활용하시면 이제 이런 것들도 만들 수 있겠죠 그죠 자요 박스가 화면에서 사라질 때 뭐

특정 애니메이션 같은 걸 또 주고 싶다 그러면 여기다가 엘스문 쓰면 되는 거 아니에요 맞는 거 같습니다 그러면 이제 박스가

화면에서 사라질 때요 안에 있는 코드를 실행해 줄 것 같네요 예를 들어서 이런 식으로 코드를 짜면 이제 스크롤바 내릴 때마다

계속 애니메이션들이 다시 이렇게 출연하게 죽이죠네 맘대로 하시면 되고요 그리고 조금 더 다이나믹하게

애니메이션을 좀 줘 보도록 합시다 트랜스폼도 한번 수정해 볼게요 여기다가 트랜스폼 로테이트 영 디그리

그럼 이제 등장할 때마다 발광하면서 잘 등장할 것 같구요 그리고 이런 것들도 있는데 이제 박스에다가 점 찍고 이제 인터섹션

웨이시오라는 것도 이렇게 출력해 볼 수 있는데 자 이거 출력해 보시면 이제요 박스가 이 화면에 몇 퍼센트만큼

등장하고 있는지도 얘가 알려줍니다 예를 들어서 이 박스가 50%만큼 화면에 등장하고 있어요 그러면 요거가

0.5가 될 거예요 이런 것들 갖다 쓰면 더 재밌는 기능도 만들 수 있을 것 같고요 근데 참고만 하셔도 되는 게 이제

나중에 CSS만으로 스크롤 애니메이션을 되게 시켜 줄 수 있는 속성 같은 게 출시가 될 거예요. 요거 쓰면 자바스크립트 같은 거 필요

없을 것 같고요. 자, 근데 이제 요거는 내년쯤 바라보시면 될 것 같고요.

웹페이지에 스크롤 애니메이션 쉽게 주는 법

코딩애플

스크롤 애니메이션 구현 방식 소개 및 인터섹션 옵저버 활용

웹페이지에 애니메이션 추가를 통해 전문적인 효과 연출

스크롤 애니메이션 구현의 어려움과 예전 방식의 문제점 언급

기존 방식: HTML 요소 높이 직접 측정, 스크롤 이벤트 리스너 사용, 브라우저 호환성 문제

인터섹션 옵저버를 활용한 효율적인 스크롤 애니메이션 구현 방식 제시

인터섹션 옵저버를 이용하여 HTML 요소의 화면 표시 여부 쉽게 검사 가능

HTML 구조 및 CSS 스타일링을 통한 페이지 디자인

HTML 파일 생성 및 기본 템플릿 작성

CSS 스타일 적용 및 세로로 긴 페이지 디자인 완성

인터섹션 옵저버를 이용한 스크롤 애니메이션 구현

스크롤 시 투명도 변화 애니메이션 적용

인터섹션 옵저버 함수 사용 및 변수에 저장

observe 함수를 이용한 HTML 요소 감시

특정 div 박스 감시 및 애니메이션 추가

파라미터 추가 및 감시 중인 박스 정보 출력

CSS 트랜지션을 이용한 애니메이션 구현

화면에 보일 때만 애니메이션 적용을 위한 조건 추가

isIntersecting 변수 활용하여 화면 표시 여부 확인

추가적인 애니메이션 효과 및 향후 기술 전망

박스 사라질 때 애니메이션 추가 (else문 활용)

다이나믹한 애니메이션 효과 추가 (transform 속성 활용)

intersectionRatio 활용하여 화면 표시 비율 확인

향후 CSS 기반 스크롤 애니메이션 속성 출시 전망