当前位置:首页 > 建站知识 > 详情
sousuo
sousuo

网站前端能力金字塔-告诉你网页前端需要掌握这些能力

上传时间:2021-12-17            浏览次数:112

今天永易搜建站绘制了一个“网页前端能力金字塔”,分享给大家。同时探讨一下,网站前端需要哪些方面的技术和制作能力,才可以做出精美高端的网站:

网站建设前端能力金字塔

一:基础能力:DIV+CSS布局架构

以往的table架构因为比较古老就不再说了,现在基本都是div+css的布局架构。这个里边其实还可以有一些延伸的细节知识,比如:

(1)基础div+css

(2)H5+CSS3新特性布局,如使用弹性盒子、媒体适配实现响应式架构

二、点击悬浮基础特效

这个就是比较基础的特效了,比如鼠标悬浮效果hover、点击响应效果active,这些并不难。难就难在合适的地方使用合适的效果,知道怎么做出来用户体验好。这也是稍微进阶一点的功能了。

只有基础的架构能力不错,再加上会做一些简单合适的特效,才可以做出差不多的网站。

三、入场动画

这个很容易被人忽略,所以我们单独拿出来说。jquery下有wow.js和aos.js可以使用,轻松地完成入场动画制作。但也要注意,怎么样页面才可以更协调,效果才可以更好。知道哪个地方是从下方进入,哪个地方应该左右开弓,一起进入。延迟时间、执行时间,都要合适,需要一定的动画美感。

这些入场动画有现成组件,但要调整的好,需要一些经验

四、组件特效

这里边就比较多了,有的组件(插件)简单一些,有的复杂一些,要多多摸索各种各样的组件,比如常见的有:

(1)superslide 下拉菜单、轮播、切换

(2)swiper 轮播、切换

(3)lightbox 相册

(4)wow、aos 入场动画也是一种组件

(5)lazy 延迟加载

(6)layer 弹窗、相册

……还有很多常见的jquery插件,有的可以直接使用,有的需要进行一些简单的样式修改,还有的需要做一些拓展开发,API接口开发等等。这里边可以延伸的还是不少。

五、SVG、CANVAS高端特效

SVG主要是基于适量绘图的一种动画,而CANVAS是可以进行图片合并之类,所以这样的一些特效也很重要。比如说有人做出来一些粒子特效,线条特效,都很高端,效果很好。也有人把LOGO做的很炫酷,就是使用这样的高端特效。

普通网站用的少一些,但高端网站,少点这样的特效就显得档次上不去。

六、AJAX交互

很多人可能觉得ajax交互很简单,其实并没有那么简单。这里边有很多可以延伸的,比如说点击前、点击后的效果呈现,他是一整套的基于动画、点击交互效果、数据交互的解决方案,而不应该只仅限于把内容获取到。比如一个按钮,点击前的文字背景,点击中的文字背景,点击后的弹窗提示,这些都要考虑到位。不同的数据,返回不同的效果,这些全盘考虑了,才是真正把ajax掌握好了。

当然,对于网页前端,我们今天讲的也仅仅是基于jquery架构的h5网站而已,有的可能还要用到vue架构、或者React架构,就更考验对JS和前端展现的掌握了。所以,网页前端是一个可以深入研究,不断进取的技术门类,具体有多少成就就看你想要研究多深了。

发表评论
请遵守网络文明公约,理性发言
访客头像

还没有人来评论,快来抢个沙发吧!

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们