애니메션 문의합니다.
본문
안녕하세요
와우에서 보면 스크롤내려면 한번만 실행되고 스크롤을 올리면 다시 재생이 안되는데요
혹시 스크롤 올리고 내릴때 마다 반복되게 하는 방법 알고 계신분 없나요?
도저히 못찾겠네요 ㅜㅜ
답변 1
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>
최송한데요 넣는데도 안되는데 왜 이럴까요? ㅜㅜ
<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>
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
이하부분은 dom 생성후 작용하는 부분이라서 </body>앞쪽에 넣어주셔야 합니다
