홈페이지에 화려한 에니메이션 효과를 주기 - aos animate

Mh Justice Layout 을 만들면서 각 화면당 에니메이션 적용을 했었는데

https://freehtml5.co 에 있는 레이아웃을 보고 이전에 적용했던 에니메이션보다 효과가 뛰어나서 적용해 보았습니다.

aos 에니메이션의 특징은 화면이 리플레쉬가 되지 않고도,

화면이 상하 스크롤시 마다 에니메이션이 작동을 하는 것입니다.

https://moonhouse.co.kr/justice 에서 마우스휠을 상하로 움직여 보면 효과를 느끼실 수 있습니다. 

layout.html 상,하단에 css와 js를 로드합니다.

상단에

<load target="css/aos.css" />

하단에

<load target="js/aos.js" />
<load target="js/main.js" />

다운받은 파일을 각각 폴더에 업로드합니다.

그리고 에니메이션을 적용할 class를 찾아서 아래의 코드를 적용하면 됩니다.

<h1 id="mjh1" data-aos="fade-down" data-aos-delay="400" data-aos-duration="800">{$li->section2_text}</h1>

<p class="sub" data-aos="fade-up" data-aos-delay="600" data-aos-duration="800">{$li->section2_subtext}</p>

<p class="subtle-text" data-aos="zoom-in" data-aos-delay="800" data-aos-duration="800">{$li->memu2}</p>

적용 가능한 효과는 aos.css파일을 열어보시면 여러 효과가 나옵니다.

fade효과, zoom효과, slide효과, flip효과등 입니다.