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>
<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효과등 입니다.
자료가 도움이 되었다면 댓글과 평가 부탁합니다. 
