-
- Downloads
[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).
Showing
- addons/website/static/src/js/website.snippets.animation.js 55 additions, 36 deletionsaddons/website/static/src/js/website.snippets.animation.js
- addons/website/static/src/js/website.snippets.editor.js 28 additions, 13 deletionsaddons/website/static/src/js/website.snippets.editor.js
- addons/website/static/src/less/website.snippets.less 11 additions, 0 deletionsaddons/website/static/src/less/website.snippets.less
- addons/website/views/snippets.xml 10 additions, 8 deletionsaddons/website/views/snippets.xml
Loading
Please register or sign in to comment