Skip to content

Long scrolling + split screen plugin for ReactJs

Notifications You must be signed in to change notification settings

Ruffeng/Multiscroll

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Multiscroll Plugin

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

Installing

  1. Clone the repo
  2. npm install -g gulp to install Gulp globally.
  3. 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

About

Long scrolling + split screen plugin for ReactJs

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published