Create Fullscreen Scrolling Websites

by React

react-fullpage

0.1.2-alpha Alpha Version. Not for production.

This project is still in a very early stage. You shouldn't use this for production unless you really know what you're doing.

View demo Download Source

Features

  • Design for Mobile
  • Nested Component
  • Hide safari's header on Scroll on iphone and ipad
  • Hide Google Chrome's header on Scroll on iOS and Android
  • Drived by the scroll
  • CSS animation
  • GPU/CPU swtich
  • Very Small
  • MIT License

Create Fullscreen Scrolling Websites

Install

npm install --save @ap.cx/react-fullpage

Usage


import React, { Component } from 'react'
import Fullpage, { FullPageSections, FullpageSection } from '@ap.cx/react-fullpage'

export default class App extends Component {
  render () {
    return (
      <Fullpage>

        <FullPageSections>

          <FullpageSection style={{
            backgroundColor: 'lime',
            height: '80vh',
            padding: '1em',
          }}>1</FullpageSection>
          <FullpageSection style={{
            backgroundColor: 'coral',
            padding: '1em',
          }}>2</FullpageSection>
          <FullpageSection style={{
            backgroundColor: 'firebrick',
            padding: '1em',
          }}>3</FullpageSection>

        </FullPageSections>

      </Fullpage>
    )
  }
}

Migation from previous version.
Add the ``` <FullPageSections> ... </FullPageSections>```

For IE


npm i babel-polyfill


import "babel-polyfill";

Mobile First

Dev

open 2 terminal

In the first terminals windows.


> npm i
> npm link
> npm start

In the second terminal


> cd example
> npm i
> npm link @ap.cx/react-fullpage
> npm start

GitHub