Image Parallax Scroll Effect JavaScript Library - SimpleParallax
File Size: | 17 MB |
---|---|
Views Total: | 13546 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple, lightweight jQuery JavaScript parallax solution applies a subtle Parallax Scroll Effect to any images in your React or Vanilla JavaScript applications.
Install & download:
# NPM $ npm install simple-parallax --save # Bower $ bower install simple-parallax --save
How to use it:
1. Import the SimpleParallax into your React or Vanilla JavaScript project.
// Vanilla JS import SimpleParallax from "simple-parallax-js/vanilla"; // React import SimpleParallax from "simple-parallax-js";
2. Apply the parallax effect to images.
// Vanilla JS var image = document.getElementsByClassName('parallax-image'); new simpleParallax(image); // OR all images var images = document.querySelectorAll('img'); new simpleParallax(images);
// React const Component = () => ( <SimpleParallax> <img src="parallax.jpg" alt="parallax image" /> </SimpleParallax> )
// Next.js import Image from "next/image"; const Component = () => ( <SimpleParallax> <Image src="parallax.jpg" alt="parallax image" width={1920} height={1024} /> </SimpleParallax> )
3. Apply a custom delay to the parallax effect. Default: 0.4.
var para = new simpleParallax(images,{ delay: .8 });
4. Set the orientation of the parallax scroll: up (default), down, left, right, up left, up right, down left, or left right
var para = new simpleParallax(images,{ orientation: 'down' });
5. Set the scale ratio of your parallax image. Default: 0.4.
var para = new simpleParallax(images,{ scale: '1.5' });
6. Apply a transiton effect to the parallax effect.
var para = new simpleParallax(images,{ transition: 'cubic-bezier(0,0,0,1)' });
8. Decide whether to apply an overlay on the original image. Default true.
var para = new simpleParallax(images,{ overflow: true });
9. Apply the parallax effect on a custom scroll container.
var para = new simpleParallax(images,{ customContainer: 'custom container', customWrapper: false });
10. Determin the percentage (1-99) where the parallax should stop.
var para = new simpleParallax(images,{ maxTransition: 0 });
11. Destroy the plugin.
para.destroy();
12. Refresh the plugin.
para.refresh();
Changelog:
v6.0.1 (2024-06-19)
- remove useless and buggy css from the container
v6.0.0 (2024-06-15)
- Supports React.js
v5.6.2 (2020-08-20)
- update
v5.6.1 (2020-07-27)
- ensure simple parallax is initialized on SVG at page load
- add a isInit class
v5.5.1 (2020-06-21)
- hotfix
v5.5.0 (2020-06-09)
- set the delay at 0 by default
v5.5.0 (2020-06-08)
- add a refresh method
v5.4.1 (2020-05-26)
- fix issue with lazy loaded images
v5.4.0 (2020-04-08)
- Add support for videos
- Add new customWrapper setting
v5.3.0 (2020-02-02)
- add maxTransition parameter
v5.2.0 (2019-12-08)
- Fixed an issue when the translation was applied after the transition, so the first translation on load time looked buggy.
- Removed the breakpoint parameter, as this should be managed outside the simpleParallax plugin.
- Added a new customContainer parameter for those who want to apply the parallax on a custom scroll container (rather than the document itself).
v5.1.0 (2019-06-13)
- ImpleParallax can now be initialized from a string as element
- Refactoring destroy method
- Improve the way resize method is handle
v5.0.1 (2019-06-04)
- Fix Uncaught TypeError: simpleParallax is not a constructor
v5.0.0 (2019-05-23)
- Gulp is not used anymore and has been replaced by Webpack and its libraryTarget set as UMD.
- 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.
v4.2.1 (2019-03-10)
- Improved responsive images with simpleParallax
- Fixed an issue with IE11
v4.1.1 (2019-03-07)
- Make SimpleParallax instance accessible
- fix an issue with picture tag where init keep going
- Doc update
v4.0.0 (2019-01-07)
- fix an issue with options override
v3.1.2 (2018-10-08)
- use getBoundingClientRect to avoid issue when parent is relative
2018-09-14
- add breakpoint params
- fix issue with load event with picture and srcset
2018-06-21
- add delay parameter
2018-04-04
- use CSS hardware acceleration for animations
2018-03-19
- JS update
2018-03-15
- destroy method implementation
2018-01-15
- add rate error to avoid issue when image translate out of its container
2017-11-27
- update class name typo
2017-11-23
- making the plugin compatible with CommonJS for npm users
2017-11-22
- update init function so the calculation can be executed at the first load of the screen without any scroll
2017-11-22
- add requestAnimationFrame to the animate function
This awesome jQuery plugin is developed by geosigno. For more Advanced Usages, please check the demo page or visit the official website.