[REF] website: refactor parallax snippet

This commit is a refactoring of the 's_parallax' snippet. Note that it
is compatible with previous parallax snippet (old snippets are just
transformed into the brand new one on page load). Note that scroll
speed are changed by this implementation though.

This solves several issues:

- Bg image went easily off of the frame if scroll speed was too fast

- The 'scroll speed' effect was visually inconsistent across different
    devices.

- If the Bg image was smaller than the frame (condition which occurs
    often in a responsive environment), then the image was totally
    offset.

- Since the previous implementation use background-position property
    to perform the effect, It was not possible to define an image
    focus point.

This implementation solves the previous issues introducing a safe-area
that limit the effect range. It's calculated dynamically, according to
the current screen size and the 'speed' option.

The effect if now achieved thanks to the translation of a DOM element
instead of background-position changes. This allows to solve the last
mentionned problem and improve performance.

The implementation rely on the new animation methods of the snippets
Animation class.
As this use the "requestAnimationFrame" function, the snippet knows
the right time to repaint itself, instead of using the "scroll" event
which is triggered too many times and thus occurs between painting
frames. This change greatly improved performances (CPU/painting usage
many times smaller).

0 files changed, 0 insertions, 0 deletions