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

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

예전엔 어떻게 했냐면 자 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만으로 스크롤 애니메이션을 되게 시켜 줄 수 있는 속성 같은 게 출시가 될 거예요. 요거 쓰면 자바스크립트 같은 거 필요

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

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

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

Scripts