预览模式: 普通 | 列表

 昨天群友发出一个网站中有一个导航条出场效果,挺有味道。于是花了2小时模仿成功,我作品在此:

http://258754.com/m/zgl/TweenMax_3D_transform.HTML

 

原站在此:http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D

GSAP范例在此:http://greensock.com/css3/

----------------------------------------------------------------

不查不知道,原来GSAP有如此强大的CSS动画功能,尤其是对于仿3D变换的支持。只是GS官网上的文章虽多,但源码较少,辗转stackoverflow.com找到一些相应的源码。

我个人比较喜欢GSAP来替代CSS动画,GS官网上说是GSAP的时间轴TWEEN类动画,无论是从代码效率还是代码简练度上,都远超CSS动画。至少后者是属实的。这6句代码,如果有用CSS写,会写上一大版。

Javascript代码
  1. <script src="js/jquery.min.js"></script>  
  2. <script src="js/TweenMax.min.js"></script>  
  3.   
  4. <script>  
  5. TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});  
  6. TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  7. TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  8.   
  9. TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});  
  10. TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});  
  11. TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});  
  12. </script>  

 

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6235
客户R 2014/8/26 13:01:50
在?
嘟嘟  14:54:46
 
客户R  14:55:13
你是做flash动画的?
嘟嘟  14:55:23
能做。
客户R  14:56:51
我们有一项目   有个页面需要做几个flash动画     我们这边自己没这方面的人做   希望找个能做这个的
师哥很简单的动画
是个
嘟嘟  14:58:05
我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。
客户R  14:58:43
恩 好   我先给你们介绍下我们做的背景
我们在做一个空气质量预报系统   在对外发布页面希望以动画的方式发布空气质量
场景1:空气质量为优
客户R  14:59:54
小狗两脚走路从狗屋出来;深呼吸,做一个惊讶的笑脸;兴奋的开始做热身运动;四脚着地,欢快的从左到右跑,离开屏幕;
这是其中一个场景   总共四个
7个
嘟嘟  15:00:32
哦,你这是要做创意。这个恐怕费用不低。
客户R  15:01:00
这不算创意吧
这个思路我们已经写出来了   你只要动画实现就ok
嘟嘟  15:01:48
小狗的形象原型什么的,你们设计了没?你们现在只有文字稿,是吧?
客户R  15:02:40
小狗形象有
嘟嘟  15:03:11
深呼吸,做一个惊讶的笑脸----这些都要做创作了。
客户R  15:03:18
 
嘟嘟  15:03:28
相当于做一个微型的动画片了。
客户R  15:03:33
就这个个大头狗   
嘟嘟  15:04:03
这些我做不了。我强项还是在编程逻辑上。
客户R  15:04:17
呵呵   我们这边同行有做过这种动画
哦   好吧
嘟嘟  15:04:30
建议你们联系一下动画(卡通)制作公司或是形象设计公司。
客户R  15:05:02
额?呵呵   我是在广州   但是是长沙人   所以就来长沙找你们了
呵呵
嘟嘟  15:05:10
你这场景是用于网站,还是手机项目?
客户R  15:05:25
系统网站
嘟嘟  15:06:06
哦。动画要做得如此精美?很少见。成本恐怕不低。
客户R  15:07:12
这是很简单的吧
类似这样的
客户R  15:08:19
推荐安装全能绿色的QQ影音播放本文件。
 
嘟嘟  15:08:47
至少我在国内网站上和APP上,很少看到类似做法。
客户R  15:09:17
呵呵
嘟嘟  15:09:25
更多的还是较简练的图象表达。比如我用的墨迹天气这种。
客户R  15:10:05
哎   没办法啊   人家领导要求这样
嘟嘟  15:10:59
今天还看到知乎上一个评论。说 知乎当时在首页上放了一个类似你这样的动画(视频),结果浪费的流量大得惊人。
哈哈,每一个苦B的项目后面,都有一个天神般的领导。
客户R  15:11:30
这不是手机上的   也无所谓吧
哎  政府的大大们   无法评论啊
嘟嘟  15:12:19
你系统访问量不大当然没问题。如果是FLASH,还要考虑跨平台的问题。比如IPAD.
我群里有专门做卡通的牛人。如果你预算在2万以上。我可以介绍一下。
客户R  15:13:05
人家怎样要求   咱就怎样做   没办法啊    咱要他的钱    他自然要咱的命啊
那算了吧   呵呵
嘟嘟  15:13:33
你预算只有2千,你劝你直接自吻吧。
客户R  15:13:56
我们老大也是个门外汉   说几个小视频超过五千    就不提
我能咋整啊
要命
嘟嘟  15:14:08
找刀去吧。
分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 6235

  

最近被不少朋友咨询,是否能做这种手机上的场景交互型小站。特别适合微信上的病毒营销,确实看上去很炫!请用手机扫描上面大图中的任意二维码,就明白我说的是啥...

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 7248

长沙老牌的本土网站-长沙通被关站了

 刚在群里听说,长沙老牌的本土网站:长沙通因为一个帖子有问题,被关站了,于是试了一下,确实首页跳转到了:

http://www.cstong.net/cststop/index.html

现在的言论兼管是比较严呀。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5300

某帅哥A------------------------------------  14:56:51

我们有一项目   有个页面需要做几个flash动画     我们这边自己没这方面的人做   希望找个能做这个的师哥很简单的动画

 

嘟嘟----------------------------------------------------  14:58:05

我现在主要是做HTML+JS动画了。FLASH倒是也能做。你说说具体要求。

 

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5171

