移动端H5场景应用【移动端对话场景应用】&【破茧成蝶】

在这个夏末秋初之际,诸多好事轮番上演,移动端场景应用【第二季】也如期而至、火爆开场!!!

本课案例设置中,保留了第一季经典案例【破茧成蝶】篇
注:此案例文案均是上季内容,信息已过期,课程信息请以本季为准!

请用微信扫描二维码访问(温馨提示:H5案例有声音,请打开声音体验):

h5.png-0.7kB

01.png-315.6kB
02.png-412.8kB

除此以外,我们还精心制作了一个趣味十足的 【移动端对话场景应用】篇

具体的故事情节 请用微信扫描二维码访问(温馨提示:H5案例有声音,请打开声音体验)::
h52.png-0.5kB

20.png-177.5kB

21.png-283.1kB

课程大纲:

  1. 课程简介
  2. 什么是微信场景应用
  3. 课程划分
  4. 共分为四次课,2个微信场景,主要涉及的知识点:js css3 html5……
  5. 场景运行环境
  6. 微信内嵌的浏览器
  7. Chrome自带移动端Emulation(模拟器)
  8. 场景一功能
  9. 加载,刮开,划屏,动画,音乐等
  10. jQuery
  11. 版本2.1.3
  12. 手机分辨率
  13. 屏幕
  14. 设备
  15. 主流屏幕分辨率
  16. 640 * 960
  17. 640 * 1136
  18. viewport
  19. 默认视口
  20. width=device-width , user-scalable=no
  21. target-densityDpi=device-dpi
  22. 固定值640即可
  23. 设置高度
  24. 通过JS动态设置
  25. background-size : cover
  26. 刮开效果
  27. canvas
  28. globalCompositeOperation
  29. source-over
  30. destination-over
  31. destination-out
  32. 移动端事件
  33. touchstart
  34. touchmove
  35. touchend
  36. 原生event
  37. originalEvent
  38. changedTouches
  39. 阻止默认touchmove
  40. preventDefault
  41. 划屏切换
  42. css3
  43. 运动实现
  44. transform
  45. translate
  46. scale
  47. transition
  48. transitionEnd事件
  49. 提示箭头
  50. css3
  51. animation
  52. 名字
  53. 时间
  54. 执行次数
  55. infinite
  56. @keyframes
  57. 入场动画
  58. 文字样式
  59. css3+js
  60. transform
  61. transition
  62. 图标
  63. 可以用图片
  64. 也可以用字体库,Font Awesome
  65. 音乐
  66. audio
  67. play()
  68. pause()
  69. 加载
  70. css3
  71. 控制scale
  72. animation-delay
  73. js
  74. new Image
  75. 查看场景二效果
  76. 声音,音乐,加载,3D魔方,3D划屏,粒子操作
  77. 适配
  78. 第二种模式方案
  79. 音乐
  80. audio
  81. play()
  82. pause()
  83. 3D魔方
  84. perspective
  85. preserve-3d
  86. transform-origin
  87. 3D划屏
  88. translateZ
  89. 粒子操作
  90. canvas像素级操作
  91. canvas运动模式
  92. 加载
  93. linear-gradient

报名要求:

熟练掌握 PC 端页面布局,有一定 JS\H5\CSS3 基础知识储备。


课程咨询QQ:2852509867、2852509866、2852509868
课程咨询电话:010-57269690
客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00
关注妙味官方微信公众号,了解最新课程安排
06.jpg-26.8kB

妙味网友
请登录后留言,请登录注册