轩枫阁

首页 / Web前端 / CSS / PFold-实现纸张展开/折叠效果

PFold-实现纸张展开/折叠效果

前言

这是一个可以使得元素拥有像纸张一样的展开特效来显示更多内容的高度实验性jQuery插件。其中展开方向的步骤和数量都可以用参数指定。

简介

PFold是一个可以使得元素像纸张一样展开效果的高度实验性插件。一个元素使用3D效果来展开展示更多其他内容。这个效果的实现原理是,一个元素有许多层次的折叠,其中每展开一次。元素的高宽都成倍增加,所以可以模仿一张已折叠的纸张的展开效果。

有很多参数提供选择,如每个展开/折叠步骤的方向和步数。

对于不支持CSS 3D transforms 、 transitions的浏览器,这里会提供一个回调的方法,也就是直接显示大页面,没有过渡的效果。

Demo及源码

社招页效果

预览:http://xuanfengge.com/demo/201404/Pfold/

源码:https://github.com/xuanfeng/Pfold

浏览不同配置下的3个demos

Github源码地址

https://github.com/codrops/PFold

使用

使用该插件,需要的主题HTML结构如下:

最后内容的大小将取决于初始内容的大小(在CSS中设定)、折叠的方向和折叠步骤的数量。例如,具有200px初始宽度和高度的元素,折叠方向为下、左,这2次折叠最终会产生一个400px宽高的元素。
插件调用方法

参数配置

下列参数选项可用:

本文标题:PFold-实现纸张展开/折叠效果 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
241/470
243/470

相关阅读

文章评论

  • demo页面的样式在大屏下有点问题,可忽略 – –

  • 感谢分享~~~~~~~~~~~~~

  • [可怜] 感谢分享~~~~~~~~~~~~~

  • [可怜] 感谢分享~~~~~~~~~~~~~

  • 看到你招聘的那个效果做一半做不下去了正好看看

  • 真棒@!

  • 真棒@!

    • 真知棒!

  • 原来是这样做的呀,学习学习

    • 插件实现的,会用就行咯

  • 功能很赞 收藏了 以后可能要用到啊

    • 创意,需要的时候可用到

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

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

    [返回曲谱列表]

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