Author: | PonomareVlad |
---|---|
Views Total: | 1,308 views |
Official Page: | Go to website |
Last Update: | January 11, 2019 |
License: | MIT |
Preview:

Description:
SlideScroll is a JavaScript library which slides through a collection of content sections on page scroll, similar to the card slider.
How to use it:
Download and import the SlideScroll into the document.
<!-- ES6+ Modules import --> <script type="module"> import SlideScroll from './index.mjs'; </script> <!-- CommonJS modules import (Emulation) for older browsers --> <script nomodule src="index.js"></script>
Add the data-slider-viewport
attribute to the body.
<body data-slider-viewport>
Create page sections with the following data attributes.
<section data-slide-wrapper> <div data-slide-content style="background-image: url(bg1.jpg)"> <div data-slide-caption-animation> <h1>Slide 1</h1> <p>Content 1</p> </div> </div> </section> <section data-slide-wrapper> <div data-slide-content style="background-image: url(bg2.jpg)"> <div data-slide-caption-animation> <h1>Slide 2</h1> <p>Content 2</p> </div> </div> </section> <section data-slide-wrapper> <div data-slide-content style="background-image: url(bg3.jpg)"> <div data-slide-caption-animation> <h1>Slide 3</h1> <p>Content 3</p> </div> </div> </section> ...
Initialize the library and done.
window.slideScroll = new SlideScroll({ debug: true, // debug mode activeHook: slideNode => dataLayer.push({'event': 'foto_' + slideNode.order}) });