妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 40095|回复: 38

《妙味2013年新官网制作过程全揭秘》——HTML5+CSS3远程实战班

  [复制链接]
leo 发表于 2014-6-11 21:52:36 | 显示全部楼层 |阅读模式

《妙味2013年新官网制作过程全揭秘》
暨妙味HTML5+CSS3远程实战班 - 正式开始接受报名!!


官网截图:
miaov.jpg

上课内容:《妙味2013年新官网制作过程全揭秘》
演示地址: http://www.miaov.com/2013/ 【请用谷歌chrome、火狐firefox浏览器访问】
开班时间: 2014年7月3日
课时长度: 7天(至少安排7天授课,实际讲课时长会随着学员的热情提问而相应增加……)
课时安排:
1)第一阶段,安排5次课,详细讲解官网每一处核心动画的制作过程。
    上课时间:每周二、周四、周六晚上 【19:50~21:40】

2)第二阶段,安排2次课,详细为学员们解答此次远程课的课后练习,希望大家多做练习,多多提问!
    上课时间:第一阶段结束后,间隔7天后(给大家相应时间完成课后练习),安排练习解答。

授课形式: YY语音(报名的朋友,请提前安装好YY软件并申请帐号,并一定要把YY号发给我们!!)


上课说明:
1)第一阶段正课内容,均配套视频,并在妙味VIP群内提供下载;
2)课间可与讲师进行技术交流、提问;
3)每节课配备课后练习,辅助大家更好掌握该课程知识点;
4)课程结束后,安排远程方式,帮大家详细讲解课后练习;
5)全程均有详尽的PPT资料、demo演示代码供大家下载;

详细课程内容,在本帖回复里,请往下看↓

官网视频介绍:



课程费用:620元/人
注:报名该课程的朋友,自动加入【妙味官方VIP会员群】 >>加入VIP会员有何好处?

报名要求:
熟悉JS语言,对HTML5\CSS3有一定程度了解;
为保证听课质量,独享至少4M带宽、配备 音响 或 耳机 等设备……

课程优惠对象:
1)参加妙味第一期远程实战班,费用在500元(含500元)以上的朋友,本次远程课程免费;
2)妙味实体学员,报名该课程,享受5折优惠,即:310元;
3)【妙味官方VIP会员群】会员妙味正版光盘老用户 报名该课程,享受8折优惠,即:500元;

支付方式:
1)支付宝账号:13141414820
    支付时 付款说明 需标注:姓名+手机+报名妙味远程班
    PS:请勾选“免费短信通知收款人”,收款人的手机号码是 : 13141414820
    支付前必须与 QQ:
2264453929(小美)  or  1056104999(leo)联系
   
2)银行转帐账号:622202 02000 8644 1231
    户名:刘伟
    开户行:工商银行---北京花园东路支行
    通过银行转帐前必须与 QQ:2264453929(小美)  or  1056104999(leo)联系
   
3)远程培训淘宝团购,点击进入
    拍下前请留下:姓名,手机号,qq,论坛用户名



详细课程内容,请继续一直往下看↓↓ ^_^



注意事项:报名开课后,不予退费~忘周知!!






回复

使用道具 举报

 楼主| leo 发表于 2014-6-12 00:40:46 | 显示全部楼层

第二课:首页banner区域


一:带放大镜的图片切换
        1. 布局 (素材下载)
                transform:scale
        2. 图片切换
                 transition addEventListener("webkitTransitionEnd",fn,false) 事件
        3. 加入放大镜
                获取页面绝度坐标
                比例计算
                transformOrigin
                border-radius的问题 利用mask替代border-radius


二:3D场景
        1.常规方法
      
  1. function getStyle(obj,attr)
  2. {
  3.         if( obj.currentStyle){
  4.                         return obj.currentStyle[attr];        
  5.         }
  6.         return getComputedStyle(obj)[attr];        
  7. }
复制代码


        2. 通过transform-style:preserve-3d和perspective建立3D空间
        3. 用translateZ实现前后落差
        4. 计算鼠标相对位置
        5.通过perspective-origin进行视角切换
        6.加入过渡






本课练习:实现3D星空轮盘
(以下图片较大【10.7MB】,稍等...片刻即出图 ^_^)





说明:鼠标移入星空盘文字上,则星空盘随之感应,做相应角度的倾斜变化……
如图片不能打开,>>请点击这里下载图片


练习及素材下载







回复 支持 2 反对 0

使用道具 举报

 楼主| leo 发表于 2014-6-12 00:02:52 | 显示全部楼层
《妙味2013年新官网制作过程全揭秘》——课程内容


第一课:页面大框架布局

