您的位置：首页 > Web前端 > HTML5

从零开始制作H5应用（4）——V4.0，加入文字并给文字加特效

2015-11-30 10:57 696 查看

从零开始制作H5应用（4）——V4.0，加入文字并给文字加特效

之前，我们分三次完成了我们第一个H5应用的三个迭代版本：

V1.0——简单页面滑动切换

V2.0——多页切换，透明过渡及交互指示

V3.0——加入loading,music及自动切换

这已经是一个具有基本表达能力的版本了，但是，远远不够！因为，用户体验永远是第一位的，单纯的图片无法准确调动用户情绪，当然，除非是那些特别牛逼的照片，但那时不可多得的，所以我们必须配以适当的文案来对图片内容进行说明或者升华。并且，如果文字也有一些简单的特效而动起来，它们会更有生命力！

任务

在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;
}
}
……

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航