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

之前，我们分三次完毕了我们第一个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）的全部样式都设置为相同的格式，样式的最后三条语句用来控制文字的流动方向（火狐不支持，慎用，这里瑾做演示），效果例如以下图所看到的：

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

这一页使用了文字垂直排版，由于火狐不支持该CSS特性。故用chrome演示。

这里限于篇幅，仅仅展示前两张，其余的格式都相同，依据图片和自己的须要能够调整相关參数。

第三步，文字添加特效

加特效。我们依旧使用animation.css插件里的动画，如今。我们先给textbox01加上pt-page-rotateCubeTopIn动画，

index.html

<div class="textbox1 pt-page-rotateCubeTopIn">

   <h5>岁月如花般绽放</h5>

   <h5>你的微笑</h5>

   <h5>融化在咖啡里</h5>

</div>

看看效果：

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

我们看到页面载入时文字确实应用了动画特效，以立体翻转并逐渐淡入的方式显示了出来。

可是当我们把相同的样式应用到其它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，增加文字并给文字加特效的更多相关文章

从零開始制作H5应用（2）——V2&period;0版，多页单张图片滑动，透明过渡及交互指示
上一次.我们制作了我们第一个H5场景应用的V1.0版,这次我们趁热打铁.在上一版的基础上对层序进行改动和扩展. 任务 1.页面数量由3张增加至9张: 2.每张页面中放入一张全屏自适应的图片. 3.修复 ...
从零開始学习制作H5应用——V5&period;0：懊悔机制，整理文件夹，压缩，模板化
经过前面四个版本号的迭代.我们已经制作了一个从视觉和听觉上都非常舒服的H5微场景应用,没有看过的请戳以下: V1.0--简单页面滑动切换 V2.0--多页切换.透明过渡及交互指示 V3.0--增加lo ...
《PHP 5&period;5从零開始学（视频教学版）》内容简单介绍、文件夹
<PHP 5.5从零開始学(视频教学版)>当当网购买地址: http://product.dangdang.com/23586810.html <PHP 5.5从零開始学(视频教学版 ...
从零開始学习OpenCL开发（一）架构
多谢大家关注转载本文请注明:http://blog.csdn.net/leonwei/article/details/8880012 本文将作为我<从零開始做OpenCL开发>系列文章的 ...
从零開始学Swift之Hello World进化版
上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...
关东升的《从零開始学Swift》即将出版
大家好: 苹果2015WWDC大会公布了Swift2.0,它较之前的版本号Swift1.x有非常大的变化.所以我即将出版<从零開始学Swift><从零開始学Swift>将在&l ...
&num; 从零開始搭建Hadoop2&period;7&period;1的分布式集群
Hadoop 2.7.1 (2015-7-6更新),Hadoop的环境配置不是特别的复杂,可是确实有非常多细节须要注意.不然会造成很多配置错误的情况.尽量保证一次配置正确防止重复改动. 网上教程有非常 ...
Bmob移动后端云服务平台--Android从零開始--(二)android高速入门
Bmob移动后端云服务平台--Android从零開始--(二)android高速入门上一篇博文我们简介何为Bmob移动后端服务平台,以及其相关功能和优势. 本文将利用Bmob高速实现简单样例,进一步 ...
从零開始怎么写android native service？
从零開始怎么写android native service Android service对于从事android开发的人都不是一个陌生的东西,非常多人可能会认为服务非常easy. 服务是简单,由于复杂 ...

随机推荐

H3C汇聚层交换机认证在线人数展示系统之CheckList和燃尽图（16/04/06-16/04/13）
一.CheckList(核查表) 序号事件计划完成时间实际完成时间未延迟未完成完成 1 登录口令加密以及解密 16/04/06 16/04/06 Y 2 表的创建和IP以及口令 ...
单个SWF文件loading加载详解（转）
通过带宽查看器,可以看到SWF中每帧所占带宽状况.另外,我们还可以在Flash发布设置中,选择生成体积报告. 勾选这一项之后,发布flash时,会自动在fla目录中生成一个名为”文件名 Report. ...
Xcode报错：Unexpected &&num;39&semi;&commat;&&num;39&semi; in program
今天犯了个很弱的错误,就是当定义个一个@property时,编译器直接报错:Unexpected '@' in program 原因是把定义的属性写在.m文件中了,改到.h文件中就好了... 以后大家 ...
学习笔记-JS公开课三
DOM技术概述 DOM : DocumentObject Model 将HTML标记型文档,封装成对象,提供更多的属性和行为 DOM的三级模型第一级:将标记型文档,封装成对象,提供更多的属性和行为 ...
synchronized和ReentrantLock的区别
synchronized和ReentrantLock的区别 synchronized是和if.else.for.while一样的关键字,ReentrantLock是类,这是二者的本质区别. 代写既然 ...
git分散式版本管理系统，从安装到基本使用
首先,当然是安装git了,不用寻思,官网下载即可 https://git-scm.com/downloads 第二是设置账户,鼠标右键,选择git bush,在命令窗口中进行设置 git config ...
vue权威指南笔记01——样式的设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
CSU 2005 Nearest Maintenance Point（最短路+bitset）
https://vjudge.net/problem/CSU-2005 题意:给出带权值的图,图上有一些特殊点,现在给出q个询问,对于每个询问,输出离该点最近的特殊点,如果有多个,则按升序输出. 思路 ...
使用Vue-cli搭建项目与目录详解
1.介绍 vue-cli这个构建工具大大降低了webpack的使用难度,支持热重载,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK. ...
springboot整合jsp模板
springboot整合jsp模板在使用springboot框架里使用jsp的时候,页面模板使用jsp在pom.xnl中需要引入相关的依赖,否则在controller中无法返回到指定页面〇.搭建s ...