H5FullscreenPage icon indicating copy to clipboard operation
H5FullscreenPage copied to clipboard

H5全屏滚动组件

H5FullscreenPage

Doc

H5FullscreenPage.init(options);

options:(default)

{
    'type' : 1,
    'pageShow' : function(page){},
    'pageHide' : function(page){},
    'useShakeDevice' : {
        'speed' : 30,
        'callback' : function(page){}
    },
    'useParallax' : true,
    'useArrow' : true,
    'useAnimation' : true,
    'useMusic' : {
        'autoPlay' : true,
        'loopPlay' : true,
        'src' : 'http://mat1.gtimg.com/news/2015/love/FadeAway.mp3'
    }
 };

type

This value have 8 types[1-8], every type has the different scroll animation, you can change it for yourself.

pageShow

After every page into the screen this function will run and give a param to this page dom.

pageHide

After every page out the screen this function will run and give a param to this page dom.

useShakeDevice

Provide the devicemotion interface to listen the shakedevice event need a speed and callback, give a param to this page dom when callback run.

useArrow

Is use arrow or not. ####useParallax This option will open deviceorientation event to add element which has class .parallax, then this element will move by device move.

useAnimation

Is use part animation or not.

useMusic

Is use music or not ,if not use put this value to null.

Use css animaion

<div class="part  slideRight" data-delay="1300"></div>

If you want to use css animaion in your page. you can add a class with .part and choose what animation to use. data-delay let the animation delay some seconds to run.

Animation list:

[fadeIn,slideLeft,slideRight,slideUp,slideDown,rotateIn,zoomIn,heartBeat,rollInLeft,rollInRight]