应用于“图片数量多、体积大”页面的预加载,会给浏览者带来较好的用户体验,尤其是企业LOGO的提前显示,会让网站呈现出更完整的品牌形象。

 

点击查看DEMO页

 

优点:

1、未加载完成前,正式页面不显示。

2、自定义加载序列、自定义背景颜色变化、背景透明度。

3、参数灵活、调用较丰富,如以下3种加载画面方式。

4、站长dudu加入了时间线动画机制,可在加载原画面基础上,自定义更丰富的JS动画。

5、加载完毕后给出消息,方便自定义调用事件(如消隐掉加载动画、调用新的进场动画等)。

缺点:

- 进度计算,是以图片加载完成的张数(而不是字节数)来计算的,因此加载数字进程看上去不平均。

本测试范例使用的LOGO加载方式,加载过程中,调用了自定义“小光点向上飞行”的动画,为演示方便,只加载了2张大图,加载完成后,即撤去黑底,播放大图动画。

付费100元,可得到完整程序包,含技术文档,及得到站长技术支持。

本站长支付宝帐号:258754@qq.com

Tags: preloader jquery

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5417

之前安装chrome的花瓣网采集工具,老是失败。发现失败的根源是:

1、自己的chrome版本过低

2、无法正常连接chrome网上商店

说白了还是国内防火墙的问题。

今天得到群友共享的新的hosts文件,成功-翻*墙,把chrome升了级,从商店中直接升级了这个插件,立马成功!

 

查看更多...

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 10405

昨天一个网站项目的实际需求:当点击“购买”按钮后,当前货物“飞向”侧边的购物车。设计要求,飞行轨迹必须是一条“曲线”。

----------------------------------------------------

配置信息:

BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件,位置在:com.greensock.plugins,我测试使用的JS有:

<script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>

TweenMax-tween核心库

EasePack-缓动库,如果没有特别缓动,可不加载

BezierPlugin-贝塞尔曲线库,必须

----------------------------------------------------

拟合输出曲线时代码示例--可用于绘制曲线,要结合canvas等绘制引擎:

//输入input:

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//输出output:

{

x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],

y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]

}

--------------------------------------------------------

曲线运动示例----结合TweenMax可直接产生曲线运动

//起点坐标不用放到代码中,以下三个点分别是第2点,第3点及终点

TweenMax.to(document.getElementById("myp"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});

-------------------------------------------------------------------------------------

本插件还有更丰富的功能调用,比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值(比如透明度、角度),详细说明如下(英文):

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 16932

经测试发现jquery 1.11.1都支持IE8,但jquery2就已经放弃了对IE6-7-8的支持。

因此我决定以后就用这个:
 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>
 
顺便说一下,这个CDN地址包含的库超级多,比什么百度的、360的、新浪的都要多得多了,地址如下:
http://open.bootcss.com/
 
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 7592

这个小插件(flash cs6+as3)是我早两年偶然一个朋友给我的。可以直接在flash中调用网页,而且页面可以自由操作,相当于HTML中的iframe。

 

原作者是:

 * @author 五斗米

 * @see http://zwwdm.com

 * @date created 2012/12/24/

查看更多...

分类:flash技术探讨 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5189

 http://www.zzylfz.com/这个今天刚上线的项目中,用到了一个“白云不间断向左飞动”的效果,步骤就2个:

1、制作一个边缘连续的“白云层”,要非常宽以适应较大的显示屏幕;

2、以用下JS来驱动background-position-x

XML/HTML代码
  1. TweenMax.to($('.cloud'),97,{'background-position-x':'-2392',ease:Linear.easeNone,repeat:-1});  

------------------------------------------

另外还用了一个视差效果,当鼠标左右移动时,鸽子和文字会微微的左右摆动。使用的是jquery.parallax.js这个脚本。

分类:我们的作品 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 5844

canvas+createjs制作满天星星旋转效果

canvas+createjs+tweenmax制作满天星星旋转效果,效果跟FLASH类似,但完全兼容IOS设备,已经在IPAD上做过测试。这种制作的主要目的,是为了寻找一种可以代替FLASH的动画方式。

查看更多...

Tags: canvas cr&#101;atejs 星星旋转效果

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 10573

HTML世界销售地图-带交互子菜单

 2014年,网站进入HTML的节奏。为了支持IPAD等设备,网站尽量不用FLASH了。FLASH制作的世界地图(点击查看)被淘汰。

我使用HTML+JQUERY,制作了兼容性更好的世界地图。功能点如下:

  • -CSS定义位置点和国旗
  • -自定义下拉菜单
  • -可根据要求,定制弹出菜单或是更多功能
  • -这里有一个本站真实案例:http://www.fasaniceleste.it/cn/Contact.asp
  • -欢迎定制,传播请保留本站域名。

Tags: HTML地图 带交互子菜单

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5147

 其实一直以来,我都代理这些业务。只不过没有广泛宣传,只给一些自己的客户及朋友使用。最近被代理商送了一个258754.hk的香港域名,还附送了一个代理站,顺便发出来宣传一下。有需要的朋友可以直接向我购买。

跟大代理商相比,我在价格上并无优势。

唯一可以自夸的,就是本地服务与诚实---立足长沙10来年,还没做过任何欺骗朋友的事。许多长沙的朋友,都在使用我提供的建站及售后服务,也得到一些小小的口碑。

 

+ 国际域名注册68元

+ 香港免备案主机298元送建站模板,不需设计,1小时直接成站--非常适合小企业。

+ 微信公众平台+手机微网站,800元,一步到位。

Tags: 域名注册、网站空间、微信企业站

分类:服务报价 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5318