zwug / React Full Page
Licence: mit
Full screen scrolling with React
Stars: ✭ 132
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Full Page
Scroll Out
ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!
Stars: ✭ 1,033 (+682.58%)
Mutual labels: scrolling
React Router Scroll Memory
React component to keep the scroll of the page and to restore it if the user clicks on the back button of its browser
Stars: ✭ 95 (-28.03%)
Mutual labels: scrolling
Fixed Sticky
DEPRECATED: A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.
Stars: ✭ 1,490 (+1028.79%)
Mutual labels: scrolling
Django Infinite Scroll Pagination
🌀 Pagination based on the seek method / keyset paging / offset-less pagination
Stars: ✭ 90 (-31.82%)
Mutual labels: scrolling
Pd Select
vue components ,like ios 3D picker style,vue 3d 选择器组件,3D滚轮
Stars: ✭ 101 (-23.48%)
Mutual labels: scrolling
Viewprt
A tiny, dependency-free, high performance viewport position & intersection observation tool
Stars: ✭ 36 (-72.73%)
Mutual labels: scrolling
React Virtual
⚛️ Hooks for virtualizing scrollable elements in React
Stars: ✭ 2,369 (+1694.7%)
Mutual labels: scrolling
Parallaxscrollingview
Parallax scrolling either by offset or automatically.
Stars: ✭ 91 (-31.06%)
Mutual labels: scrolling
Multiscroll.js
multiscroll plugin by Alvaro Trigo. Create scrolling split websites. http://alvarotrigo.com/multiScroll/
Stars: ✭ 1,537 (+1064.39%)
Mutual labels: scrolling
Floatthead
Fixed <thead>. Doesn't need any custom css/html. Does what position:sticky can't
Stars: ✭ 1,193 (+803.79%)
Mutual labels: scrolling
Prognroll
A tiny, lightweight jQuery plugin that creates scroll progress bar on the page.
Stars: ✭ 108 (-18.18%)
Mutual labels: scrolling
Scroll Watcher
⚡️ 📜 A lightweight, blazing fast, rAF based, scroll watcher.
Stars: ✭ 51 (-61.36%)
Mutual labels: scrolling
Phaser Kinetic Scrolling Plugin
Kinetic Scrolling plugin for Canvas using Phaser Framework
Stars: ✭ 117 (-11.36%)
Mutual labels: scrolling
Dragscroll
micro library for drag-n-drop scrolling style
Stars: ✭ 989 (+649.24%)
Mutual labels: scrolling
Easy Scroll
A lightweight native javascript library to perform smooth scrolling with animation
Stars: ✭ 96 (-27.27%)
Mutual labels: scrolling
Angular Fullpage
Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/
Stars: ✭ 131 (-0.76%)
Mutual labels: scrolling
Vue Fullpage.js
Official Vue.js wrapper for fullPage.js http://alvarotrigo.com/vue-fullpage/
Stars: ✭ 1,626 (+1131.82%)
Mutual labels: scrolling
Jquery Scrolllock
Locks mouse wheel scroll inside container, preventing it from propagating to parent element
Stars: ✭ 109 (-17.42%)
Mutual labels: scrolling
react-full-page
Full screen scrolling with React
DEMO
import React from 'react';
import { FullPage, Slide } from 'react-full-page';
export default class FullPageExample extends React.Component {
render() {
return (
<FullPage controls>
<Slide>
<h1>Inner slide content</h1>
</Slide>
<Slide>
<h1>Another slide content</h1>
</Slide>
</FullPage>
);
}
});
Props
-
initialSlide
defaults to0
-
duration
- scroll duration [ms] defaults to700
-
controls
defaults tofalse
-
true
adds built-in controls - Pass React component if you want to use your own controls
-
-
controlsProps
additional props for controls component -
beforeChange
callback executed before scroll -
afterChange
callback executed after scroll -
scrollMode
full-page
ornormal
- defaults tofull-page
Both beforeChange
and afterChange
will receive as parameter an object like:
{
"from": 0, // the index of the slide react-full-page is scrolling _from_
"to": 1, // the index of the slide react-full-page is scrolling _to_
}
Slider Controls
Basic controls props (passed automatically)
getCurrentSlideIndex: PropTypes.func.isRequired,
onNext: PropTypes.func.isRequired,
onPrev: PropTypes.func.isRequired,
scrollToSlide: PropTypes.func.isRequired,
slidesCount: PropTypes.number.isRequired,
Default controls example
<FullPage controls controlsProps={{className: 'class-name'}}>
...
</FullPage>
Custom controls example
<FullPage controls={CustomControls} controlsProps={controlsProps}>
...
</FullPage>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].