妙味学员作品 : 致敬经典濒危动物保护网站

简 介

species-in-pieces.com 是世界一家知名的宣传濒危动物保护网站。网站中将 30 余种濒危动物刻画的栩栩如生。在令人惊叹的同时,也让人记住了这些不幸的濒临灭绝的生物,唤醒人们的动物保护意识。

妙味学员 黄瑞迪 对这样的经典网站感到深深的敬佩并为此折服。因此他想运用自己所学技术也同样实现这样的网站,来致敬经典;在学习探索阶段,每一次细致的模仿,都是为了向经典致敬,同时积攒大量宝贵经验,以备下一次华丽的超越。

项目网址

http://project.microbu.com/161114/dongwu/

作品赏析

首先映入眼帘的是一张以红色与黑色为主旋律的开始画面,用三角型拼接成标题,意味着破碎与毁灭!形象的向人们展示了濒危保护动物的紧迫和严肃性。

紧接着标题破碎成了许多碎片渐渐变成了一只栩栩如生吃着小虫的盔犀鸟,仰着头将食物一点点的咽下。微微摇晃的尾巴、抖动的翅膀,闪烁光芒的羽毛向人们介绍着盔犀鸟的如今现状!

通过一张张的动画,网站向我们展示了一个个即将灭绝的物种在一次次的破碎与重组,最终走向灭亡。细微的动作,闪烁的光芒与文字,会让人们深深的记住它们曾经的辉煌与存在!

当可爱小动物在捕捉、吐舌、摇尾、振翅、移动时,你是否感到惊奇?而动物的碎片破裂后又拼接成另一幅动物图像,是否又象征了生命的脆弱与令人惋惜?

要如何才能制作完成这样一件扣人心弦、打动人心的作品呢?其实这些仅仅是通过 CSS / clip-path 就可以制作完成。


下面就让 妙味课堂 北京JS全日制学员 黄瑞迪 带你揭开这背后的秘密吧!以下,是 黄瑞迪 撰写的《项目难点与总结》

开发环境配置

安装依赖 npm install
这个项目展示的是 30 个濒危动物,没有使用 canvas 绘制,而是只使用了 CSS/ clip-path 这个属性,如下:
clip-path: polygon(49% 0, 95% 65%, 11% 94%);

clip-path 的前身其实是 SVG,所以它理应和 SVG 相似,是以点的坐标相连实现遮罩的, 创建一个小的 Demo 非常简单,只需一个 div,就可以画出千奇百怪的造型,这便是整个项目的基础。

  1. width: 200px;
  2. height: 200px;
  3. background-color: #fff88b;
  4. clip-path: polygon(49% 0, 95% 65%, 11% 94%);
运动

如何让它运动呢? 其实也很简单, 那就是 transition。
是的,这个属性支持 transition 补间动画,只需要这样设置,你的“碎片”就会按照你预想的轨迹运动了。

  1. div {
  2. width: 200px;
  3. height: 200px;
  4. background-color: #fff88b;
  5. transition: 1s;
  6. clip-path: polygon(49% 0, 95% 65%, 11% 94%);
  7. }
  8. div:hover {
  9. clip-path: polygon(49% 19%, 95% 85%, 1% 99%);
  10. }

图形绘制

如何使用上述属性绘制就算得上本项目的难点了。
在一个空白页面放入设计图,通过点击每个点,自动计算到页面左边、顶端的百分比。