一:网站加载进度条的实现
        1. 绝对居中
                calc();
        2. 阴影 radial-gradient  contain
        3. 动画
                keyframes
                animation
                alternate偶数次反向执行
                infinite无限次
                animation-play-state:paused暂停
        4. 旋转
                transform-rotate
        5. 位移
                transform-translate
        5. 进度计算、加载失败处理
                onload onerror

二:底部导航翻转文字的实现
        1. perspective 景深 transform-style: preserve-3d 3D空间
        2. transform rotateX 围绕着x轴的3d旋转 transformOrigin 变换基点
        3. transition过渡

三:首页弹窗的实现
        1.布局 (布局下载)
                perspective 景深 transform-style: preserve-3d 3D空间 transformOrigin 变换基点 rotateY
        2. toOpen() 开始动画
                transition 以及 addEventListener("webkitTransitionEnd",end,false)
        3. mouseover(),mouseout()
                ev.clientX 鼠标坐标  getOffsetL 绝对坐标
        4. fnClick()
                Math.abs()  cubic-bezier(0, 0, 0, 0) 贝塞尔曲线过渡
        5. fnBack()
        6. fnClose()         



本课练习:带loading的图片播放幻灯片
(以下图片较大【22MB】,稍等...片刻即出图 ^_^)



如图片不能打开,>>请点击这里下载图片


回复 支持 2 反对 0

使用道具 举报

 楼主| leo 发表于 2014-6-12 01:29:35 | 显示全部楼层
以上 5 道课后练习 GIF 图下载提示:

miaov-homework-gif.png

下载地址:
http://pan.baidu.com/s/1o6iDDY6  访问密码 guxp


回复 支持 1 反对 0

使用道具 举报

 楼主| leo 发表于 2014-6-12 00:18:55 | 显示全部楼层

第三课:妙味琴弦文字列表 && 图片高斯模糊切换

一:妙味琴弦文字列表
        1. 布局转换
        2. 文字跟随鼠标
                 相邻文字坐标计算
        3. tween的使用( tween.js (4.22 KB, 下载次数: 2429)
回复 支持 1 反对 0

使用道具 举报

 楼主| leo 发表于 2014-6-12 00:55:41 | 显示全部楼层

第四课:欢乐留言本

欢乐留言本实现步骤
        1. 布局 (布局下载)
                transform-style,transform,perspective,perspective-origin
        2. 元素生成
                createFoot();
                create();
        3. 页码设置
                footerShow();
        4. 列表展开
                showList()
                oList.addEventListener("webkitTransitionEnd",end,false);
                showLi();
                getTop();
                transition:cubic-bezier();http://matthewlein.com/ceaser/
                liOpen();
        5. 点击切换
                ListHide()
                console.log(e,e.type,e.propertyName);
                ev.cancelBubble=true;




本课练习:时光轴(timeline)3D动画效果
(以下图片较大【3.04MB】,稍等...片刻即出图 ^_^)



说明:滑动鼠标滑轮,则让屏幕产生X轴方向滚动效果,
与此同时,屏幕中间位置的说明文字,会以3D翻滚方式呈现到相应位置。
继续滑动鼠标,X轴方向继续滚动,不在屏幕中间的说明文字则往外翻滚至消失,
而下一组屏幕中间的说明文字,则以3D翻滚方式继续呈现出来……

如图片不能打开,>>请点击这里下载图片


回复 支持 反对

使用道具 举报

 楼主| leo 发表于 2014-6-12 01:03:32 | 显示全部楼层

第五课:妙味3D折纸效果 && 学员页作品图片展示 && 课程内页3D切换效果

一:妙味3D折纸效果
        1. 折纸的布局
                transform-style,transform,perspective,transform-origin
        2. 加入动画
                keyframes animation
        3. 添加阴影
                box-shadow

二:学员页作品图片展示
        1. 布局 studentMtAltPicBtn.png
                Math.random()随机角度 transform:scale()
        2. 切换
                transitionend transform:translate();

三:课程内页3D切换效果
        1. 实现3D盒子
        2. 加入无缝思路



本课练习:3D立体圆环时钟效果
(以下图片较大【7.68MB】,稍等...片刻即出图 ^_^)



说明:每隔1秒钟,秒数圆环图片则相应滚动一格,满60以后,时、分、秒 等圆盘均以此相应滚动到对应位置……

如图片不能打开,>>请点击这里下载图片


回复 支持 反对

使用道具 举报

fgfganne 发表于 2014-6-16 20:56:22 | 显示全部楼层
非常好,相当好。顶一下,赞一下
回复 支持 反对

使用道具 举报

老红头 发表于 2014-6-17 08:29:15 | 显示全部楼层
哎,只能等了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-1-18 10:59 , Processed in 0.149123 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表