• Stars
    star
    320
  • Rank 131,126 (Top 3 %)
  • Language
    JavaScript
  • Created almost 10 years ago
  • Updated over 5 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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]

More Repositories

1

LMVideoTest

iOS采集音视频数据流并通过rtmp上传到nginx完整示例
C
567
star
2

H5lock

H5手势解锁组件(jQuery,Vue)版本
JavaScript
377
star
3

react-native-pullRefreshScrollView

React Native下拉刷新组件 ios 平台 支持ScrollView,ListView
JavaScript
162
star
4

simple-sheet

【Simple Sheet】一款高性能的在线表格EXCEL文档系统
TypeScript
134
star
5

wecircleCode

专栏《从0到1 实战朋友圈移动Web App开发》项目源码
JavaScript
80
star
6

report-monitor

【Report Monitor】一款完整、高性能、高可用的打点监控和统计平台
CSS
57
star
7

like-heart

Canvas直播间点赞送心组件
JavaScript
37
star
8

liveone

基于WebRTC的HTML5一对一视频聊天项目
JavaScript
34
star
9

H5Zhuanpan

HTML5转盘抽奖示例
HTML
19
star
10

weibo

《HTML5移动Web+Vue.js应用开发实战》之--微博Web App实战案例配套源码
JavaScript
12
star
11

cutvideo

【Simple CutVideo】一款基于ffmpeg的在线网页视频剪辑系统
Vue
7
star
12

doubanmovie

《Vue.js 3应用开发与核心源码解析》之--豆瓣电影评分系统实战案例配套源码
Vue
7
star
13

tetris

HTML5 Game with Phaser.js
JavaScript
6
star
14

chrome-extension-tabs-store

save the current tabs and can be open on next time
JavaScript
6
star
15

nodejs

nodejs+mango+ejs+express
CSS
3
star
16

wodu

网易新闻首页demo
Objective-C
3
star
17

vue3todo

Vue.js3.0 project todolist
Vue
2
star
18

javascript-leetcode

前端leetcode算法题目
JavaScript
2
star
19

react-family-bucket

React+Redux+webpack+react-router+scss+eslint+es6全家桶从0到1搭建教程
HTML
2
star
20

resume

my resime page
CSS
2
star
21

zhiboapp

一个神秘的ios app
Objective-C
1
star
22

qiniu-demo

七牛云存储Demo
PHP
1
star
23

vue-todo

Vue
1
star
24

blog

吕小鸣前端博客hexo
EJS
1
star
25

mqqrn-cli

JavaScript
1
star
26

moment

Vue3移动web实现微信朋友圈
JavaScript
1
star