代码如下:

  1. $('body').on('click', function (e){
  2. var mouseX = e.pageX;
  3. var mouseY = e.pageY;
  4. var shapesoffsetX = $('.polygon-wrap').offset().left;
  5. var shapesoffsetY = $('.polygon-wrap').offset().top;
  6. var polygonswidth=$('.polygon-wrap').width();
  7. var polygonsheight=$('.polygon-wrap').height();
  8. var shapesmouseX = mouseX - shapesoffsetX;
  9. var shapesmouseY = mouseY - shapesoffsetY;
  10. var mousepercentX = shapesmouseX / polygonswidth;
  11. var mousepercentY = shapesmouseY / polygonsheight;
  12. var finalmouseX = (mousepercentX) * 100 ;
  13. var finalmouseY = (mousepercentY) * 100 ;
  14. var normalisedX = parseFloat(finalmouseX).toFixed(3);
  15. var normalisedY = parseFloat(finalmouseY).toFixed(3);
  16. nodecount = nodecount+1;
  17. if (nodecount < 3) {
  18. nodescss = nodescss + normalisedX + '% ' + normalisedY + '% ,';
  19. } else
  20. if (nodecount == 3) {
  21. nodescss = nodescss + normalisedX + '% ' + normalisedY + '% );';
  22. alert(nodescss);
  23. nodescss = '-webkit-clip-path: polygon( ';
  24. nodecount = 0;
  25. }
  26. });

按照这种方式实现了一个能快速获取坐标的工具函数。

当然也有不少问题,点击的精确度并不如预想,图形绘制有间隙,只能通过微调让它对齐,这十分考验人的耐心。

特殊边框的按钮

像上面这种按钮,实际上是通过元素背景配合伪元素实现的,具体代码如下:

  1. .btn {
  2. height: 54px;
  3. width: 54px;
  4. border-radius: 50%;
  5. background: (背景图);
  6. &::after {
  7. content: "";
  8. position: absolute;
  9. top: 5px;
  10. left: 5px;
  11. width: 44px;
  12. height: 44px;
  13. background-color: #64d6e2;
  14. border-radius: 100px;
  15. }
  16. }

通过这种方式,在元素内部创建伪元素定位遮盖该元素背景图,就能达到图中的效果。 而 hover 边框变宽,实际上是给元素加了 transfrom:scale 属性,让元素略微放大,伪元素略微缩小。

动物的微动

动物在运动的时候,非常的细腻,不止一个地方在运动,有时会交替运动,显得十分生动。探究其原理,是类名控制,这就需要设置一个不断循环的定时器,而且要在几个状态间反复切换。代码如下:

  1. setInterval(() => {
  2. b.removeClass("state3");
  3. setTimeout(() => {
  4. b.addClass("state1");
  5. }, 1000);
  6. setTimeout(() => {
  7. b.removeClass("state1").addClass("state2");
  8. }, 2500);
  9. setTimeout(() => {
  10. b.removeClass("state2").addClass("state3");
  11. }, 3500)
  12. }, 5000)

通过 interval 嵌套 timeout 的方式达到微动状态间的切换,每个类名对应每个动物的不同微动状态。第二种微动状态也如上代码,大同小异,这里不做赘述。

动物碎片的闪烁

动物展示的时候会发现,碎片有闪烁的效果,这是通过伪元素实现的。创建一个 100% 宽高的伪元素,添加一个 animation,让其有一个透明度的变化,达到相当于遮罩层的闪烁。通过 scss 循环,可以方便的设定动画执行延迟。代码如下:

  1. .pieces{
  2. content: "";
  3. display: block;
  4. width: 100%;
  5. height: 100%;
  6. animation: shimmer .8s forwards;
  7. }
  8. @keyframes shimmer {
  9. 0% {
  10. background-color: rgba(255,255,255,0);
  11. }
  12. 35% {
  13. background-color: rgba(255,255,255,.1);
  14. }
  15. 100% {
  16. background-color: rgba(255,255,255,0);
  17. }
  18. }

以上,就是实现改作品得技术细节, 黄瑞迪 同学已经给大家作了详细介绍。现在,小伙伴们自己有没有能力也使用这种技术实现一个呢?不妨试试看?

项目网址:

http://project.microbu.com/161114/dongwu/


课程咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 电话:010-57269690

想要了解妙味课堂 Web 前端最新开课消息吗?长按二维码关注吧!

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