8个jQuery 的CSS Paper Folding Effect插件

我在网页设计中注意到的趋势之一是纸张折叠效果。在本文中,我将向您提供一些资源,这些资源肯定会激发您在Web开发中实现纸张折叠效果。

折叠3D菜单

动画3D菜单的jQuery插件。具有独特3D透视手风琴效果的移动站点/电话间隙和整个站点的面板菜单。此菜单可以是移动网站的基础,也可以是使用phonegap打包为混合应用程序的基础。

折叠3D菜单

奥里多米

oriDomi是一个javascript库,可让您创建一个可以像纸折一样折叠DOM的动画。 OriDomi需要现代浏览器,该浏览器支持CSS3转换,尤其是3D支持。 IE 10及以下版本缺少此功能,但我敢肯定您已经猜到了。

奥里多米-1

Pold

Pold是一个非常具有实验性的jQuery插件,它可以以类似于纸的展开效果打开元素。元素可以在3D中展开以显示其他内容。想法是具有多个折叠级别,其中打开的每个步骤都会使元素尺寸加倍,从而模仿了打开的折叠纸。

pfold-2

折纸CSS

该插件需要一个 dom元素,将其切成片,然后像折叠纸一样将它们排列在3d空间中。

paperfold-css-3

Foldup.js

Foldup.js可让您创建一个“fold up”网站上文字的效果。当用户调整浏览器大小时,文字会折叠起来 以3D效果.

折叠4

jQuery的展开

基本上,这种效果是通过分割大量内容并分别对每个切片的高度和旋转进行动画处理来实现的。每个切片具有多个包装,这些包装控制内容相对于该切片的垂直偏移。总体来说,代码并不是那么复杂,只需要一点数学运算即可(一些基本的操作即可根据旋转角度获得正确的包装器高度)。浏览器几乎可以为您做所有事情。

展开

真须

实验性CSS 3D下拉概念,包含在jQuery插件中。

makisu-6

Sexy Curls jQuery的插件

Sexy Curls jQuery的插件是Elliott Kember的开源jQuery插件,可让您分享页面折叠的美丽。

curl-5

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.