0

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.

Milan Poznan
  • 307
  • 4
  • 18
  • that's a maths equation ... – Jaromanda X Aug 06 '16 at 11:36
  • I can't tell you much about parallax scrolling, but I can tell you that that piece of code is an expression that is calculating the exponential function of the value i*0.15, multiplying it by 300, and substracting 700 from it. The result of this operation will **delay** the execution of the previous code by its result in milliseconds. Look at tutorials on the setTimeout function, to understand what it is doing. http://www.w3schools.com/jsref/met_win_settimeout.asp Did you set 300 and 700 yourself, or did they come in the example you are following? – Pablo Barría Urenda Aug 06 '16 at 11:41

2 Answers2

2

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.

Nick Bull
  • 9,518
  • 6
  • 36
  • 58
0

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');

Sauce

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 :)

RPaul
  • 66
  • 7