Skip to content

hansvertriest/pageScroller

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

pageScroller

Alternative to fullpage.js Demo: https://hansvertriest.github.io/pageScroller/

Usage

Create a new pagescroller instance of a given container (container id) and a minimum screenheight for the effects to enable. This container should contain section-elements which will be the pages.

const pageScroller = new PageScroller('page-container', 400);

Set properties:

  • set easing function of all the page transitions
pageScroller.set({
	easingForAll: {
		func: "easeOutQuart",
	},
});
  • set easing function of one the page transitions
pageScroller.set({
	easing: [
		{
			from: '0',
			to: '1',
			func: 'linearTween'
		},
		{
			from: '1',
			to: '2',
			func: 'easeInOutQuart',
		}
	],
});

Ommiting the 'to' property will apply the easing function when scrolling up and down from the page specified in 'from'.

  • Define an action after transitioning to another page
pageScroller.set({
	actionOn: [
		{
			pageIndex: "1",
			action: () => {
				console.log('This could be an animation happening on section 1.')
			},
		}
	],
});
  • Enable window reset to first page after refresh
pageScroller.set({
  reset: "true"
})
  • When dragging the screen on mobile, set a percentage of the screenheight which is the treshold of when to go to the next screen or stay on the current one.
pageScroller.set({
	dragTreshold: 0.2
})
  • Adding an action when a transition start is as follows:
pageScroller.set({
	whileTransitioning: [
		{
			from: '2',
			to: '1',
			callback: () => console.log('This happens while transitioning from section 2 to 1.'),
		}
	]
})

Ommiting the 'to' property will apply the transition when scrolling up and down from the page specified in 'from'.

  • Adding an action before a transition start is as follows. Callback should always return a promise.
pageScroller.set({
	beforeTransitioning: [
		{
			from: '1',
			to: '0',
			callback: () => {
				return new Promise((resolve) => {
					console.log('This is before the transition from 0 to 1.')
					setTimeout(() => {						
						resolve();
					},3000)
				});
			},
		},
	]
})
  • When you want to scroll to a specific page, like a menu or a to top button, do as follows:
const toTopBtn = document.getElementById('to-top-btn');

toTopBtn.addEventListener('click', () => {
	pageScroller.scrollToPage(0);
});

Using a navigation for the pages is recommended as it allows the user to quickly scan the page without heving to wit for every animation.

About

Alternative to fullpage.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published