Noisy Pillaging Monster

    pagescroll

    0.0.1 • Public • Published

    PageScroll

    GitHub license

    this is a react component that implements the ScrllTrigger

    Demo

    You can see the demo in the github page of terwanerik/ScrollTrigger

    Install

    npm install pagescroll
    

    Properties

    Just give you the PageScroll's propTypes in source code

    PageScroll.propTypes = {
      pages: PropTypes.arrayOf(PropTypes.shape({
        customized: PropTypes.bool,
        content: PropTypes.oneOfType([
          PropTypes.arrayOf(PropTypes.string),
          PropTypes.object,
        ]),
      }))
    }
    

    To make it clear:

    • customized: bool - means whether it is a cutomized content. If it is false, the component will take the content as an array of strings, and display the string one by one with the tag from h1 -> h2 -> h3. If it is true, the component will take the content as an JSX object. Feel free to design any JSX object.

    • content: array of strings or a JSX object - explained in customized

    example props

    import React from 'react';
    const data = {
      pages: [
        {
          customized: false,
          content: [
            'ScrollTrigger',
            'Add scroll based animations to your site with ease.',
          ],
        },
        {
          customized: false,
          content: [
            'CSS Animations',
            'All animations are triggered by classes, so you can take advantage of the power that CSS3 animations give you.'
          ],
        },
        {
          customized: false,
          content: [
            'Vanilla JS',
            'It\'s written in vanilla javascript, so you can use it with any framework.'
          ],
        },
        {
          customized: false,
          content: [
            'Request Animation Frame',
            'It uses the window.requestAnimationFrame method so it doesn\'t jack the users scroll. Animations are triggered when the browser is ready for it.'
          ]
        },
        {
          customized: false,
          content: [
            'Simple syntax',
            'You define the options inside the HTML attribute, so after you have initialised the ScrollTrigger you don\'t have to touch JavaScript again.'
          ],
        },
        {
          customized: true,
          content: <div>
                     <h1>Open source</h1>
                     <h2>The project, with documentation, is on <a href="https://github.com/terwanerik/ScrollTrigger">GitHub</a>. Give it some love!</h2>
                     <h3>Written by <a href="https://erikterwan.com" target="_blank">Erik Terwan</a></h3>
                   </div>
        }
      ]
    }
    

    Keywords

    none

    Install

    npm i pagescroll

    DownloadsWeekly Downloads

    2

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • zhenghe