JavaScript library for scroll effects that allows controlling the flow of the page navigation, overlaying the sections based on scrolling.
npm install scrollflow#### Vertical/Horizontal support
> Implement fluid transitions supporting navigation in any direction.
#### ContentOverflow
> Develop extensive sections without worrying about layout breaking.
#### Fade
> Apply the Fade for an even smoother experience.
#### Fade Content
> Choose 'Fade Content' for elements' entry in overlapped content.
#### Pagination
> Empower users with pagination for precise section navigation.
#### Anchor Links
> Any element in your HTML can easily be a trigger for a specific section.
``bash`
$ npm install scrollflow
This way you can initialize Scroll Flow in your file.js like this:
`js
import ScrollFlow from 'scrollflow';
import 'scrollflow/dist/style.css';
window.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init();
});
`
> Remembering that your script that calls this .js file must have the type module:
>
A simple and quick way for you to explore the possibilities of ScrollFlow using CDN:
`html`
This will create the global variable ScrollFlow and you can use it like this:`html
`
Installation provides us with the constructor function ScrollFlow(). Calling this function returns the ScrollFlow instance.
`html`
...
property in the init() function. Just look:`html
...
`js
const scrollFlow = new ScrollFlow(); scrollFlow.init({
horizontal: true,
});
`
$3
If you have a section that has or may have content longer than the height of the user's screen, ContentOverflow will ensure that all your content is displayed before calling the next overlap.
$3
The input fade properties are easily applied using classes, both should be applied to the "scrollflow" element. The "Fade" is an alternative to the overlapping effect:html
...
`
The "Fade Content" applies a soft entry to all elements of a section after the final overlapping flow ends:
html
...
`
If you prefer, you can also set the property in init():
`js
const scrollFlow = new ScrollFlow(); scrollFlow.init({
fade: 'content', //could be 'all', 'content' or 'none'
});
`
$3
The operation is simple: direct links to specific sections. With property, we enable bullets that float on the screen according to the orientation of the overlapping flow. To enable, just set it in the init() function:`js
const scrollFlow = new ScrollFlow(); scrollFlow.init({
paginate: true,
paginateAxis: 'y', // If you prefer, you can also change the position of the bullets using paginateAxis as 'y' or 'x'.
});
`To create links to other pages and specific sections, we use the "sf-trigger" class and the "data-sf-index" data attribute to inform which section should be redirected to. For example, if we are on the "Contact" page and would like to have a link to the third section of the Home page, we do:
html
...
...
`
Instance Props
| Props | Type | Default | Description |
| :---: | :---: | :---: | :---: |
|
| boolean | false | Navigation direction |
| paginate | boolean | false | Bullets that float on the screen that act as triggers for the sections |
| paginateAxis | 'y', 'x' | 'y' | Bullets position on the screen |
| fade | 'all', 'content', 'none' | 'none' | Sections or section content entrance |
| breakpoint | number | 1024 | Breakpoint that informs what the page break is to change mobile x desktop interactions |
| speed | number | 900 | Transition time, in milliseconds, for the overlapping interaction |
Instance Methods
####
init()
This method is responsible for starting ScrollFlow, activating the features and applying the defined settings.
js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); // If necessary, include the properties here
});
`
####
This method is a listener that allows you to execute specific actions whenever a new section is reached while scrolling. It can be very useful for adding dynamic functionalities that depend on the current section the user is viewing. For example, you might want to change the content of a menu, update a progress indicator, or trigger specific animations when the user reaches a certain part of the page.We can use it with a callback to access the scroll direction (next or previous), the starting index and the destination index, or just listen for section changes:
js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); // Example of using onChange callback
scrollFlow.onChange((direction, currentIndex, targetIndex) => {
console.log(direction, currentIndex, targetIndex);
});
// Example of using onChange without callback
scrollFlow.onChange(() => {
console.log('section changed');
})
});
`
####
This method allows you to interrupt the page's navigation flow. When called, scrolling ceases to function, whether in the vertical or horizontal direction. This is especially useful in situations where it's necessary to pause the page's movement temporarily, such as during the display of a modal or alert, ensuring that the user remains in the current position until the specific action is completed.
js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); //Using the stop() method to stop the scroll when reaching the third section
scrollFlow.onChange((direction, currentIndex, targetIndex) => {
if(targetIndex === 2) {
scrollFlow.stop();
}
});
});
`
####
This method allows you to reactivate the navigation flow, both vertically and horizontally, after it has been interrupted. This is especially useful in cases where the navigation flow was deliberately paused, whether to perform a specific action or to prevent accidental page movement. By calling this method, navigation is resumed smoothly and continuously, ensuring a seamless and uninterrupted user experience.
js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); //Using the stop() method to stop the scroll when reaching the third section
//start it again after 5 seconds
scrollFlow.onChange((direction, currentIndex, targetIndex) => {
if(targetIndex === 2) {
scrollFlow.stop();
setTimeout(() => {
scrollFlow.allow();
}, 5000);
}
});
});
`
####
This method returns the index of the currently displayed section.
js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); window.addEventListener('wheel', () => {
const currentSection = scrollFlow.getCurrentIndex();
if (currentSection === 0) {
console.log('first section');
}
});
});
`
####
The method allows you to navigate directly to a specific section, identified by the index passed as a parameter. This method is particularly useful for creating navigation links or buttons that let the user jump directly to different sections without having to scroll manually.
`js
document.addEventListener('DOMContentLoaded', () => {
const scrollFlow = new ScrollFlow();
scrollFlow.init(); //When the user reaches the last section, stop the scroll and start the first one after 5 seconds
scrollFlow.onChange((direction, currentIndex, targetIndex) => {
if (targetIndex === 5){
scrollFlow.stop();
setTimeout(() => {
scrollFlow.goToSection(0);
}, 5000);
}
});
});
``For help or support, feel free to open an issue on the project's GitHub or contact the maintainers directly at contact@scrollflowjs.com.
The MIT License.