How to get the core part - that does the trick - of parallax work?

Question

I tried to experiment with parallax and started from scratch to understand the core parts of this magic. To give you an example that I like to use as inspiration, you can see it at this link here at the "Photos" section.

Latest code is down the page with related information. To get an overall look of the question see the rest of the details.

Core parts I already know are the scrollTop() of the $window and the offsetTop of the element are important to apply the parallax effect on a DOM element as well as a factor for how sensitive the effect should be respond to the scroll speed. The end result should be some formule that will calculate the translateY or translate3d coordinates in pixels or percentage.

I read on the internet that the CSS property translate is faster than, for example, top from position: absolute, and my preference would be also to use translate in combination with TweenMax GSAP. So the movement of the parallax will be very smooth. But if only the css property translate is enough that's fine too. I saw some examples that where using TweenMax, so that's why I use it for now.

JS

I have code the basic things:

var win = $(window); var el = $('#daily .entry').find('figure');  win.scroll(function() {   var scrollTop = win.scrollTop();   var parallaxFactor = 5;    el.each(function() {     var image = $(this).find('img');     var offsetTop = $(this).offset().top;      // This is the part where I am talking about.      // Here should be the magic happen...    }); }); 

So I've code above code, but it doesn't do anything, of course. See CodePen from above code here. It will only console log scrollTop and offsetTop. As mentioned before, I only know the core parts like scrollTop and offsetTop to apply the parallax effect. Then there should be some area created where the parallax effect will be triggered and happen, so calculations will be only done for elements within the viewport in order to keep the performance good. After that there should be some math done, but doesn't know exactly what or how to achieve this. Only after I have a final number, I could use it within for example TweenMax from Greensock like so:

TweenMax

TweenMax.to(image, 0.1, {     yPercent: offsetPercent + '%',     ease: Linear.easeNone }); 

Parallax formula

If I look around to get the formula down I came to something like this (founded on the internet):

var viewportOffset = scrollTop - offsetTop + win.height(); var offsetPercent = ((viewportOffset / win.height() * 100) - 100) / parallaxFactor;  if (viewportOffset >= 0 && viewportOffset <= win.height() * 2) {     TweenMax.to(image, 0.1, {         yPercent: offsetPercent + '%',         ease: Linear.easeNone     }); } 

But if I am honest, I doesn't know what this does exactly, or why it should/could be this way. I would like to know this, so I can understand the whole process of making parallax happen. The functions of scrollTop(), offsetTop and $(window).height() are clear for me, but what the trick behind the formula is, is the part that I doesn't understand.

Updates

Update 1

@Scott has notified that the inspiration site uses a plugin called scrollmagic.io, but I am very curious about how I can create a parallax by myself without the use of a plugin. How it works and how to achieve it. With emphasis on the formula, why I should it do this or that way and what exactly will be calculated, because I don't understand it and really wanna know this, so that I can use this knowledge in the future when applying a parallax effect.

Update 2

I tried to figure out what the following code snippet exactly does. I talking about this one:

var viewportOffset = scrollTop - offsetTop + win.height(); 

After some good debug sessions I think that I've the clue. So scrollTop is the amount of pixels that you've scrolled down the page and that are hidden from the view. offsetTop is the start position of the element within the DOM and $(window).height is the viewport height - the part that is visible in the browser -.

This is what I think that this formula does:

Set the zero point to the point where the element starts. For example, when scrollTop is equal to 0 and the element starts at 240px from the top, then the formula is: 0 minus 240 is -240. So the current scroll position is below zero point. After scrolling 240px down, the formula will output 0 because of course 240 minus 240 is 0 (zero). Am I right?

But the part that I doesn't understand yet is why + win.height. If we go back to above formula (at Update 2) and scrollTop is zero then the $(window).height is the space from 240px till the bottom of the viewport. When scrolling down, the amount of pixel will grow on scroll, that makes no sense to me. If someone can explain what could have been the purpose of this would be fine. 'm very curious. The second part of the formula to calculate the parallax offsetPercent I still don't understand. In general the calculation of the parallax strength on scroll.

Update 3 / 4

Advised by @Edisoni, I walked the last few days by the videos of Travis Neilson and I have become a lot wiser on the basic functionalities of parallax. A must for everyone who wants to dig in parallax. I've used the new knowledge about parallax to get my above script work:

var root = this; var win = $(window); var offset = 0;  var elements = $('#daily .entry figure');  if (win.width() >= 768) {     win.scroll(function() {          // Get current scroll position         var scrollPos = win.scrollTop();         console.log(scrollPos);          elements.each(function(i) {             var elem = $(this);             var triggerElement = elem.offset().top;             var elemHeight = elem.height();             var animElem = elem.find('img');              if (scrollPos > triggerElement - (elemHeight / 2) && scrollPos < triggerElement + elemHeight + (elemHeight / 2)) {                 // Do the magic                 TweenMax.to(animElem, 0.1, {                     yPercent: -(scrollPos - elemHeight / 2) / 100,                      ease: Linear.easeNone                 });              } else {                 return false;             }          });      });  } 

However, the script works only for a certain part of the elements. The problem is that it only works for the first two elements. I have a suspicion that the "error" is located in particularly after the AND && sign in the if statement, but can't get the error solved. http://codepen.io/anon/pen/XKwBAB

When the elements, that work on the trigger are animated, they will be jumping some pixels to the bottom, don't know how to fix this to. The jumping to: 1.135%, after the trigger is fired. So it doesn't start at 0%. I already checked if I should add the CSS property translate to the CSS and set the type of number to %, but this doesn't work for me.

-webkit-transform: translateY(0%); -moz-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); 

Should I use the TweenMax .fromTo() function instead of using the .to() function so I can set the start position as well or is my thought about this wrong and has a different cause?

Something like this:

TweenMax.fromTo(animElem, 0.1, {     yPercent: triggerElement,     z: 1 }, {     yPercent: -(scrollPos - elemHeight / 2) / 100,     ease: Linear.easeNone }); 

Beside that I trying to recreate the effect of the site that I would like to use as inspiration source without the use of the scrollMagic plugin, but I don't really know how this works, with the use of two different objects that are animated.

At last, if someone thinks the code can be better formatted, don't hesitate, I would like to hear your suggestions

My actual questions are for update 2 and 3/4:

1. How to calculate the parallax y coordinates to get "the magic" done?
2. Am I right about update 2, that the zero point will be reset to offsetTop of each element?
3. Why my code only works for the first two elements and why they jumping some pixels down if the inline style of translate will be added to the animated element? See update 3/4 for all info.

Answer 1

Parallax is actually quite simple in principle. Just make the parallax element scroll slower than the rest of the content. That being said, a parallax implementation can be as simple as dividing the scroll distance by a factor:

var parallaxFactor = 3; window.addEventListener("scroll", function(e){     el.style.top = (document.body.scrollTop / parallaxFactor) + "px";      // This is the magic. This positions the element's y-cord based off of the page scroll }, false); 

CODEPEN

This is an extremely simple demonstration of the parallax effect. Other more thorough implementations may handle values as percentages, or attempt to smooth the animation with TweenMax. This however, is the magic you're looking for.

Live long and prosper.

Update:

This example only works for elements at the top of a screen. If this were for a more general purpose, you would want to store the default y-position of the element, then something along the lines of defaultYCord + (document.body.scrollTop / parallaxFactor).

Update 2:

A very good visualization for parallax comes from Keith Clark who made a pure css parallax scroller: http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/. If you click debug in the upper left, it gives you a nice 3d-view of the magic.