首页

关于

【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope

使用静态图片制作动画的插件:JZoopraxiscope

在线演示

今天介绍的是一个帮助大家使用静态图片制作动画电影的jQuery插件  -  JZoopraxiscope

JZoopraxiscope是一个jQuery插件,灵感来自于第一台电影投影机。除了jQuery,同时也使用了jQuery UI并要求所有的帧都是水平放置的单一图片中。你只需要通过调用一个定义图片尺寸和帧的方法就可以让它开始正常工作了。 JZoopraxiscope 还提供了播放和停止按钮。虽然听起来比较复杂,但是只要你有足够多的灵感和创造力,你能将它发挥到极致。使用它不仅美化了你的页面,还更加的更突出了你的web页面内容和效果。还等什么,快来试试吧!

标签: 简报, jQuery, jQuery插件, 动画, animation, jquery ui, JZoopraxiscope

阅读更多

最新的Javascript和CSS应用技巧荟萃

随着前端技术的发展,javascriptcss在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢!

CSS动画和过渡效果

随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令人惊叹的效果和体验,这里我们将挑选最棒的特效,希望大家能够从中受益。

使用jQuery和CSS3创建一个全屏幕幻灯效果

使用jQuery和CSS3创建一个全屏幕幻灯效果

分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果

介绍一个使用jQuery实现的缩略图逼近效果。主要的想法是当鼠标接近缩略图后,当前的缩略图会放大,并且周围相邻的缩略图也会相应变大一些,当你移动鼠标时,会影响移动方向上的缩略图大小变化

分享使用jQuery和CSS实现的一个超酷缩略图悬浮逼近效果

互动的CSS3光线效果

使用3D变形,CSS梯度和Mask来来实现的光线效果,使用box-shadow和transform实现的阴影。

Interactive CSS3 Lighting Effects

标签: js技巧, js荟萃, js应用, javascript, css, css3, animation, transitions, transforms

阅读更多

超酷HTML5和CSS3实现的登录及其注册功能表单

超酷HTML5和CSS3实现的登录及其注册功能表单

在线演示  本地下载

过去我们开发登录和注册功能大都使用javascript来实现,今天我们介绍的这个登录及其注册表单不走常人路,使用纯CSS3和HTML5来实现同样的功能。

这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。主要的想法是展示登录表单并且提供一个链接可以转向注册表单。

请大家注意这里只是一个简单的演示,不是所有的浏览器都支持:target,如果你需要在产品环境中使用,你需要使用对应的代码来处理对于老浏览器支持的fallback。

HTML

在html代码中,我们构建俩个表单并且把第二个表单隐藏。如下:

<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 …

标签: css3, html5, animate.css, animation, :target

阅读更多

分享10个超级javascript动画框架

日期:2012/01/13  来源:GBin1.com

Javascript能够帮助你方便的实现各种动画特效。下面我们介绍10款javascript的动画框架帮助你开发基于JS的动画,希望大家喜欢!

1. Raphaël

一个非常小的JS类库能够帮助你简化web的矢量图形的开发。 如果你想创建自己的制定图形或者图片切割或者旋转,使用这个类库可以轻易的实现。具体例子可以参考这个教程

分享10个超级javascript动画框架 gbin1.com

2. Processing.js

一个开发编程语言,适合任何希望不使用flash或者applet来开发图片,动画和互动web应用的开发人员。Processing.js使用js来画出图形和操作图片,急于HTML5的canvas元素

分享10个超级javascript动画框架 gbin1.com

3. script.aculo.us

提供给你一个简单,跨浏览器的用户界面JS类库,帮助你快速的开发web应用和网站

分享10个超级javascript动画框架 gbin1.com

4. Pixastic

一个实验性质的类库帮助你实现一个多样华的js图片操作。支持的特效包括灰度,反转,亮度/对比调整,饱和度,模糊等等

分享10个超级javascript动画框架 gbin1.com

标签: javascript框架, javascript动画框架, js框架, js动画框架, javascript, animation, frameworks

阅读更多

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

日期:2011/12/20  来源:GBin1.com

分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容

在线演示  本地下载

这个教程将实现一个页面部分内容突出显示效果, 大家可能经常见到一些页面组成内容比较多,可能会分散用户的关注点,使用部分内容突出显示,而模糊其它内容会使得用户能够比较专著的阅读页面中自己关心或者感兴趣的内容,今天这个突出内容显示效果就是为了解决这个问题而设计的。

在这个教程中,我们使用了CSS3的transition属性,所以你需要使用现代浏览器来浏览效果,比如:Safari和Chrome。

HTML标签

以下HTML标签包含了页面中需要显示的众多内容块:

<section class="ib-container" id="ib-container">
<article>
<header>
<h3><a href="#">Some…

标签: HTML, CSS, Javascript, JQuery, css3悬浮模糊效果, jQuery模糊悬浮, 模糊, 动画, box阴影, 文字阴影, blur, css3, transition, jquery, box shadow, text shadow, articles, scale, transform, animation

阅读更多

分享10个jQuery实现的超酷动态特效教程和插件

日期:2011/12/01  来源:GBin1.com

使用jQuery可以帮助你快速的实现一些非常酷的动态特效,有些时候能帮助你提高用户体验,有时候能够帮助你似的网站更加炫酷。例如在GBin1首页使用的标题宽度变化效,可以有效的帮助用户提高阅读的便利性,一个好的前端人员,应该时时刻刻站在用户的角度看待UI设计。

今天这里我们收集了10个使用特别动态效果的教程,希望大家能够喜欢,如果你能给我们留言,我们将会非常高兴的!

相关教程: 分享10个超酷的jQuery动画教程

1. 动态的标题背景特效

在这个教程中,作者介绍了如何使用jQuery来使你的标题背景动起来,这样使得你的网站更具有活力

分享10个jQuery实现的超酷动态特效教程和插件

在线演示

2. jQuery的 DJ英雄

使用jQuery实现的一个DJ英雄

分享10个jQuery实现的超酷动态特效教程和插件

3. jQuery API

jQuery文档中自带的一个动画应用的例子,如果你仔细研究的话,你会发现其中的奥秘。

分享10个jQuery实现的超酷动态特效教程和插件

4.一个自动移动的视差背景效果

帮助你生成一个视差的背景动画效果

分享10个jQuery实现的超酷动态特效教程和插件

标签: 动画, animation, jquery动画, jquery animation, 动画插件, 动画特效, jquery特效插件, jquery动态特效教程, jquery动态教程

阅读更多

下一页

标签

© Copywrite by gbin1.com, all rights reserved.