Multiscroll + split screen for reactjs
npm install multiscroll-reactjs1. Clone the repo
2. npm install -g gulp to install Gulp globally.
3. npm install to resolve project dependencies.
Run npm start from the command line and you are good to go!
The project is currently setup to transpile code under the _/src_ folder using the _/src/app.js_ file as an entry point.
Our resulting code ends up in the public directory.
import Multigroup from 'multigroup';
`The on your app you must create this structure:
`
// Page1: Content Left here
//page1: Content Right here
// Page2: Content Left here
// Page2: Content Right here
`As you can see, everything is grouped with
` ` tag. Be aware that Multigroup is the only tag which is capitalized, the rest are first letter downcase.Each page is a
`` tag. Inside it, you just specify the `` to put the content on the left div, and `` to put the content on the rightside. That's it!Set up animation time
To set up the animation time you can add the option`animTime on `` tag. You can add a float number, so for example it could be something like ``. The hashes are necessary to store a float number there.IF you leave empty, by default will be 3.0 seconds.
Set up background color
Also, you can specify a default background color for an specific slide. To do that, you have the `bgColor`. You must put this option on ``option.Example:
` ``. It's important to specify the # symbol and put inside quotes.Special thanks
I took a boilerplate browserify + gulp + react + additional items that has been created by @Caike and @Sergiocruz ( both from Codeschool). I save up some time thanks to their configuration.The jellyfish picture has been taken by @danist07.
The building picture has been taken by @aleccutter
Follow me on github