Looking to incorporate Slidejs into my website? Check out the library.
I want to set different transition speeds for elements on my page. Here's how my Html structure looks like:
<div id="slides" class="sliders_1">
<div style="background:url(/images/slider/slide1.jpg) no-repeat scroll center center; background-size:100% auto;">
<div class="slider-title">
<h2 class="title">Title</h2>
</div>
<div class="slider-subtitle">
<h3 class="subtitle">Subtitle.</h3>
</div>
</div>
<div style="background:url(/images/slider/slide1.jpg) no-repeat scroll center center; background-size:100% auto;">
<div class="slider-title">
<h2 class="title">Title</h2>
</div>
<div class="slider-subtitle">
<h3 class="subtitle">Subtitle.</h3>
</div>
</div>
</div>
For instance, I want the background transition to take 500ms, while h2 transitions at 600ms and h3 at 300ms.
Hopefully that all makes sense :)
Update #1 Here is my javascript :
$('.sliders_1').slidesjs({
width: 940,
height: 588
});
Just need this snippet to enable the library.
Update #2 To clarify, I want the div with the background-image to slide first. Can I have h2 and h3 transition at different speeds during the initial transition?
Update #3 Check out the jsfiddle ! Works on Firefox but not on Safari, Chrome, and others... The slide speeds between the background, h2, and h3 are different, which is what I'm aiming for.
Would love for it to slide from right to left!