페이지의 스크롤을 내릴 때 컨텐츠가 애니메이션되며 하나씩 나타나는 효과를 구현하는 방법입니다.
스크롤다운 애니메이션 라이브러리 사이트를 통해 간편하게 구현 가능합니다.
(유의사항) AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다.
인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.
---------------------------------------------------------------------------------------------------------------------
1. 페이지 상단의 <head>와 </head>사이에 아래 소스를 넣습니다.
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
2. 페이지 하단의 </body> 태그 바로 위에 아래 소스를 넣습니다.
<script>
AOS.init();
</script>
3. https://michalsnik.github.io/aos/
위의 주소가 스크롤다운 애니메이션 라이브러리 사이트 입니다.
원하시는 애니메이션을 고르세요.
예를들면 아래와 같은 애니메이션을 고르셨다면
<div data-aos="fade-up"></div>
아래와 같이 html 소스의 양 끝에 삽입하여주시면 됩니다.
<div data-aos="fade-up">애니메이션되길 원하는 요소</div>
4. 좀 더 세부적인 속성을 적용시키고싶을 경우 아래와 같이
원하시는 속성들을 html 소스에 추가하여 넣어주시면 됩니다.
<div data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="500"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-bottom">애니메이션되길 원하는 요소</div>
예를들어 애니메이션 속도를 조절하고싶다면
아래와 같이 data-aos-duration="1500" 속성을 추가해주시면 됩니다.
<div data-aos="fade-left" data-aos-duration="1500">애니메이션되길 원하는 요소</div>
5. 아래는 애니메이션 적용시 옵션입니다. 참고하여 적용해주시면 됩니다.
더 자세한 옵션 설명은 아래 주소 참고
https://inpa.tistory.com/516
( delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능합니다. )
data-aos 사용할 애니메이션 효과명
data-aos-easing 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease)
data-aos-anchor 특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정
data-aos-delay 애니메이션 재생 대기시간 설정(default: 0)
data-aos-offset 애니메이션 효과가 시작될 객체의 위치 설정
data-aos-duration 애니메이션의 재생시간 설정(default: 400)
data-aos-anchor-placement 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
data-aos-once 스크롤 할때마다 애니매이션이 재생될지를 설정 (default: false) <-- 내릴 때 마다 움직임
관리자에게만 댓글 작성 권한이 있습니다.