Multiscroll Plugin

This plugin adds the funcion long scrolling + split screen in ReactJs. To see a live example you can go here

Installing

Clone the repo
npm install -g gulp to install Gulp globally.
npm install to resolve project dependencies.

Using

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.

How does it work?

You must import the plugin with:

import Multigroup from 'multigroup';

The on your app you must create this structure:

<MultiGroup >
    <multiScroll>
        <leftSide>
              // Page1: Content Left here
        </leftSide>
        <rightSide>
              //page1: Content Right here
        </rightSide>
    </multiScroll>
    <multiScroll>
        <leftSide>
              // Page2: Content Left here
        </leftSide>
        <rightSide>
              // Page2: Content Right here
        </rightSide>
    </multiScroll>
</MultiGroup>

As you can see, everything is grouped with <Multigroup> tag. Be aware that Multigroup is the only tag which is capitalized, the rest are first letter downcase.

Each page is a <multiscroll> tag. Inside it, you just specify the <leftside> to put the content on the left div, and <rightside> to put the content on the rightside. That's it!

Set up animation time

To set up the animation time you can add the optionanimTime on tag. You can add a float number, so for example it could be something like<MultiScroll animTime={1.5} ```. 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 <multiScroll>option.

Example: <multiScroll bgColor="#ededed" > . 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