As I am in the process of setting up a slider for my website, I have encountered some issues.
I am utilizing bxslider and wished to incorporate animations for the text on each slide by integrating animate.css. Animate.css is quite simple: just add "animated" along with the animation name as classes to the animated element.
In essence, I want the text to appear on a slide with an animation once the slider has completed transitioning to the slide. Additionally, I prefer the text to fade out before transitioning to the next slide with the subsequent text.
Considering the slider has callback functions, I assumed it would be straightforward to append the requisite CSS classes through.
JQUERY
$(document).ready(function(){
$(".bxslider").bxSlider({
auto: true,
startSlide: 0,
slideWidth: 640,
onSlideAfter: function(){
$(".title").addClass("animated bounceInRight");
$(".text").addClass("animated bounceInRight");
},
onSlideBefore: function(){
$(".title").removeClass("animated bounceInRight");
$(".text").removeClass("animated bounceInRight");
}
});
});
HTML
<ul class="bxslider">
<li><img src="" />
<h1 class="title animated bounceInRight">TITLE 1</h1><p class="text animated bounceInRight">
text text text text text text
text text text text text text
</p></li>
<li><img src="" /><h1 class="title">TITLE 2</h1><p class="text">
text text text text text text
text text text text text text
</p></li>
<li><img src="" /><h1 class="title">TITLE 3</h1><p class="text">
text text text text text text
text text text text text text
</p></li>
<li><img src="" /><h1 class="title">TITLE 4</h1><p class="text">
text text text text text text
text text text text text text
</p></li>
</ul>
CSS 1 (what was added to the slider's default CSS)
.bxslider {
padding: 0;
margin: 0;
list-style: none;
}
.title {
position: absolute;
top:100px;
left: 100px;
color: #FFF;
font-family: Helvetica;
}
.text {
display: block;
position: absolute;
top:200px;
left: 200px;
color: #000;
font-family: Helvetica;
width: 300px;
background: #FFF;
-webkit-animation-delay: 1s; /* to delay text "entrance" */
}
CSS 2 (animation "trigger"... the different animations are just CSS3 animations with keyframes and so on)
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
An example slider can be viewed online here: bxslider test.
Thus far, there exist several problems. Although I will always mention "text," this encompasses both the <h1> and the <p> tags.
First: The first slide animates properly, with the text appearing through animations. However, on the second slide, the text is already visible before the animation commences. My intention is for the text to emerge "through" the animation.
Second: Despite attempting to introduce the fadeOut effect (once more through the addition and removal of corresponding CSS classes), it does not work as expected. The fadeOut occurs after transitioning to the next slide. It seems like I might be making a fundamental mistake in adding and removing the classes, but I am unable to pinpoint it.
Third: Is it feasible to utilize different entrance effects on each slide, possibly even randomly?
Fourth: A bug appears to manifest in Safari. On my personal computer (Safari & Chrome), the slideshow initiates with the first slide. However, on the web server in Safari, the last slide is initially visible, then quickly scrolls through to the second slide...quite odd. In Chrome, the slideshow behaves normally. Following inspection of Safari's log, no issues seem to arise from the code.
Any assistance pertaining to at least the initial two problems would be greatly appreciated!
Thank you!