标签：
之前，我们分三次完成了我们第一个H5应用的三个迭代版本：
这已经是一个具有基本表达能力的版本了，但是，远远不够！因为，用户体验永远是第一位的，单纯的图片无法准确调动用户情绪，当然，除非是那些特别牛逼的照片，但那时不可多得的，所以我们必须配以适当的文案来对图片内容进行说明或者升华。并且，如果文字也有一些简单的特效而动起来，它们会更有生命力！
在V3.0版的基础上给每张图片加入文字，并赋予不同的特效和动感。
1、从布局来看，现在每一页已经被一张图片铺满了，前面我们说过，其实可以将图片在CSS里设置为每一页的背景图片，这样既可以消除因同时设置图片宽和高都是100%带来的图片变形问题，也可以更好地在每一个页面中布局文字。
2、另一方面，我不打算将设置背景图片的样式放入主样式表，因为后面我要将我们的应用改造为一个模板，将图片置入外部样式表中，将不利于我们的模板化制作，所以，这里，我选择将样式置入页面的头部中的<style></style>标签对里，这样以后可以方便地将图片路径作为变量输出到模板中。
3、在页面中加入文字，如果是项目时间有限，追求速度的话，最直接的办法是使用作图软件将文字添加图片上，目前确实也有很多媒体和H5公司在这样做，但这样做的缺点也显而易见——无法给文字加动态效果并且不利于SEO，所以我们还是将文字独立出来放置在页面中单独制作。
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>H5场景应用1.0——实现页面滑动效果</title>
<link rel="stylesheet" href="animate.css" type="text/css"/>
<link rel="stylesheet" href="animations.css" type="text/css"/>
<link rel="stylesheet" href="loading.css" type="text/css"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="touch.js"></script>
<script src="myfn.js"></script>
<style>
.page1{background-image: url("imgs/001.jpg"); background-repeat: no-repeat; background-size: cover;}
.page2{background-image: url("imgs/002.jpg"); background-repeat: no-repeat; background-size: cover;}
.page3{background-image: url("imgs/003.jpg"); background-repeat: no-repeat; background-size: cover;}
.page4{background-image: url("imgs/004.jpg"); background-repeat: no-repeat; background-size: cover;}
.page5{background-image: url("imgs/005.jpg"); background-repeat: no-repeat; background-size: cover;}
.page6{background-image: url("imgs/006.jpg"); background-repeat: no-repeat; background-size: cover;}
.page7{background-image: url("imgs/007.jpg"); background-repeat: no-repeat; background-size: cover;}
.page8{background-image: url("imgs/008.jpg"); background-repeat: no-repeat; background-size: cover;}
.page9{background-image: url("imgs/009.jpg"); background-repeat: no-repeat; background-size: cover;}
</style>
</head>我们在每一个页面中放置一个容器来放置文本内容，并通过容器样式来控制文本的基本布局和格式，同样，为了方便模板化，我们将容器样式写在页面头部<style></style> 标签对内：
index.html
<style>
……
.textbox1{width:300px; height: 100px; position: absolute; top:50px; left: 50px; margin-left: 0; margin-top: 0; color:red;-webkit-writing-mode:horizontal-tb;writing-mode:lr-tb;writing-mode:horizontal-tb;}
.textbox2{width:100px; height: 300px; position: absolute; top:50px; right: 50px; margin-left: 0; margin-top: 0; color:yellow; -webkit-writing-mode:vertical-rl;writing-mode:tb-rl;writing-mode:vertical-rl;}
……
</style>
……
<div class="page page1">
<div class="textbox1">
<h5>岁月如花般绽放</h5>
<h5>你的微笑</h5>
<h5>融化在咖啡里</h5>
</div>
</div>
<div class="page page2">
<div class="textbox2">
<h5>不知你是否记得</h5>
<h5>下雨那天</h5>
<h5>你我初遇</h5>
<h5>你恰好穿着白色短衫</h5>
</div>
</div>
……
这里需要注意的是，出于模板化的需要，我将.textbox（n）的所有样式都设置为同样的格式，样式的最后三条语句用来控制文字的流动方向（火狐不支持，慎用，这里瑾做演示），效果如下图所示：
这一页使用了文字垂直排版，由于火狐不支持该CSS特性，故用chrome演示。
这里限于篇幅，只展示前两张，其余的格式都相同，根据图片和自己的需要可以调整相关参数。
加特效，我们依然使用animation.css插件里的动画，现在，我们先给textbox01加上pt-page-rotateCubeTopIn动画，
index.html
<div class="textbox1 pt-page-rotateCubeTopIn">
<h5>岁月如花般绽放</h5>
<h5>你的微笑</h5>
<h5>融化在咖啡里</h5>
</div>看看效果：
我们看到页面加载时文字确实应用了动画特效，以立体翻转并逐渐淡入的方式显示了出来。
但是当我们把相同的样式应用到其他textbox上时，页面切换时却没有出现预期的动画效果。
这是为什么呢？
原来，添加到这些 textbox上的动画都是在页面加载时应用的而不是页面切换时，而页面加载时，其所在页面处于不可见状态，所以我们看不到它的动画。
那么，解决这个问题的思路就是在页面切换时再让textbox显示，并给它添加相应动画。
我们在myfn.js里添加以下代码：
myfn.js
……
$("#audioPlay").on(‘click‘,function(){
if(audio.paused){
audio.play();
this.style.backgroundImage="url(imgs/music_play.png)";
}else{
audio.pause();
this.style.backgroundImage="url(imgs/music_pause.png)";
}
});
//生成随机整数函数
function rnd(start, end){
return Math.floor(Math.random() * (end - start) + start);
}
//文字进入特效数组
var inClassArray = [‘pt-page-flipInLeft‘,‘pt-page-rotatePullLeft‘,‘pt-page-rotateCubeTopIn‘];
var temLength = inClassArray.length;
function swichpage() {
……
$(".page" + nextpage).addClass("show");
$(".page" + nextpage).addClass("pt-page-moveFromBottomFade");
//为文字添加随机特效
var randomNum = rnd(0,temLength);
setTimeout(function(){
$(".textbox"+nextpage).css(‘display‘,‘block‘);
$(".textbox"+nextpage).addClass(inClassArray[randomNum]);
},1000);
$(".page" + lastpage).removeClass("pt-page-moveToTopFade");
curpage = nextpage;
}
}
……再次刷新浏览器，就可以看到文字成功应用了随机从inClassArray数组里选择的动画特效。
至此，我们的第一个H5应用的V4.0版也完成了。
从零开始制作H5应用（4）——V4.0，加入文字并给文字加特效
标签：
原文地址：http://blog.csdn.net/hjb2722404/article/details/46427251
