11 个创新的网站滑动效果设计案例展示

图片的滑动展示在网站设计中使用非常普遍,可用于解决方案、产品和服务的各种展示,而借助 JavaScript 和 CSS3 可让这些效果实现起来更加简单。

本文介绍 11 个网站滑动效果设计非常帮的案例供你参考:

Superlover

Superlover

Cool combination of scroll and left with easing animation.

Green Campus Guide

Green Campus Guide

Slider with integrated tooltips and modal dialogs.

Lake Nona

Lake Nona

Take a while to load but it’s pretty impressive slider, a different kind of thumbnail view.

Agence de comminication

Agence de comminication

Unique slider with an animated call-to-action button.

Kyan

Kyan

Another cool slider with a custom made animation.

Create DM

Create DM

A simple and yet elegant slider with CSS3 animation.

2Fly

2Fly

A backward compatible slider with CSS3 rotation. Pretty cool!

Gen 3 Creative

Gen 3 Creative

A content slider with different design on each slide.

Carnation group

Carnation group

One of the famous technique – parallax slider.

7 Days in Havana

7 Days in Havana

Pretty cool concept, sort of like an accordion plus slider!

AppGear

AppGear

Honestly, I reckon this look like a carousel but it has a cool effect on it.

via queness

fool.js:整人专用的 jQuery 插件

fool.js 是一个 jQuery 插件,包含了几种页面特效,可以用来在愚人节的时候整人:

  • 消失的滚动条
  • 莫名其妙播放的音乐
  • 随机消失的页面元素
  • 不间断的弹出傻x的问题
  • 页面颠倒
  • 页面扭曲
  • 页面闪烁
  • 无限循环 -> 浏览器崩溃
  • 页面突然变纯黑
  • 无法点击
  • 整个页面可编辑

 

2012年初的10个绝对让你惊喜的jQuery插件

今天GBin1分享给大家带来10个相当不错的jQuery插件,尤其是第一个和第二个,绝对超棒,希望大家能够应用到自己的项目和网站中。

1. jQuery Geo v1.0a4

来自Applied Geographics的一个开源的地理信息映射展示项目,提供了一个改善的API来满足你的在线地图位置展示。如果你需要快速的找到你目前的位置或者你是个GIS玩家,使用这个超酷插件吧!

jQuery Geo v1.0a4

2. Flippy

一个跨平台的翻转效果插件,允许你翻转任何的html元素。

Flippy

3. ProQuo

一个帮助你鼓励你的读者快速发布内容到twitter的插件。可惜我们用不上,呵呵!

ProQuo

4. blur.js

这个超酷的模糊插件在我们前几天的文章里介绍过,非常酷!

blur.js

5. Metro JS

Metro js是一个帮助你应用metro界面设计的插件。如果你不清楚什么是metro,看看wiki吧。

Metro JS

6. jurlp

非常实用的一个工具类插件,帮助你解析元素中的url。比如,href和src属性。

jurlp

7. jQuery Shadow

创建各种类型的阴影

jQuery Shadow

8. Glisse.js

创建完整自定义的图片浏览,使用CSS3的过渡效果

Glisse.js

9. Sequence

一个jQuery的幻灯插件,使用无限滚动。提供完整的幻灯功能。和普通幻灯的显示方式与众不同

Sequence

10. noty

很方便的帮组你创建alert,success,error和confirmation对话框。并且你可以方便的定位对话框位置

noty

via jquery4u

 

10个绝对让你疯狂的HTML5和JS实验性展示

看看今天我们收集的绝对让你疯狂的HTML5和JS实验展示,这些演示验证了各种框架和超酷互动的性能。大多数的演示都能在Google Chrome和Firefox里流畅的运行,当然IE5并不支持这些演示。

1. Canvas Sphere

由Emil Korngold渲染的一个超酷的3D点装球体实现的2D投影,使用一个非常迷你的3D引擎。这个演示使用z-sorting和alpha motion模糊方式来生成3D旋转感受。看看这个超酷的演示吧!

Canvas Sphere

2. Marbles

简单的物理演示,使用新发布的A3 WebGL引擎。请确认你使用Chrome来查看演示,超酷!

Marbles

3. Noise Field

通过Perlin noise生成的离子轨道特效。移动鼠标来修改颗粒移动行为。点击会生成随机参数。

Noise Field

4. Fishbowl

一个超赞的HTML5测试用演示,由微软开发创建用来测试浏览器的性能。看看你最多能运行多少条鱼吧。

Fishbowl

5. Sticky Thing

丢过去看看是否被粘住了

Sticky Thing

6. Breathing Galaxies

一个动态变化颜色和直径的javascript实现的内转轨迹线演示。你可以使用键盘来修改形状,或者移动鼠标来创建一个新的形状。

Breathing Galaxies

7. Flower Power

另外一个非常不错的实验 – 简单的画图工具,使用花朵来作为笔刷并且使用贝塞尔曲线

Flower Power

8. One Hour Per Second

现在youTube每秒钟会上传1小时的视频。为了更好的说明,他们开发了一个HTML5网站来进行拥有上下文的数字比较。大家看看吧!超酷!

One Hour Per Second

9. Asteroid Belt

图片上的HTML5动画效果

Asteroid Belt

10. Graph Layout

一个互动的强迫式图片布局

Graph Layout

via jquery4u

12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用一些非常强大的jQuery或JavaScript来加强现有的表单元素的功能。

下面我们收集了 12 个很有用的表单扩展插件,提供更好的用户体验:

DropKick

DropKick

创建自定义的下列列表,并附带皮肤支持

Chosen

Chosen

jQuery Chosen Plugin 是一个 jQuery 插件,用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索,多个标签编辑等功能

TextextJS

TextextJS

TextExt 是一个 jQuery 插件,提供对文本输入框的功能扩展,可实现自动完成、标签输入、ajax和过滤功能。

AutoTab

AutoTab

Autotab 是一个用来提供自动 tab 键控制和文本过滤的 jQuery 插件。

jQuery FIle Upload

jQuery FIle Upload

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

MailCheck

MailCheck

是一个用来对email地址进行验证的 jQuery 插件

jQuery Mask Plugin

jQuery Mask Plugin

用来设置输入框输入各种形式文本的 jQuery 插件

NoUISlider

NoUISlider

noUiSlider 是一个很小的 jQuery 插件将 html 对象编程一个滑动块。

Clearfield

Clearfield

实现类似 HTML5 的 placeholder 的效果

jQuery.fn.autoResize

Autoresize

自动根据输入的内容长度对输入框进行扩展的 jQuery 插件,支持 textarea, input[type=text] and input[type=password] 元素.

Limit

Limit

Limit 是一个用来对 textarea 和 input 输入框进行字符数限制的 jQuery 插件。

Password Strength

Password Strength

用来提示密码的复杂强度