之前,我们分三次完毕了我们第一个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;
}
}
……

再次刷新浏览器,就能够看到文字成功应用了随机从inClassArray数组里选择的动画特效。

至此,我们的第一个H5应用的V4.0版也完毕了。

从零開始制作H5应用(4)——V4.0,增加文字并给文字加特效的更多相关文章

  1. 从零開始制作H5应用(2)——V2.0版,多页单张图片滑动,透明过渡及交互指示

    上一次.我们制作了我们第一个H5场景应用的V1.0版,这次我们趁热打铁.在上一版的基础上对层序进行改动和扩展. 任务 1.页面数量由3张增加至9张: 2.每张页面中放入一张全屏自适应的图片. 3.修复 ...

  2. 从零開始学习制作H5应用——V5.0:懊悔机制,整理文件夹,压缩,模板化

    经过前面四个版本号的迭代.我们已经制作了一个从视觉和听觉上都非常舒服的H5微场景应用,没有看过的请戳以下: V1.0--简单页面滑动切换 V2.0--多页切换.透明过渡及交互指示 V3.0--增加lo ...

  3. 《PHP 5.5从零開始学(视频教学版)》内容简单介绍、文件夹

    <PHP 5.5从零開始学(视频教学版)>当当网购买地址: http://product.dangdang.com/23586810.html <PHP 5.5从零開始学(视频教学版 ...

  4. 从零開始学习OpenCL开发(一)架构

    多谢大家关注 转载本文请注明:http://blog.csdn.net/leonwei/article/details/8880012 本文将作为我<从零開始做OpenCL开发>系列文章的 ...

  5. 从零開始学Swift之Hello World进化版

    上节课,也就是昨晚啦,我们学习到从零開始学Swift之Hello World.那一节仅仅有一句代码,大家会认为不够过瘾. 那么这节课,就给大家来多点瘾货吧! 先上图! //var 代表变量的类型, s ...

  6. 关东升的《从零開始学Swift》即将出版

    大家好: 苹果2015WWDC大会公布了Swift2.0,它较之前的版本号Swift1.x有非常大的变化.所以我即将出版<从零開始学Swift><从零開始学Swift>将在&l ...

  7. # 从零開始搭建Hadoop2.7.1的分布式集群

    Hadoop 2.7.1 (2015-7-6更新),Hadoop的环境配置不是特别的复杂,可是确实有非常多细节须要注意.不然会造成很多配置错误的情况.尽量保证一次配置正确防止重复改动. 网上教程有非常 ...

  8. Bmob移动后端云服务平台--Android从零開始--(二)android高速入门

    Bmob移动后端云服务平台--Android从零開始--(二)android高速入门 上一篇博文我们简介何为Bmob移动后端服务平台,以及其相关功能和优势. 本文将利用Bmob高速实现简单样例,进一步 ...

  9. 从零開始怎么写android native service?

    从零開始怎么写android native service Android service对于从事android开发的人都不是一个陌生的东西,非常多人可能会认为服务非常easy. 服务是简单,由于复杂 ...

随机推荐

  1. android绑定Service失败原因

    今天抄一个代码,学习Service,中间Service的绑定一直是失败的. bindService返回false 上网查询的话都是一些,比如说TabHost的问题 发现和自己的问题不一样. 最后想了想 ...

  2. Swift - AppDelegate.swift类中默认方法的介绍

    项目创建后,AppDelegate类中默认带有如下几个方法,具体功能如下: 1,应用程序第一次运行时执行 这个方法只有在App第一次运行的时候被执行过一次,每次App从后台激活时都不会再执行该方法. ...

  3. webform中几个常用的控件

    一,简单控件 1,Lable——标签:在网页中呈现出来的时候会变成span标签 属性:Text——标签上的文字  BackColor,ForeColor——背景色,前景色 Font——字体 Bold- ...

  4. Eclipse用法和技巧三:自动生成Main方法2

    上一篇文章里面介绍了新建文件时候自动添加main方法,这里接着介绍自动联想main方法.       步骤一:输入"main” 步骤二:保持光标在上图位置,按ALT + /,再回车 上一篇文 ...

  5. C#加密与解密

    密码加密之类的用处,直接复制黏贴,可用 1.加密的代码: /// <summary> /// DEC 加密过程 /// </summary> /// <param nam ...

  6. 点击得到QTableWidget中任意位置QPushButton的行列信息

    http://www.qtcn.org/bbs/read-htm-tid-51835.html http://www.qtcn.org/bbs/simple/?t43841.html 比如(点击每行最 ...

  7. 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离)

    前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图 ...

  8. 浅析——SCTP协议(转)

    SCTP处于SCTP用户应用层与IP网络层之间,它运用“关联”(association)这个术语定义交换信息的两个对等SCTP用户间的协议状态 .SCTP也是面向连接的,但在概念上,SCTP“关联”比 ...

  9. CListCtrl插入数据避免闪烁

    1.锁定窗口,不进行刷新 m_list.LockWindowUpdate(); 2.设定列表不进行重画 m_list.SetRedraw(FALSE); 3.清空列表,删除历史数据 m_list.De ...

  10. mysql高可用架构方案之二(keepalived+lvs+读写分离+负载均衡)

    mysql主从复制与lvs+keepalived实现负载高可用 文件夹 1.前言    4 2.原理    4 2.1.概要介绍    4 2.2.工作原理    4 2.3.实际作用    4 3方 ...