Hey there, I've got a set of icons that I'd like to reveal one by one as you scroll down.
I've incorporated some animations from , but now I'm wondering how I can implement a delay function in my jQuery so the icons appear sequentially. Are there any plugins available for achieving this effect?
Any suggestions or ideas?
Thank you!
Here's the HTML code:
<div id="create" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">
<img src="//placehold.it/80x80" alt="folder" class="img-circle">
<div class="clear"></div>
<i class="fa fa-user fa-5x m-t10"></i>
<h4>Create an account</h4>
</div>
<div id="define" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">
<img src="//placehold.it/80x80" alt="folder" class="img-circle">
<div class="clear"></div>
<i class="fa fa-pencil-square-o fa-5x m-t10"></i>
<h4>Define your API</h4>
</div>
<div id="sync" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">
<img src="//placehold.it/80x80" alt="folder" class="img-circle">
<div class="clear"></div>
<i class="fa fa-refresh fa-5x m-t10"></i>
<h4>Sync the local client</h4>
</div>
<div id="cloud" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20" >
<img src="//placehold.it/80x80" alt="folder" class="img-circle">
<div class="clear"></div>
<i class="fa fa-cloud fa-5x m-t10"></i>
<h4>Get data from the cloud</h4>
</div>
<div id="scale" class="col-lg-15 col-md-15 col-xs-12 col-sm-12 ac m-t20 m-b20">
<img src="//placehold.it/80x80" alt="folder" class="img-circle">
<div class="clear"></div>
<i class="fa fa-bar-chart-o fa-5x m-t10"></i>
<h4>Scale as required</h4>
</div>
CSS code:
#create, #define, #sync, #cloud, #scale
{
visibility:hidden;
}
jQuery code:
$(window).scroll(function () {
$('#kinect-logo').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).addClass("slideUp");
}
});
$('#create').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).delay(300).addClass("fadeIn");
}
});
$('#define').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).addClass("fadeIn");
}
});
$('#sync').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).addClass("fadeIn");
}
});
$('#cloud').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).addClass("fadeIn");
}
});
$('#scale').each(function () {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + 400) {
$(this).addClass("fadeIn").delay(300);
}
});
});