alloytouch
Version:
super tiny size touch and physical motion library for the web
309 lines (274 loc) • 10.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AlloyTouch.FullPage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>
html,body{
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
width: 100%;
height: 100%;
}
*{
box-sizing: border-box;
}
.section{
width: 100%;
font-size: 24px;
overflow: hidden;
position: relative;
}
.section .title{
line-height: 100px;
font-size: 24px;
}
#fullpage{
visibility: hidden;
}
.site__header {
/*-webkit-animation: bounceInUp 1s;*/
}
.powered{
font-size: 20px;
color: #454545;
margin-top: 20px;
}
.section-main{
position: absolute;
top: 50%;
margin-top: -150px;
width: 100%;
text-align: center;;
}
a{
text-decoration: none;
}
#demo0{
width: 160px;
overflow: hidden;
border: 1px solid rgb(204, 204, 204);
text-indent: 10px;
margin: 0 auto;
}
#demo0 ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#demo0 li {
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 14px;
}
#demo1{
height: 210px;
width: 220px ;
margin: 0 auto;
text-align: center;
}
</style>
<style>
*{
box-sizing: border-box;
}
.progress{
width: 100%;
font-size: 0px;
white-space: nowrap;
position: fixed;
bottom: 0px;
height: 4px;
background-color: #CCCCCC;
}
.progress-items{
width: 100%;
z-index: 2;
height: 4px;
position: absolute;
}
.progress-rate{
width: 0%;
z-index: 1;
position: absolute;
height: 4px;
background-color: #00ABEB;
transition: all .5s ease;
}
</style>
<link href="asset/animate.min.css" rel="stylesheet" />
</head>
<body>
<div id="fullpage" class="site__header">
<div class="section">
<div class="section-main">
<div class="title animated" data-show="bounceInLeft" data-hide="bounceOutLeft">AlloyTouch Introduction</div>
<div data-delay="500" class="animated" data-show="bounceInUp" data-hide="zoomOut"><img src="asset/alloytouch.png"></div>
<div data-delay="1200" class="powered animated" data-show="bounceIn infinite" data-hide="bounceOut">By AlloyTeam</div>
</div>
</div>
<div class="section">
<div class="section-main">
<div class="title animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Powerful Features</div>
<div data-delay="400" class="animated" data-show="zoomIn" data-hide="zoomOut"><img src="asset/power.png"></div>
</div>
</div>
<div class="section">
<div class="section-main" style= "margin-top: -206px;">
<div class="title animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Scrolling Demo↓</div>
<div id="demo0" data-delay="400" class="animated" data-show="zoomIn" data-hide="zoomOut">
<div style="height: 250px;overflow: hidden;">
<ul id="scroller" style="list-style: none;text-align: left;font-size: 14px;">
<li>Hello, AlloyTouch!</li>
<li>AlloyFinger</li>
<li>Transformjs</li>
<li>AlloyFlow - </li>
<li>Nuclear </li>
<li>AlloyGameEngine</li>
<li>Rosin</li>
<li>LivePool</li>
<li>AlloyStick</li>
<li>CodeStar</li>
<li>AlloyDesigner</li>
<li>JX</li>
<li>TEditor</li>
<li>JXAnimate</li>
<li>Spirit</li>
<li>AlloyImage</li>
<li>ModJS</li>
<li>Pretty row 16</li>
<li>stepify</li>
<li>AlloyTimer</li>
<li>Alloy Desktop</li>
<li>JX UI</li>
<li>CodeTank</li>
<li>iSpriter</li>
<li>Rythem</li>
<li>Go!Png </li>
<li> row 1</li>
<li> row 2</li>
<li> row 3</li>
<li>row 5</li>
<li> row 5</li>
<li> row 7</li>
<li> row 8</li>
<li> row 9</li>
<li> row 11</li>
<li> row 11</li>
<li> row 12</li>
<li> row 13</li>
<li> row 14</li>
<li> row 15</li>
<li> row 16</li>
<li> row 17</li>
<li> row 18</li>
<li> row 19</li>
<li> row 20</li>
<li> row 21</li>
<li> row 22</li>
<li> row 23</li>
<li> row 24</li>
<li style="border-bottom: none;"> row 25</li>
</ul>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-main" style= "margin-top: -206px;">
<div class="title animated" data-delay="100" data-show="flipInY" data-hide="flipOutY" >Rotation 3D Demo↓</div>
<div id="demo1" ><img id="demo-img" src="asset/atLogo.png"></div>
</div>
</div>
<div class="section">
<div class="section-main">
<div class="title animated" data-delay="100" data-show="lightSpeedIn" data-hide="lightSpeedOut" >Physical Feedback</div>
<div class="animated" data-delay="500" data-show="flipInX" data-hide="flipOutX"><img src="asset/physics.png"></div>
</div> </div>
<div class="section">
<div class="section-main">
<div class="title animated" data-delay="100" data-show="flipInY" data-hide="flipOutY">Smooth Motion</div>
<div class="animated" data-delay="500" data-show="rotateIn" data-hide="rotateOut"><img src="asset/speed.png"></div>
</div> </div>
<div class="section">
<div class="section-main">
<div class="title animated" data-delay="100" data-show="rollIn" data-hide="rollOut">Simple API</div>
<div class="animated" data-delay="500" data-show="rotateIn" data-hide="rotateOut"><img src="asset/simple.png"></div>
</div> </div>
<div class="section">
<div class="section-main">
<div class="title animated" data-delay="100" data-show="flipInY" data-hide="flipOutY">Excellent Contributors</div>
<div class="animated" data-delay="500" data-show="flipInY" data-hide="flipOutY"><img src="asset/contributors.png"></div>
<div class="animated powered" data-delay="900" data-show="bounceIn" data-hide="bounceOut"> powered by <a href="https://github.com/AlloyTeam/AlloyTouch">AlloyTouch</a> FullPage Plugin and animate.css</div>
</div> </div>
</div>
<div id="progress" class="progress">
<div class="progress-rate"></div>
<div class="progress-items">
</div>
</div>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="../transformjs/transform.js"></script>
<script src="../index.js"></script>
<script src="alloy_touch.full_page.js"></script>
<script src="asset/progress_bar.js"></script>
<script>
var target = document.querySelector("#demo-img");
//给element注入transform属性
Transform(target,true);
new AlloyTouch({
touch: "#demo1",//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: target, //运动的对象
property: "rotateY", //被滚动的属性
touchStart:function(evt){
evt.stopPropagation();
},
bindSelf:true,
touchMove:function(evt){
evt.stopPropagation();
}
})
var scroller = document.querySelector("#scroller");
Transform(scroller,true);
var at=new AlloyTouch({
touch:"#demo0",//反馈触摸的dom
target: scroller, //运动的对象
property: "translateY", //被滚动的属性
min:250-2000,
touchStart:function(evt){
evt.stopPropagation();
},
touchMove:function(evt){
evt.stopPropagation();
},
bindSelf:true,
max: 0 //不必需,滚动属性的最大值
})
var pb;
var fp = new AlloyTouch.FullPage("#fullpage",{
animationEnd:function () {
},
leavePage: function (index) {
console.log("leave"+index)
},
beginToPage: function (index) {
console.log("to"+index);
pb.to(index / (this.length-1));
}
});
pb = new ProgressBar("#progress",fp.length-1)
</script>
</body>
</html>