Author: | pballasiotes |
---|---|
Views Total: | 213 views |
Official Page: | Go to website |
Last Update: | November 30, 2022 |
License: | MIT |
Preview:

Description:
A tiny and easy-to-use JavaScript parallax library for creating parallax scrolling effects that give a 3D-like depth effect to the images or any element on a webpage.
How to use it:
1. Download and import the pureParallax.js into the document.
<script src="dist/pureParallax.js"></script>
2. Initialize the pureParallax.js on document ready.
document.addEventListener('DOMContentLoaded', function () { pureParallax({ // options here }); });
3. Apply the parallax scrolling effect to DOM elements.
<div data-depth=".5"> ... </div>
<!-- When the element is at the top of the page --> <div data-depth=".5" class="parallax-top"> ... </div>
<!-- When the element is at the bottom of the page --> <div data-depth=".5" class="parallax-btm"> ... </div>
4. Apply the parallax scrolling effect to background images.
<div data-depth=".3" class="parallax-bg"> This element has a background image </div>
<!-- When the element is at the top of the page --> <div data-depth=".5" class="parallax-bg-top"> This element has a background image </div>
5. The library also supports horizontal scrolling.
<div data-depth=".3" class="parallax-x"> ... </div>
6. Set the start position.
<div data-depth=".3" data-start-position="1"> ... </div>
7. Restrict the parallax scrolling effect to a specific container.
<div data-depth=".3" data-container="section"> ... </div>
8. Available options.
pureParallax({ selector: '[data-depth]', axisSelector: 'parallax-x', bgSelector: 'parallax-bg', bgTopSelector: 'parallax-bg-top', topSelector: 'parallax-top', btmSelector: 'parallax-btm', container: 'section', offsetHeader: true, headerId: 'hd', minWidth: 64, // Min screen width. Useful for auto-disable on mobile devices oldBrowserSupport: 'false' });