Narcoleptic Programmers' Medicine

    rc-scroll-anim

    2.7.6 • Public • Published

    rc-scroll-anim


    React ScrollAnim Component

    NPM version build status Test coverage node version npm download

    Browser Support

    IE Chrome Firefox Opera Safari
    IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

    Development

    npm install
    npm start
    

    Example

    http://localhost:8020/examples/

    http://react-component.github.io/scroll-anim/

    http://ant.design/

    Feature

    • support ie8,ie8+,chrome,firefox,safari

    install

    rc-scroll-anim

    Usage

    ScrollOverPack

    var ScrollAnim = require('rc-scroll-anim');
    var ScrollOverPack = ScrollAnim.OverPack;
    var React = require('react');
     
    // ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;
     
    React.render(<ScrollOverPack>
      <QueueAnim key='queueAnim'>
        <div key='a'>enter</div>
        <div key='b'>enter</div>
        <div key='b'>enter</div>
      </QueueAnim>
      <TweenOne key='tweenOne' vars={{x:100}}>one element</TweenOne>
      <Animate key='rc-animate' transitionName="fade" transitionAppear>rc-animate</Animate>
    </ScrollOverPack>, container);

    Parallax

    var ScrollParallax = ScrollAnim.Parallax;
    React.render(<ScrollParallax animation={{x:100}}>Parallax</ScrollParallax>,container);

    Link, Element

    var Link = ScrollAnim.Link;
    var Element = ScrollAnim.Element;
    React.render(<div>
      <div className="nav">
        <Link className="nav-list" to="page0">nav0</Link>
        <Link className="nav-list" to="page1">nav1</Link>
      </div>
      <Element className="pack-page" id="page0">demo</Element>
      <Element className="pack-page" id="page1">demo</Element>
    </div>,container);

    scrollScreen

    ScrollAnim.scrollScreen.init();
    ScrollAnim.scrollScreen.unMount();

    API

    中文文档

    props

    Element

    Element or OverPack must set height;

    name type default description
    component string div -
    id string null need to location the id,parallax the location or link the to, need to use
    targetId string null scroll target id, if don't window scroll, parent element is overflow: scroll, use parent id to do scroll; demo refs
    playScale number / array / string 0.5 percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave], topLeave >= bottomEnter
    replay boolean false play every enter, do you want to animate each time you show the current, false only scroll to down play animate
    onChange func null change callback({ mode, id }); mode: enter or leave
    onScroll func null scroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }).
    location string null v0.6.0 above have,location, the parent id;
    componentProps object null component props.

    Note: if the element is not the above component, you need to location this element; please use the Element

    OverPack

    OverPack inherit Element; component playScale onChange onScroll location replay refer to Element;

    1.0.0 remove hideProps;

    name type default description
    always boolean true back to top, enter replay,as false will only play it again, leave does not play
    appear boolean true whether support appear the operation
    componentProps object null component props.

    Parallax

    name type default description
    animation object / array null animation data
    location string null location, the parent id
    always boolean true -
    targetId string null refer Element targetId
    component string div -
    componentProps object null component props.

    animation = { }

    name type default description
    playScale array [0, 1] play area, [start, end]
    timeline: [{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]], Second will increase by 0.2, The second end is 1
    ease string easeInOutQuad animation easing string
    onUpdate function - animate updates, callback: onUpdate(percent)
    onStart function - scroll down animate start (playScale[0]) callback;
    onComplete function - scroll down animate completed (playScale[1]) callback
    onStartBack function - scroll up animate start (playScale[1]) callback;
    onCompleteBack function - scroll up animate completed (playScale[0]) callback;

    animation = [{},{}] is timeline;

    Link

    v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo

    v2.3.0 toHash default is false;

    name type default description
    to string null need; Specifies the element to top; Element the id
    toHash boolean false add to to the location.hash
    duration number 450 scroll animate duration
    ease string easeInOutQuad animation easing string
    active string active selected className
    showHeightActive string / number / array 50% enter: the element offset top 50% add active, leave: the element in the window 50% remove active; is array [enter, leave];
    toShowHeight boolean false scroll to showHeightActive
    offsetTop number 0 scroll to elem top offset
    targetId string null refer Element targetId
    onFocus func null check callback,onFocus({target,to})
    onBlur func null blur callback
    component string div -
    componentProps object null component props.

    ScrollAnim.scrollScreen.init(vars)

    Use: scroll a screen window;

    vars = { }

    name type default description
    location array [] llocation of scrolling screen, only element ID is supported in array
    duration number 450 scroll duration
    ease string easeInOutQuad easing
    docHeight number null Custom html height
    loop boolean false Before and after the phase cycle
    scrollInterval number 1000 rolling interval time

    ScrollAnim.scrollScreen.unMount()

    Clear a screen scrolling effect;

    Event

    var Event = ScrollAnim.Event;
    Event.addEventListener('scroll.xxxx',func);
    Event.removeEventListener('scroll.xxx',func);

    Install

    npm i rc-scroll-anim

    DownloadsWeekly Downloads

    3,841

    Version

    2.7.6

    License

    none

    Unpacked Size

    844 kB

    Total Files

    42

    Last publish

    Collaborators

    • jljsj33