妙味优秀学员:韩旭 结课作品展示

iceart 是一个优秀的设计团队,他们的作品非常细腻。

显然,妙味 JS 班学员 韩旭 也是极为赞同的,因此,他的 JS 结课作品也就以此为目标,并最终实现了 iceart 的官网页面。

打开首页的样子:

交互动画透露着诸多细腻:

最后的动态细节,更是做到了意境非凡:


在线地址:>>妙味 JS 班优秀学员 韩旭 作品


接下来,移动端作品也是必不可少的,他选择了“国萃”味道十足的作品去做了一个 H5 页面:

打开微信,扫描二维码访问:


-学员们想说的话-


JS 班优秀学员 韩旭 作品总结:

从16年6月学习前端到现在已经半年多了,很高兴在学习结束之前作出了属于自己的作品 ,虽然可能作品还稍显稚嫩 ,但是这个作品付出了我的努力,也是对我这半年以来学习的一个检验。下面就来谈一谈我在做这个作品时遇到的几个问题,还有如何解决的。

1. 关于首页和contact页面翻页以及动画执行的问题
  • 最一开始看到这个原网站的时候,觉得这个网站做的很好看,动画很细腻,在很多网站中选择了这个网站作为结课作品,这个网站的首页分为三屏,每翻到一屏都会执行当前页面的动画。

  • 我最开始的思路是,将这三屏的内容竖着排列好,用一个容器包起来,然后当鼠标滚轮滚动时判断是往上滚动还是往下滚动,然后改变这个外部容器的top值,当每一屏内容进入可视区以后执行动画。

  • 当我按照我的想法做出来以后,我发现了一个问题,就是鼠标滚轮是一个很灵敏的东西,可能滚动一次会触发好几次滚动事件,产生的影响就是可能本来在第一页,滚动一下鼠标直接跑到第三页去了。

  • 后来我就设置了一个开关,一开始为true,当触发一次滚轮事件以后,关闭这个开关,当当前页面动画执行完毕以后再将开关打开,这样就可以继续执行鼠标滚轮事件来翻页了,但是这样的话就又遇到一个问题,就是如果这个动画时间很长,不想等这个动画执行完毕,或者已经看过这个页面了,想快速翻到下一页的时候就不行了。然后我又尝试了用延迟定时器来控制开关的打开和关闭,但是都不算太理想。

  • 然后我就去网络上寻找解决方案,找到了一款应用范围很广的插件 "fullpage",仔细的研究了一下功能,发现很符合我的要求,然后我就去询问老师,可不可以使用这一款插件,老师说可以用,使用插件可以提高生产力,只要自己能明白实现的原理就好。然后我就开始学习了这款插件所提供的API接口,将我之前写好的代码全部重写,最后达到了预期的要求。


2.关于页面内一些3D动画的调节问题
  • 这个网站中有很多动画效果,刚刚看到这些效果的时候,第一反应就是使用jQuery中的animate函数来操作,或者使用transition来创造过度效果,但是做了以后就发现有很多问题,角度还有各种动画的执行时间总和原网站有一些差距,为了调节这些动画效果,耗费了大量的时间,但是结果却并不令人满意,总是觉得哪里差点什么。

  • 在对比原网站效果的时候,浏览器的控制台打开着,我发现原网站的运动元素在 css 样式中很多都添加了 animation 属性。Animation属于css3的属性,一开始在学习的时候觉得很简单,感觉就是设置一个元素运动的动画,可以设置运动时间,运动次数,仅此而已。但是我发现我想的太简单了,去网上查询了有关 animation 接收的参数,发现居然有8个之多,不仅可以设置运动时间,运动次数,还可以设置运动形式,延迟时间,是否逆向播放,播放结束后状态等等。

  • 仔细研究了animation属性以后,发现之前遇到的状况基本上都解决了,但是还有一点小问题没有解决,在页面中有几块涉及3D动画,但是调节了很久,发现角度看着都不自然。然后又继续去搜索有关transform的问题。之前就听说过 martrix 矩阵,但是从来都没有仔细研究过。通过学习,知道了矩阵中每个数字代表什么,需要怎样的效果要调节哪些参数等。

  • 在做这个作品的过程中,我发现了自己在一些方面的不足,并及时的补充了这些知识。做完以后我觉得我成长了许多,对一些以前一知半解的东西也有了比较深入的了解。

  • 最后我想说,人生的意义在于不断挑战自我,生命不息,学习不止!

祝福 韩旭 未来职场发展一帆风顺、一路平坦!


- 韩旭 个人小档案 -

  • 男生
  • 2年工作经验
  • 手机:187 0165 4520
  • 邮箱:m18701654520@163.com

  • 课程咨询QQ:2852509866、2852509867、2852509868
  • 课程咨询电话:010-57269690
  • 客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

打开微信扫描二维码,用手机看视频:

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