Reputation: 305
Hello everyone I am frontend beginner, so for me parallax scrolling is very interesting area, and now I start learning it. I am watching tutorials and read a lot of stuff for it, but still I am filing as a beginner. And now I have this:
if (wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) {
$('.clothes-pics figure').each(function(i){
setTimeout(function(){
$('.clothes-pics figure').eq(i).addClass('is-showing');
}, (300 * (Math.exp(i * 0.15))) - 700);
});
}
So here in this example i don't understand the (300 * (Math.exp(i * 0.15))) - 700); code before it I can understand 85%, but here i don't know what is what, and I am really confused.
If anyone can explain it to me i will be very thankful.
And If someone know some good tutorial for parallax it will be very welcome.
Upvotes: 0
Views: 73
Reputation: 9876
It's the timeOut
value for the setTimeout(callback, timeout)
function.
The Math.exp(i * 0.15)
means that, depending on the index, an exponent of i*0.15
, which is the same as e^(i * 0.15)
, where i is the value and e is Euler's number.
Interesting way of calculating the timeOut
. Here's a list of values for (i) => { return (300 * (Math.exp(i * 0.15))) - 700); }
to give you an idea of what a larger index value means for that timeOut
:
1 => -351.449727182
2 => -295.042357727
3 => -229.506344353
10 => 644.506721101
100 => 980704511.742
1,000 => 4.1811287*(10^67)
A very strange way to wait a (sometimes negative) quantity of time before adding a class based on element index, basically.
Upvotes: 2
Reputation: 66
The calculation part belongs to setTimeout(function(){.
All it does is calculate the milliseconds the system will wait before executing this line:
$('.clothes-pics figure').eq(i).addClass('is-showing');
Simply follow the brackets and you'll see that (300 * (Math.exp(i * 0.15))) - 700); is a parameter for the setTimeout function, all you'll have to do now is google the function and see what that parameter does. Hope this helps :)
Upvotes: 0