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

애니메션 문의합니다. 채택완료

h3style 6년 전 조회 3,453

안녕하세요

 

와우에서 보면 스크롤내려면 한번만 실행되고 스크롤을 올리면 다시 재생이 안되는데요

혹시 스크롤 올리고 내릴때 마다 반복되게 하는 방법 알고 계신분 없나요?

 

도저히 못찾겠네요 ㅜㅜ

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

답변 1개

채택된 답변
+20 포인트
o
6년 전

https://github.com/thesmart/jquery-scrollspy

여기서 다운받아서 /js 파일 에 넣어 주시고요 

 

https://gist.github.com/PaulGwamanda/bcdfd1adea5144fefa1a9d6939340b67

에서 내용을 wow 하단에 처럼 넣어 주시면 됩니다

위치에 따라 안나오실수 있으니 제일 하단에 넣으세요.

 

<script src="/js/scrollspy.js"></script>
<script type="text/javascript">
<!--
 WOW.prototype.addBox = function(element) {
    this.boxes.push(element);
  };

  // Init WOW.js and get instance
  var wow = new WOW();
  wow.init();

  // Attach scrollSpy to .wow elements for detect view exit events,
  // then reset elements and add again for animation
  $('.wow').on('scrollSpy:exit', function() {
    $(this).css({
      'visibility': 'hidden',
      'animation-name': 'none'
    }).removeClass('animated');
    wow.addBox(this);
  }).scrollSpy();


//-->
</script>

 

 

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

답변에 대한 댓글 2개

h
h3style
6년 전
최송한데요 넣는데도 안되는데 왜 이럴까요? ㅜㅜ

<script src="wow.js"></script>
<script src="scrollspy.js"></script>
<script>

WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};

// Init WOW.js and get instance
var wow = new WOW();
wow.init();

// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();

</script>
o
onlymilk47
6년 전
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};

이하부분은 dom 생성후 작용하는 부분이라서 </body>앞쪽에 넣어주셔야 합니다

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

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

로그인