Basic idea: I want when user scroll to one point (in the middle of the pages - let say it’s 500px from top) then we have some animation, of course I won’t ask how to do all the animation stuff, but I will need you to give me the basic idea about the callback
Callbacks that I mean: after 1st animation, we get 2nd animation, then 3rd animation. How I approach this?
SCENARIO:
Let say we have 4 boxes, and they have color red, blue, orange and pink.
After user scrolled to 500px from top - I want first red box fadein
2 seconds from that, I want the red box fadeOut, and blue box will fadein.
in my original idea, I will need them to rotate or some other animation - if you could do this too it will be great , please ignore this point if you think I’m asking too much
TOOLS:
The first thing you need to do is to detect when the user has scrolled past a certain point. that’s easy:
$(window).on("scroll", function(){
if($("body").scrollTop() === 500){
$(window).off("scroll");
// Do some stuff here ..
}
}
This line:
$(window).off("scroll");
removes the scroll event handler, as I am assuming you only want this to fire once.
Displaying the boxes is also relatively easy.
If I was you I would create the boxes on your page, then hide them using CSS.
Then once you have reached the correct scroll point, you can fade them in one after another, using setTimeout and by passing a callback to the fadeIn function.
I didn’t make the biggest effort with the boxes, as I’m not sure what kind of effect you are trying to achieve.
Also, if you need any more callbacks than this, I would start looking for a more elegant solution, as nested callbacks are nasty!
Nonetheless, this will hopefully give you something to go on.
Forgive the question from a beginner with jquery but doesn’t Firefox need $(“html”).scrollTop() as it registers only zero for $(“body”).scrollTop()? At least that was the problem I ran into recently and had to use something like:
var theTop = $('html').scrollTop();
if (theTop == 0) {
var theTop = $('body').scrollTop();
}
I also think that Firefox won’t recognise 500 as it seems to jump over it and you may need to say greater than. Of course I may be out of my depth here and doing it all wrong
Oh my goodness, you are right on both accounts. What can I say? My shame knows no bounds
Yup. I did have a little snippet to address this which I found online (I can’t remember where, but I didn’t write it).
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
return pageYOffset; // Most browsers
} else{
var b = document.body; //IE 'quirks'
var d = document.documentElement; //IE with doctype
d = (d.clientHeight)? d : b;
return d.scrollTop;
}
}
Yes indeed. Good catch!
Of course I may be out of my depth here and doing it all wrong
Oh man, thank you very much for the code, I think I should try it first.
Is it the best practices using a lot of nested code? Because in my plan, I will do around 5-8 animations, so if nested all of them, I’m afraid maybe it’s not good?
I know it should works, but is there any better way?
Found this on stackoverflow here, the very first answer (voted)
Could you help me to understand this code?
There’s nothing wrong with it, other than it is a nightmare to read, maintain and keep track of what is happening where.
Apart from that, nested callbacks are great
That’s much nicer.
What that code does, is use jQuery’s implementation of the JavaScript Promise Pattern.
This might be a bit tricky to get your head round if you are new to JavaScript, but a Promise is an object that represents a one-time event, typically the outcome of an async task like an AJAX call, or as in this case, an animation. You can attach callbacks to the Promise, which will fire when the Promise is resolved or rejected (i.e. when the operation completes or fails). This allows you to write clearer, shorter callbacks.
Removing the need for the .promise() method call and the .then() method calls.
The way the $.chain() function works is as follows:
var promise = $.Deferred().resolve().promise();
This creates a new Deferred object, resolves it immediately, calls its promise() method and assigns the resultant Promise to a variable of the same name.
Then we iterate over the arguments passed to the function using arguments, an array-like object which in out case will contain the four functions we passed in.
As of jQuery 1.8 .pipe() is deprecated and we should use .then():
jQuery.each( arguments, function() {
promise = promise.then( this );
});
Here all we are doing is adding handlers to the Promise we created previously, before finally returning it.
What I overlooked previously, was that the code on SO assigns the result of the call to $.chain() to a variable (animations), so that a final callback can be invoked once all of the animations have taken place (using $.when()).
Hey, I very appreciate your answer and help!
How can I say thanks in this forum? I can’t find anything to voteup your reputation or etc.
Okay, about the code. It’s almost there!!! Without you, I couldn’t make it man!
But, now my HTML markup looks nasty with a lot of classes added
Because I .addClass(‘FadeUp’); and etc to them, so how could I remove the class after they are animated?
I’m afraid this is not currently possible.
There is some talk of a system whereby people can “thank” each other, but this didn’t get implemented yet.
Thank you for asking, though.
Shouldn’t be too difficult.
You could try jQuery’s removeClass() method.
Alternatively, post the code you have and maybe there’s another way to go about things.
Sorry, I meant the HTML, too.
That way I can run it on my computer and see if any improvements can be made, for example to the way in which the script selects the elements to animate, which in turn would mean tidier HTML with less class names.
What would be perfect would be if you could either post a link to a demo page, or use this template:
, please ignore this point if you think I’m asking too much