0.0.1 • Published 8 years ago
pagescroll v0.0.1
PageScroll
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 incustomized
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>
}
]
}
0.0.1
8 years ago