精益资源

个人中心
退出登录

jquery+html5+canvas动画表白代码 浪漫情书

分类: JQuery插件>动画效果    

 2575  0
查看演示

canvas真是个好东西,页面动画玩的可真的厉害,本例子就是一个美丽动画心形树叶,早个10年,这一种动画大部分都是flash能搞,现在canvas真的强大。


1.基本使用

  1. 本例子,主要是通过index.html中,调用相关的js来实现的,有几个初始化的地方,配置一下,效果就出来了。
  2. 信封文字,在这里搞了全局变量textDta={}来进行设置,可以参考源码执行修改;
  3. 配置开始时间,计算距离现在多少天多少时间,代码如下:
    1. var textAnimate = eval(Jscex.compile("async", function () {
    2. var together = new Date();
    3. together.setFullYear(2022,8,1); //时间年月日
    4. together.setHours(12); //小时
    5. together.setMinutes(0); //分钟
    6. together.setSeconds(0); //秒前一位
    7. together.setMilliseconds(0); //秒第二位
    8. $("#code").show().typewriter();
    9. $("#clock-box").fadeIn(500);
    10. while (true) {
    11. timeElapse(together);
    12. $await(Jscex.Async.sleep(1000));
    13. }
    14. }));
  4. 修改打开的情书内容:就直接修改html中对应的内容就行。

2.知识点

  1. $(window).resize()的窗口的大小,被经过修改后的事件响应,加固jquery的基础知识。
  2. jquery的自定义函数,加入到jquery基本函数中的方法:
    1. //打字效果,为jquery添加自定义方法函数
    2. //注意this的使用
    3. $.fn.typewriter = function() {
    4. this.each(function() {
    5. });
    6. return this;
    7. };
    8. //方法调用
    9. $("#code").show().typewriter();
  3. 其他都是canvas与有关一些库jscex的使用,有兴趣请参考专门的课程。

关注精益资源-动画效果插件,各种cool组件顺手拈来。

最后编辑:2023-09-17 11:45:20

相关组件

MORE

three.js可旋转地球 javascript动态地球 canvas制作旋转地球

three.js结合图片的处理,添加鼠标与自转动的时间,制作出魔幻的地球旋转效果,犹豫站在月球上观看地球,画面壮观。

 2760  0

css3九大行星 动态网页九大行星 css3动画制作九大行星

css3结合动画,跟div的元素进行结合搭配,就能制作出运动中的九大行星图,各个行星的自转与公转都是根据实际的运行速度进行,只是同时提高了很多倍的运行速度。

 2697  0

css3漂亮水滴效果 动态水滴背景 浪漫水滴壁纸

css3的动态水滴效果,犹如身临其境的窗外水滴效果,充分使用css3的动画animation属性

 2585  0

魔幻版css3登录界面 后台登录页面模版

动态背景魔幻般的css3登录页面,使用简单css3语法实现,对于新手都容易上手,源码清晰,注解完整的页面源码

 2383  0