轩枫阁

首页 / 创意

基于Canvas实现的炫酷3D动画大背景

前言

HTML5 中新增标签Canvas,Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。利用JS,可以实现一些超炫酷的效果。本文所介绍的是基于Canvas实现的炫酷3D动画大背景。

案例一

原版

QQ 官网 http://im.qq.com/pcqq/

demo

http://xuanfengge.com/demo/201411/vector/demo1.html

使用

为方便大家使用,轩枫阁已将主体代码抽出,并示范使用方法(具体看源码),只需加载相关JS并调用即可。不依赖jQery,但是需注意代码执行顺序。

特点

改变3D大背景块颜色,清晰可见,适用于文字较少、加以配图的页面。 查看全文

2014/11 15  周六

HTML5程序员的浪漫爱心表白动画

简介

我们程序员在追求爱情方面也是非常浪漫的,某位同学利用自己所学的HTML5知识自制的HTML5爱心表白动画,画面非常温馨甜蜜,这样的创意很容易打动女孩,如果你是单身的程序员,也赶紧来制作自己的爱心表白动画吧。

在线演示

http://xuanfengge.com/demo/201409/love/

程序源码

https://github.com/xuanfeng/HTML5-love-you
查看全文

2014/10 12  周日

前端新闻播报-第三期201410

现在来为大家播报一些前端FE近期所发现的技巧。厌倦了陈旧的理论描述,来看看又有什么新技巧吧,绝对新颖。

 

Chrome 34 Beta看点

Chrome 34 Beta新看点:响应式图像、Unprefixed Web Audio和免提语音搜索。其中,不论是电脑、平板、手机还是电视,响应式图像都能让浏览器根据设备而选择不同资源,从而加快页面加载时间、减少带宽浪费以及避免出现内容格式不当。http://www.csdn.net/article/2014-02-28/2818574

 

响应式图片规范

src-N 已死,<picture>走上复兴之路。现在srcset可以直接单独应用在img元素上,简单情况下,不再需要 picture 和 source 元素。src-N 规范为响应式图片所做出的贡献将被载入史册,感谢 Tab Atkins 的努力!最新规范:http://t.cn/8FdEpqO 查看全文

2014/10 07  周二

如何关闭百度的关键词个性化广告

前言

平时浏览其他网站的时候,可能会遇到网页中存在一些自己再百度搜过的关键词广告,瞬间用户感觉自己的隐私暴露了,因为刚才搜的东西竟然出现在了其他的网站上。因为百度的一部分收入是来自广告,而要达到精准的广告投放,就必须对用户进行分析,所以百度采用在客户端存取cookie的方式来记录用户已搜索的关键词,并针对收集到的关键词进行广告投放。当然了本地cookie不会上传泄露,所以用户请放心,这个广告专属于你,只有自己能看到。

但是某些用户就会觉得很心塞,广告的出现我们不能控制,但是广告的内容我们是可以控制的。

如何关闭

途径:百度自己有推出这么一个个性化配置工具设置,可以让用户选择关闭个性化推广信息。

简介:为了在您访问百度联盟网站时,向您推荐与您更相关或您更感兴趣的推广信息,百度联盟通过cookie记录您的偏好信息(不涉及任何指向您个人信息);如果您不希望百度联盟使用记录到的偏好信息向您推荐个性化推广信息,可以通过下方按钮选择停用,停用后百度联盟将不会再根据您的偏好信息向您推荐个性化的推广信息。个性化配置工具只适用于您当前使用的计算机上的当前浏览器。并且,当您删除当前浏览器的cookie后,系统会自动重置您浏览器的个性化配置工具设置。

地址http://www.baidu.com/duty/safe_control.html 查看全文

2014/08 22  周五

元素视差方向移动jQuery插件-类似github 404页面效果

前言

视差滚动,大家也许并不陌生。但是对于视差方向移动,你是否有见过效果呢?看官请进来瞧瞧~

demo

轩枫阁404页面http://xuanfengge.com/demo/201406/404/

github 404页面https://github.com/404

说明:轩枫阁的404页面灵感来自于Github 404页面效果,并增强了交互。同时轩枫阁的第一个404页面效果是腾讯公益404寻找孩子页面,现在的版本是二次改版,增强了交互,即进入404页面后,需要在当前页面中充当福尔摩斯角色,通过线索寻找到返回首页的入口。

视差滚动

简介:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。

示例(最后一个专题):http://www.xuanfengge.com/funny/

视差方向移动

简介:这个名称是博主自己起的→_→。即多个元素跟随鼠标移动方向,以不同的速度和距离,在同一个方向上进行移动的交互。

插件:使用的是shake.js这个jQuery插件。首先要先加载jQuery才会生效。

下载shake.js 查看全文

2014/06 30  周一

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子