从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
来源:互联网 发布:yy挂机软件电脑 编辑:程序博客网 时间:2024/05/16 08:44
从零开始制作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; } } ……
- 从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
- 从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
- 从零开始制作H5应用(3)——V3.0版,loading,背景音乐及自动切换
- Photoshop文字之——制作晶莹剔透胶体特效
- 给文字加下划线
- 文字烟雾消散特效制作
- 从零开始学习制作H5应用——V3.0版,loading,背景音乐及自动切换
- 从零开始学习制作H5应用——V5.0:后悔机制,整理目录,压缩,模板化
- 给文字加描边,文字中加图片
- 给图片加文字水印
- C#给图片加文字
- java 给图片加文字
- NET 用户控件 文件上传,并给图片文件加水印(增加文字水印文字设置)
- Photoshop文字之——制作写在宣纸上的水彩字特效
- Photoshop文字之——制作逼真的镀金字特效
- 巧用CSS制作文字变图象特效
- 转载——文字发光特效
- 从零开始制作H5应用(2)——V2.0版,多页单张图片滑动,透明过渡及交互指示
- c++ 数据结构 链表
- 关于 web services 的一些资料
- UNIX网络编程练习-大小端判断
- Unity3d学习04
- 字符编码(二)
- 从零开始制作H5应用(4)——V4.0,加入文字并给文字加特效
- Sublime Text快捷键
- RevitAPI: 如何获取点云PointCloud数据?
- 转一篇Mac OS下不产生.DS_Store 隐藏文件
- Xcode 升级后,常常遇到的遇到的警告、错误,解决方法
- 趣学Python-教孩子学编程--第十章
- Unity3d学习05
- 硬盘分类及数据恢复
- Spring学习笔记(十一):关于微信开发时,用户名包含表情,保存到数据库出错的解决办法