js动效,html动效

前端的js学的不是很扎实，是继续学好基础还是做项目

继续学好基础。

js是学习一切的基础，只有把基础学好，学扎实了，才能在做项目时游刃有余。

前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，合适的动效设计，给用户带来极高的用户体验。

CSS3动画和js动画各有什么优劣

CSS3的动画的优点：

1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）

2.代码相对简单

但其缺点也很明显：

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现（如滚动动画，视差滚动等）

JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。

canvas圆点动效图

我们发现很多动效都和canvas有关，我们可以绘制一块canvas作为背景，可以和canvas动画相联系，下面我们就绘制一块移动的小圆点动效图。

在HTML上canvas只需要一句话来展示，因此canvas的动画效果主要通过js来实现。在HTML上：

为了使canvas和页面上其他组件一同显示，且不影响页面其他组件展示，我们将canvas的position设置成fixed:

1、在js中，先获取画布： var? canvas? =? document .getElementById( 'myCanvas' );

2、渲染上下文：元素创造了一个固定大小的画布，它公开了一个或多个 渲染上下文 ，其可以用来绘制和处理要展示的内容。我们将会将注意力放在2D渲染上下文中： var? ctx = canvas .getContext( '2d' );我们可以根据这个ctx来判断浏览器是否支持canvas。

3、初始化数据，设置canvas的大小：我们将宽高设置成页面的宽高：

4、为了使小圆点不那么单调，我们设置了彩色效果，定义了一些函数来设置颜色：

5、我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个原型对象。可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象通过这个属性，让实例对象也能够访问原型对象上的方法，绘制方法挂载到点对象上：

6、圆点生成以及移动：

7、最后将动画效果设置上去：

如果使用这样的canvas作为背景，会看起来更加生动，效果更好。

零基础学js会吃力吗？

我尝试着来回答这个问题，因为以前自己也有这方面的经历和困惑。

由于自己是CSS出身，一直以来只对CSS方面的话题感兴趣，而且也一直没有停过对CSS的探究。而对于JavaScript来说，早在很多年前都想学，但一直没有动力或者说没有兴趣。

兴趣才是学习的一种最佳动力

记得在2013年开始我就常抱着JavaScript高级程序设计这本红皮书，可是每次抱起来就没多久被放下，重心又回到了CSS上。主要原因有两点：

没有压迫感：从事的工作主要是以CSS为主，对于JavaScript几乎没有触达，这也应了那么一句，没有压力就没有动力

没有兴趣：对JavaScript只是想学，而且知道学了对自己的好处，但始终没有提起兴趣，所以就没有动力去坚持学习

后来随着技术的革新，时代的变更，发现不懂JavaScript对自己的发展和学习都有很大的限制。比如说，我学习CSS的时候，需要写一些测试案例，如果不具备JavaScript的能力，写测试案例非常的费用，如果你写教程的话，对读者也没有一个更形象的展示。

再加上，进入了一个新团队，业务上基本离不开JavaScript，特别是Vue,React这样的框架出来之后，如果不懂JavaScript，那么更是举步维艰，这也倒逼自己开始去学习JavaScript。

怎么学习JavaScript呢？对于我而言，只看书或只看教程，甚至看视频是不够的，还是无法提起我对JavaScript的兴趣（虽然有工作压力，业务压力，学习压力，环境压力等在追着我向前）。既然知道这个原因所在，那么就需要想办法去解决这个问题。而解决这个问题却又不是刻意去解决的，也是在一次无形中解决的。

前几天，工作内容主要是围绕着动效转，那么动效除了CSS是实现方式之外还有很多其他的方式，比如有很多优秀的JavaScript库，不懂JavaScript就无法去了解这些，更无法助力自己。另外就是Canvas，为了动效实现更具多方面的技巧，开始在学习Canvas，就在学习Canvas的过程中，让我感觉到原来JavaScript也是这么的有意思。当然，在学习Canvas的时候，也只是学习一些基础的API，但这对我来说已经是很大的变化了，因为从这些基础的API能力上，能让我写一些简单的效果出来，最为重要的是让我对JavaScript有了兴趣。

经过一段时间Canvas的学习之后，发现不具备JavaScript的基础是不够的。从那开始，我注重JavaScript的基础学习，从DOM的操作开始，简单点说，怎么对DOM进行增、删、改、查等操作。然后在操作DOM的时候会涉及到事处处理，那又开始会去学一些JavaScript中有关于事件方面的知识。

就是这样，在学习一个新的东西的时候，总是会涉及到另外一部分未知的点。如果想打通这些点，就需要去学未知的点。也就是这样一环道一环，我一直在坚持学习一些JavaScript的基础知识。

随着React和Vue的出现，自己工作中会用到相关的知识，那么在工作中总是会碰到一些问题，那么这些问题也是倒逼我去学JavaScript领域中未知的知识点。比如，函数，继承，设计模式等。虽然这些对我来说掌握的不多，不深，但也对自己而言也是一个较好的开始。我在想，只要坚持，总是会有收获的。

随着代码写得多了，就会想去了解其中的概念和原理，这个时候再重新抱起书本，获取自己需要的知识点，感兴还是蛮有意思的。

希望我的回答对你有帮助

前端 | 利用particles.js实现粒子动效

最近做了一个PC站首页demo，为了让页面不至于太死板，在背景上给一些模块加入了这种粒子效果，

移动端demo：

PC端demo：

线上test：

如果需要看源码实现可以在github上看看：

具体实现：

配置可参考：

当然也可直接看

通过不同的配置可以实现很多不一样的效果哦。动手去试试吧。

没做这个之前，都不知道这叫什么，只知道有时候会在一些网站上看到，也没太注意，真正想要用的时候，不知道去搜什么，所在在找的过程中也花了一点时间，如果你也需要这种效果，那么这篇文章适合你看看哦。

不是每一次努力都有收获，但是，每一次收获都必须努力。加油。