admin管理员组文章数量:1418149
I am using wow js and animated.css its fantastic I really enjoy I just got a small problem when i tried run a effect when the user scroll 500px.
I can see the jquery is inserting the class for run the effect but I can't see the effect, as well if my jquery is ugly please feel free to fix too.
I am inserting the wow and animated.css classes manual on my page and works very well, this error just happen when I try use with jquery there is the code.
html before:
<footer>
</footer>
html after run the effect:
<footer class="wow shake" style="visibility: visible; animation-name: shake;">
js:
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 500 ) {
if( !fixed ) {
fixed = true;
// $('footer').css({position:'fixed',top:20});
$('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});
// .one('animationend webkitAnimationEnd mozanimationend MSanimationend oAnimationEnd');
}
} else {
if( fixed ) {
fixed = false;
$('footer').removeClass('wow shake');
}
}
});
I am using wow js and animated.css its fantastic I really enjoy I just got a small problem when i tried run a effect when the user scroll 500px.
I can see the jquery is inserting the class for run the effect but I can't see the effect, as well if my jquery is ugly please feel free to fix too.
I am inserting the wow and animated.css classes manual on my page and works very well, this error just happen when I try use with jquery there is the code.
html before:
<footer>
</footer>
html after run the effect:
<footer class="wow shake" style="visibility: visible; animation-name: shake;">
js:
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 500 ) {
if( !fixed ) {
fixed = true;
// $('footer').css({position:'fixed',top:20});
$('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});
// .one('animationend webkitAnimationEnd mozanimationend MSanimationend oAnimationEnd');
}
} else {
if( fixed ) {
fixed = false;
$('footer').removeClass('wow shake');
}
}
});
-
I have not used this but the doc indicates you need
new WOW().init();do you have that? – Mark Schultheiss Commented Aug 15, 2015 at 12:52
2 Answers
Reset to default 2You code is close enough, inspected the behavior, and found out you should add an additional class animated to work.
However, what you want to do seems not need the wow.js to achieve, just use
$(target).addClass('animated shake').show();
to display with animation, then use
$(target).hide();
to hide it should be enough, added an example to snippet.
Please point me out if I misunderstood what you want to achieve.
new WOW().init();
var fixed = false;
// These are the classes when the animation is processing.
var animateGroup = 'wow shake animated';
$(document).scroll(function() {
if( $(this).scrollTop() >= 500 ) {
if( !fixed ) {
fixed = true;
// Make them show.
$('footer')
.addClass(animateGroup)
.css({visibility: 'visible', 'animation-name': 'shake'});
// Demo without wow.js
$('.noWow').addClass('animated shake').show();
}
} else {
if( fixed ) {
fixed = false;
// Remove anything we just added.
$('footer')
.removeClass(animateGroup)
.removeAttr('style');
// Or if you have other styles, use below to remove specific style instead.
//.css({visibility: '', 'animation-name': ''});
// Demo without wow.js
$('.noWow').hide();
}
}
});body {
width: 100%;
height: 2000px;
background-color: gray;
}
footer {
visibility: hidden;
position: fixed;
top: 20px;
width: 50px;
height: 20px;
background-color: cyan;
}
.noWow {
display: none;
position: fixed;
top: 20px;
left: 100px;
width: 50px;
height: 20px;
background-color: blue;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.4.0/animate.min.css">
<footer>
</footer>
<div class="noWow">
</div>Instead of this, you have to use continue animation with scroll... I think that s better, when ever you use to scroll in their place animation will also works fine... Like this..... And you can also check my example in Codepen
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
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();body{
overflow-x:hidden;
}
.box {
display: block;
width: 200px;
background: rgba(255, 255, 255, 0.7);
color: #eb3980;
font-family: "Comic Sans MS", "Comic Sans";
border: 3px dashed pink;
margin: 30px auto;
text-align: center;
}
.doge {
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: url(http://mynameismatthieu./WOW/img/wow-8.gif) no-repeat;
}
body {
background: url(http://mynameismatthieu./WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}<script src="https://code.jquery./jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<body>
<div class="box">
<h1 class="wow slideInLeft">Hello</h1>
<h1 class="wow slideInRight">World</h1>
<h2>
本文标签：
javascriptWow js not working with scrollStack Overflow
版权声明：本文标题：javascript - Wow js not working with scroll - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1745278734a2651321.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论