1.0.5 • Published 7 years ago
scroll-visibility-js v1.0.5
Scroll-Visibility-JS
To add this package to your next project, simply download /view.js or run npm install scroll-visibility-js –save-dev
and import it.
When importing and initializing the package, you can invoke one of two modules: "_util" (obj) or "ScrollView" (class).
import { ScrollView, _util as scroll } from 'scroll-visibility-js';
const newScrollObject = new ScrollView({
callback: () => console.log(this), // this represents the inview element
offset: 0,
repeat: true
});
const element1 = document.getElementById('demo');
const element2 = document.getElementById('demo');
scroll.fromTop(element1); // returns boolean
scroll.progress(element1); // returns num from 0 to 100
scroll.overlap(element1, element2 ); // returns boolean
scroll.scrollPostion(); // returns pixel quantity
scroll.visibility(element2); // returns boolean
By default, the module targets data-scrollvisibility
elements and inserts their initial values as the animation-driving class. For instance, the element <a href="#" data-scrollvisibility="fadeIn"></a>
will become <a href="#" class="fadeIn" data-scrollvisibility="true"></a>
once in the viewport. Thus, it's best to structure your scss file in the following manner to perform scroll-based effects:
[data-scrollvisibility]{
opacity: 0;
visibility: hidden;
&.fadeIn {
transition: all 350ms ease-in-out;
transform: translateY(100px);
}
}
[data-scrollvisibility="true"]{
opacity: 1;
visibility: visible;
&.fadeIn {
transform: translateY(0);
}
}