国外仿照flipboard的一个jquery操作示例

原文:http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/

EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD

An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.
ADVERTISEMENT
Free Website Builder

Experimental Page Layout Inspired by Flipboard

VIEW DEMO DOWNLOAD SOURCE

Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.

FlipboardPageLayout01

For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. The images are licensed under the Creative Commons Attribution-NonCommercial 2.0 Generic License. The placeholder text is byhttp://hipsteripsum.me/.

FlipboardPageLayout02

Please notice that this is very experimental and just a proof-of-concept. It was tested in the latest versions of Safari, Chrome and Safari Mobile. The behavior is unfortunately not as nice as expected in Firefox.

Free Website Builder

There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Let us know about your experience with it and how it performs.

FlipboardPageLayout03

Some of the jQuery plugins we are using for this:

  • History.js for keeping track of the current state/pages
  • TouchSwipe for dragging and swiping the pages
  • Modernizr for checking browser support of the CSS properties

The HTML is build up of a main wrapper with the class container and the ID flip. Inside, we’ll have all the pages, the first one being the cover and the last one being the back of the booklet. The other pages will contain some title element and boxes. These boxes will each need an additional “height” and “width” class which will give the element percentage-based dimensions. For example, w-50 is a class that will give the element a width of 50%. Depending on how a page should be laid out, we would add a fitting set of items:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
< div id = "flip" class = "container" >
     
     < div class = "f-page f-cover" >
         <!-- ... -->
     </ div >
     
     < div class = "f-page" >
         < div class = "f-title" >
             <!-- ... -->
         </ div >
         < div class = "box w-50 h-100" >
             < div class = "img-cont img-1" ></ div >
             < h3 >Headline < span >Published May 7, 2012</ span ></ h3 >
             < p >Some text</ p >
         </ div >
         < div class = "box w-50 h-100" >
             <!-- ... -->
         </ div >
     </ div >
     
     < div class = "f-page" >
         <!-- ... -->
     </ div >
     
     <!-- ... -->
     
     < div class = "f-page f-cover-back" >
         <!-- ... -->
     </ div >
 
</ div >

We are applying some “tricks” for making everything work responsively. The images are background-images and we set the background size of that element to “cover” while leaving the width and height fluid, in percentages. That’s of course not how it should be done. But it’s just for demonstration purpose. The teaser text is already loaded, and just “cut off” because the box is set to overflow “hidden”. To make it look smoother, we’ve just added a pseudo-element with a white to transparent gradient which covers the last bit of the box.

FlipboardPageLayout04

A great help for creating responsive layouts like these is this:

1
* { box-sizing: border-box }

which finally got the attention it deserves thanks to this article by Paul Irish. When laying out elements using percentages it really comes in handy to use the border-box value since we can for example, define paddings in pixels and not break our 50% width box.

We will use jQuery Templates for creating the book structure:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< script id = "pageTmpl" type = "text/x-jquery-tmpl" >
     < div class = "${theClass}" style = "${theStyle}" >
         < div class = "front" >
             < div class = "outer" >
                 < div class = "content" style = "${theContentStyleFront}" >
                     < div class = "inner" >{{html theContentFront}}</ div >
                 </ div >
             </ div >
         </ div >
         < div class = "back" >
             < div class = "outer" >
                 < div class = "content" style = "${theContentStyleBack}" >
                     < div class = "inner" >{{html theContentBack}}</ div >
                 </ div >
             </ div >
         </ div >
     </ div >           
</ script >

The trick is to create a left side and a right side of a page, hiding half of each side to make it appear as one.

Before we call our experimental plugin, we need to check browser support first:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type= "text/javascript" >
         
     var $container  = $( '#flip' ),
         $pages      = $container.children().hide();
     
     Modernizr.load({
         test: Modernizr.csstransforms3d && Modernizr.csstransitions,
         yep : [ 'js/jquery.tmpl.min.js' , 'js/jquery.history.js' , 'js/core.string.js' , 'js/jquery.touchSwipe-1.2.5.js' , 'js/jquery.flips.js' ],
         nope: 'css/fallback.css' ,
         callback : function ( url, result, key ) {
             
             if ( url === 'css/fallback.css' ) {
                 $pages.show();
             }
             else if ( url === 'js/jquery.flips.js' ) {
                 $( '#flip' ).flips();
             }
     
         }
     });
         
</script>

If there is browser support for CSS 3D transforms and transitions we’ll load all the other necessary scripts and call ourflips plugin.

Please note again that it’s only experimental, but nonetheless, I hope you find it interesting.


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值