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>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745278734a4620176.html
评论列表（0条）