Ask your WordPress questions! Pay money and get answers fast! (more info)

Fade one image on top of the other using Waypoints WordPress

Hi,

I have a WP site set up that uses the Cool Kitten parallax framework (http://jalxob.com/cool-kitten/) which comes with Waypoints.
http://imakewebthings.com/jquery-waypoints/

What I'd like to do next is make an image within one of the slides fade up over another when the slide comes into view. I think this is possible with Waypoints.

So far, the page code for the slide looks like this:

<section id="slide2" class="slide" data-slide="2" data-stellar-background-ratio="0.5">
<article class="wrap clearfix">
<div class="fourcol first">
<h2 class="h1 page-title white">
<?php the_field('design_header'); ?>
</h2>
<h3 class="h2">
<?php the_field('design_subheader'); ?>
</h3>
<?php the_field('design_text'); ?>
<div class="sixcol first"><a class="button" href="#">design your bike now</a> </div>
<div class="sixcol last"><a class="button" href="#">view our pre-built designs</a> </div>
</div>
<div class="eightcol last">
<div id="homepage-builder">
<img src="<?php echo get_template_directory_uri(); ?>/images/buildafixie-builder-green.jpg" width="788" height="353" alt="Buildafixie tool" id="design-overlay"/>
<img src="<?php echo get_template_directory_uri(); ?>/images/buildafixie-builder-white.jpg" width="788" height="353" alt="Buildafixie tool" id="design-underlay"/>
</div>
</div>
</article>
</section>


It is the #design-overlay that I wish to fade up over the #design-underlay.

LESS CSS for those images and div is this:

#homepage-builder {
position:relative;
img#design-overlay, img#design-underlay {
position:absolute;
top:0;
left:0;
}
img#design-overlay {
z-index:10;
}
img#design-underlay {
z-index:5;
}
}


I've tried variations on the following for the jquery, but nothing works.

$('#slide2').waypoint(function() {
$('#design-overlay').fadeIn(1500);
}, { offset: '25%' });


$('#slide2').waypoint(function(direction) {
$('img#design-overlay').fadeIn(1500);
}, {
offset: function() {
return -$(this).height();
}
});


Can anyone help please?

Answers (3)

2013-11-28

Nirmal answers:

Can you please provide your development website url ?


flint_and_tinder comments:

Will do today, development is just local at the moment.


flint_and_tinder comments:

http://www.flintandtinder.co.uk/proofing/buildafixie/

2013-11-28

Arnav Joy answers:

please show the url of the page where you are integrating it.


flint_and_tinder comments:

Will do today, development is just local at the moment.


flint_and_tinder comments:

http://www.flintandtinder.co.uk/proofing/buildafixie/

2013-11-28

Just Me answers:

Take a look here http://stackoverflow.com/questions/10922178/javascript-viewport-fade-in-fade-out


flint_and_tinder comments:

a) I want to use waypoints
b) I can and have already used Google