테스트 사이트 - 개발 중인 베타 버전입니다

Fullpage.js 와 AOS 플러그인은 함께 사용할 수 없나요? 채택완료

동물원 3년 전 조회 4,999

Fullpage.js 와 AOS 플러그인은 함께 사용할 수 없나요?

 

https://alvarotrigo.com/fullPage/ko/ 
https://michalsnik.github.io/aos/ 를 함께 적용해서 사이트를 만들어 보고 싶은데요.

 

각각의 기능들은 잘 적용이 되는데, 두개를 함께 사용하려면 계속 충돌이 나고 깨지네요.

 

페이지당 스크롤 되는 기능과 해당 페이지에 보여지는 컨텐츠에 트랜지션과 애니메이션을

적용하려고 시도해 보는 중인데요.

 

위의 두가지 플러그인을 함께 사용하려면 어떻게 해야 할까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

fullpage.js 기능 중

</p>

<p>afterLoad : function(origin, destination) {</p>

<p>$('#fullpage .section').find('.animated').each(function() {</p>

<p>        var $this = $(this);</p>

<p>        var Ani = $this.attr('data-animated');</p>

<p>        $this.removeClass(Ani);</p>

<p>      });</p>

<p>      $('#fullpage .section').eq(destination - 1).find('.animated').each(function () {</p>

<p>        var $this = $(this);</p>

<p>        var Ani = $this.attr('data-animated');</p>

<p>        $this.addClass(Ani);</p>

<p>      });</p>

<p>}</p>

<p>

 

대충 이런식으로..?

 

aos.js 도 animate.css 활용하는걸로 알고있습니다.

 

animate.css 받아서 필요한 부분에 적당히 붙이시면됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

동물원
3년 전
네~ 답변 감사 드립니다.

댓글을 작성하려면 로그인이 필요합니다.

꼭 aos 와 함께 쓸 필요는 없고..

 

그냥 수동으로 처리해도 쉽습니다.

 

$('...active').find('.a').addClass('....');

 

이런식으로 처리만 해도 금방됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

동물원
3년 전
네~ 답변 감사 드립니다. 제가 코딩을 잘 몰라서, 라이브러리를 많이 활용하는 편이라서요.
수동으로 처리하는 방법을 조금 더 자세한 설명을 부탁 드려도 될까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인