SimpleParallax.js Versions Save

This release is a full re-think and re-work of the architecture. simpleParallax now use ES6 classes.

Here what has been done:

• Gulp is not used anymore and has been replaced by Webpack and its libraryTarget set as UMD.
• We now have a global simpleParallax container that initiates as many as you want instances of each parallax image. The controller and the instance are separated in two different files.
• simpleParallax is now using the Intersection Observer API to check is an element is visible or not.
• Destroy method has been simplified.
• Breakpoint setting is now taking into consideration when user resize the window.
• optimisation has been done with the Request Animation Frame. Now if you create a new parallax instance after you already created one before, this will be added in the same animation frame to gain performance. Really useful when you want different orientations of parallax in the same page.
• no more IE11 support, polyfills have been removed. IE was never able to render the parallax effect properly anyway. If you still want to ensure compatibility to IE11, use the version 4.2.1.
• 4 new orientations have been added - up left, up right, down left, and down right.

simpleparallax.com and the logo have been refreshed by the way.

List of commits

• 🎨 🔥 #c4fd8a - set webpack environment and remove gulp/express/browserify
• 🎨 🔥 #056633 - remove/adapt the handle function with ES6 standart #14
• ⚡️ #b8667e - add Intersection Observer to check if element is visible
• 🎨 🚚 #9ea196 - full restructuration of simpleParallax architecture
• 🎨 #ba6609 - add prettier pre-commit with Husky and Lint Staged
• ⚡️ #876347 - every new instance of parallax won't create a new Request Animation Frame if there is already an existing one
• 🐛 #af10cc - fix an issue when destroy method was destroying all instances of simpleParallax - even instances that were not in the initial instance to removed
• 💥 🔥 #a3c190 - remove IE polyfill - no more IE11 support
• ✨ #cc8480 - you can now choose 4 new orientations - "up left", "up right", "down left" and "down right"
• ♿️ #b8e1bb - add support back for old browser that doesn't support Intersection Observer API

This is the first beta release of simpleParallax version 5.0.0

Here what has changed since 5.0.0alpha

• optimisation has been done with the Request Animation Frame. Now if you create a new parallax instance after you already created one before, this will be added in the same animation frame to gain performance. Really useful when you want different orientations of parallax in the same page.
• destroy method has been rework to match with Request Animation Frame rework above and only destroy the instance you referred to.
• no more IE11 support, polyfills have been removed. IE was never able to render the parallax effect properly anyway. If you still want to ensure compatibility to IE11, use the version 4.2.1.
• 4 new orientations have been added - up left, up right, down left, and down right.
• support for browsers than don't support Intersection Observer API has been provided.

List of commits

• #876347 - ⚡️ every new instance of parallax won't create a new Request Animation Frame if there is already an existing one
• #af10cc - 🐛 fix an issue when destroy method was destroying all instances of simpleParallax - even instances that were not in the initial instance to removed
• #a3c190 - 💥 🔥 remove IE polyfill - no more IE11 support
• #cc8480 - ✨ you can now choose 4 new orientations - "up left", "up right", "down left" and "down right"
• #b8e1bb - ♿️ add support back for old browser that doesn't support Intersection Observer API

This is the first alpha release of simpleParallax version 5.0.0

• This release is a full re-think and re-work of the architecture.
• Gulp is not used anymore and has been replaced by Webpack and its libraryTarget set as UMD.
• We now have a global simpleParallax container that initiates as many as you want instances of each parallax image. The controller and the instance are separated in two different files.
• simpleParallax is now using the Intersection Observer API to check is an element is visible or not.
• Destroy method has been simplified.
• Breakpoint setting is now taking into consideration when user resize the window.

List of commits

• 🎨 🔥 #c4fd8a - set webpack environment and remove gulp/express/browserify
• 🎨 🔥 #056633 - remove/adapt the handle function with ES6 standart #14
• ⚡️ #b8667e - add Intersection Observer to check if element is visible
• 🎨 🚚 #9ea196 - full restructuration of simpleParallax architecture
• 🎨 #ba6609 - add prettier pre-commit with Husky and Lint Staged

This release improves stability.

• :bug: #12 - Responsive images with simpleParallax
• :bug: #fc90ce9 - fix an issue with IE11 - Object.assign

This release fix one major issue and improve performance and stability.

Now even if you have a dozen of parallax images on the same page, they will all get proceed with the same request animation frame. The scripting task has been reduce by 4.

Also, sometime the image went out of its container due to a wrong order of transform CSS. This issue exists since version 1 and give some hard time to solve it.

• :zap: #2ace14 - use animationFrame/getViewportOffset only once for all instances
• :zap: #8be0a8c - get translated value on init even if this current instance is not visible
• :zap: #e86ea09 - removed unrelevant gap for isVisible method
• :bug: #169314 - fix an issue where the image get parallax out of its original container
• :zap: #11 - Change internal behavior of some functions now that we're reusing RAF

Contributor

• justintaddei

• PR#10 - destroy() throws error if called after removed from DOM

• #33006f - fix an issue with picture tag where init keep going

merge PR#9

🎉🎉 This release remove jQuery dependency and use Vanilla JS and ES6 instead. 🎉🎉

Careful, from now you need to use this syntax:

var images = document.querySelectorAll('.thumbnail');
new simpleParallax(images, {
    delay: 0, 
    orientation: 'down', 
    scale: 1.30, 
    overflow: true 
});

Old syntax will no work anymore.