各位观众老爷大家好,欢迎收看内裤总动员的项目总结,今天给大家说一下我所做过的项目的一些项目经验和总结. 比较lou, 轻点喷啊~~~,好啦,废话不多说了,现在就开始我的项目分享吧.
项目名称 : 乌合之众
项目介绍:
此项目为一个手游的游戏官方网站,他的页面主要分为以下几个内容页面:
首页,官方首页,新闻报告,游戏特色,影音专区,新手指南,玩家社区.这几个页面.
项目特点:
此项目中特点: 页面中动画效果.
页面鼠标触摸效果.
大屏幕切换的层次感.
内容模块的连接性.
具体有哪些的独特的特点,稍后将为大家进行图片展示吧
技术点
相信大家对这个是最期待的,也是最关注的地方. 那么这么一个大的网站他到底都用到了哪些技术点呢.首先明确的可以告诉大家,没有想象中的那么多的技术点.但是却对你的基础知识是否牢固,页面搭建的经验要求较高.所以,做游戏网页的小伙伴们,基础知识不牢固的可以默默的看看自己的胸了~~~~~恩哼..... 先给大家列出以下此项目中的一些技术点吧.
(1) . 页面架构 主要页面架构我基本都是采用双层div进行构建. 并用绝对定位进行定位.方便我内容上的模块定位.
(2). background-position: center center 相信这个大家或许比较熟悉,但是刚开始的时候本宝宝确实被这个所坑到了.大家可以想象一下这个效果是如何出来的.图片不变形的情况下大小百分比正常显示.这个效果如果想不到,那就是真的想不到了. 阿弥陀佛(偶没头发).
(3) 动画移动效果 animation webkit moz os 四种兼容动画
这个是首页的一些效果的地方,大家可以看一下这里需要用到了多少的animation的动画效果.并且关联到一起的.
(4) 大屏幕切换 switer 插件 和 transform: scale 元素变大
(5) hover 的动画颜色效果
(5) 事件冒泡 overflow-x: hidden; 这个是X轴的滚动条隐藏
技术难点
(1)首页 动画关联
在这里大家可以想想看,从首页中左右两个按钮的动画. 需要有层次的出现. 中间的元素的左右运行. 右面的图标转动. 需要到字体库下载字体进行转动. 而且下面的输入信息的动画. 你们可以考虑一下此页面你们需要多长时间才能写出来.
(2) 游戏特色 此网站动画功能最多的地方也是最麻烦的地方.
这里还只是刚开始. 其中涉及的技术点, 预加载图片. 预加载动画, 预加载百分比进度. 加载完成视频. 跳过进入游戏特色页面.
采用 onload进行预加载. JS声明变量制作预加载百分比, 图片切换制作预加载动画. 加载完成播放video视频.
(3) 游戏特色中有4大模块和预约激活码功能. 此4大模块由左右两个按钮点击切换. 也可直接点击进入. 首先先看第一个功能 "感受极致".
此功能为纯手写代码,无用任何插件. 在这里个人说明为何不用switer插件呢? 因为这个大屏幕的这两个左右的按钮.因为此俩按钮不只是可以切换当前5个图片. 当图片达到最后一个或者最前一个图片的时候在进行切换, 就会变成4大模块的切换.而switer插件进行嵌套的时候他的左右按钮是无法做到双层使用的.所以在这里个人是用纯手写代码进行编辑的,而且也发现纯手写代码要比插件还方便的多...因为里面的声明变量都是由你自己来控制的.
技术说明: 在这里呢,个人是用 position: absolute; 对当前5个图片进行定位, 并且设置 z-index层级. 在JS中我声明一个变量n 来进行左右按钮点击事件的判断来进行n++ 或者n--, 这样我就能够控制我的图片切换到最前面或者最后面的图片时进行模块切换. 而这里的图片移动采用 transform: translateX();移动他们的X轴.在这里移动的是5张图片,直接判断谁的transform: translateX();在最前面或者最后面即可. 这样就可以直接设置他的起点位置了.剩下的2 3 4 的图 依次顺序切换固定位置即可. 而且小伙伴们,注意上面四大模块点击时 和鼠标略过时的hover 动画哦.
(4) 第二个模块 天生卓越.
在这里有四个区域,四个图片轮流的进行图片动画, 点击后出现需要播放的视频. 在这里你需要注意的是左右按钮进行点击的模块切换关联.
(5) 见证荣耀
在这里又是一个tab切换. 在这里个人还是纯手写的并没有用switer插件. 主要功能是点击这里的任意图片区域后将显示出tab切换,并显示对应的图片.
技术说明: 在每个图片区域中for循环制作点击事件. 点击后tab切换 display:block; 在这些图片中JQ获取的a标签元素为一个a标签数组. 取到对应的下标值 ,就将显示出当前坐标值所对应的图片即可.
(6)邂逅伟大 最麻烦的动画切换效果.
这里总共有6个图片,每个图片的切换方式都不一样.有从右向左,有双层左右出现,有4层上下左右出现.的,而且点击每个图片按钮时,按钮将变大.点击最后一个按钮6时. 点击导航栏将缩小到最后成为一个按钮6.
技术说明:图片上的切换我采用的是 transform: translate();的方式进行动画移动. 6个图片我分别放的6个div进行最初的display:none; 然后由第一个开始进行animation动画效果移动.点击到哪个按钮 我将获取当前按钮的坐标和对应的div进行当前div的退回动画,完成当前div退回动画后display:none, 在把点击按钮所对应的div进行display:block; 然后动画在进行移动出现.
在这里和大家说明一下: 按钮的动画和背景图片切换的动画所用的是不一样的, 按钮动画我用的transition补间动画, 而背景图片切换我用的animation动画. 为何我的按钮会用到这个transition呢? 这就要明白 transition和 animation之间的区别了,他们的功能都一样,都是动画,而他们之间的区别在于,transition动画他是补间动画,而animation动画是假动画. 这个也是我按到第6个按钮的时候,按钮导航栏全部缩放回去的原因.
补间动画: 补间动画的特点是他不止可以控制元素的上下左右的移动位置,他也可以控制自己的元素大小,自己的宽高也是可以直接控制的.举个"栗子"来说, 我把width:100px 用transtion动画更改为 width:50px 他是会以动画的方式一点点变成50px的.而 animation他则是不会的,他会瞬闪过去.
假动画: 假动画,他能够移动位置,大小等. 但是他不能直接控制当前元素的 宽和高, 如果控制,他会直接瞬闪,是没有动画的, 而且animation他执行完当前的动画后他是不会保存的. 他会回到你在css写的初始位置. 如果不在animation里不设定 你当前的动画位置或者移动位置,他会回到你初始的位置. 当然animation也有一个属性可以控制他的动画执行完成后将停止在最后一刻. 但是他的动画还是假动画. 无法控制宽高的.
好啦,此项目的技术分享就先介绍这些啦. 其中有些地方或者你们会有更好的办法,感谢大家的阅读和评论,内裤会吸取更好的经验并壮大自己的经验,争取以后的撕逼技术更高一层.~~~~ 谢谢大家.
