Paperfold CSS

Fold divs like paper

이용 기술 자바스크립트, HTML5, CSS3, 모바일,

  • 조회수 18629회
  • 댓글수 22건

현재 데모에 대한 개발자 댓글

I'm currently working on 'buddycloud', a federated social network. This is a proposal for a visual folding-effect for hidden comments.

The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

22 건의 댓글 있음

새로운 데모를 추가하려면 로그인하십시오.

  1. rudolfrck에 의한 댓글

    Great demo! Love the concept.
    Only challenge is that you are animating the height property, which gives poor performance on almost any mobile device because of the repaints. If this could somehow be done with translate or anything similar it would greatly increase the performance.
  2. mrflix에 의한 댓글

    Rudol, great point.
    While developing I checked it using Safari's awesome hardware-acceleration debugger and wonderd where the repaints come from. Now as you name its obviouse that it's triggered by the height. Changing that to a translation on the y-axis seems not to hard to implement: I can move everything down via translation. It just seems quite complex if there are following posts. Can I move them down using the normal element-flow (e.g. no translation) without redraw?triggers
  3. onkelyoo에 의한 댓글

    great job (Echt man krass :D). I just started learning HTML, CSS and JS but this is really nice. RESPECT! Greetings from Hamburg!
  4. mrflix에 의한 댓글

    Hey, schön was aus Hamburg zu hören. Da muss ich bald mal hin tuckeln - is ja nich weit von Berlin. Einfach dran bleiben - bin vor drei Jahren auch am Anfang gestanden. Es macht echt Spass, wenn du zu dem Punkt kommst, an dem du einfach alles basteln kannst so wie du es dir vorstellst.
  5. IvanMoreno에 의한 댓글

    Nice stuff!
  6. doktor에 의한 댓글

    Very sexy - love the effect... but... change height to 344 and click Open - goes into endless loop and never completes task - Chrome, latest cut at the time of writing
  7. mattx에 의한 댓글

  8. Subbu에 의한 댓글

    Its a great, demo, but i find some problem with it.
    If i adjust "time","3d" everything is fine.
    When the height is adjust (not the default) to 230 or something, the timer bar goes left-right and back
    Is it a bug or something

  9. apaatsio에 의한 댓글

    Very nice. Have you assessed the performance? On a new desktop it seems to work fine but how about mobile devices?

    And I noticed the folding doesn't work with canvas elements. The folded version only shows an empty canvas even if the original canvas had some graphics in it. I believe the cloning of elements loses the canvas data and you need to redraw each canvas clone separately.
  10. mrflix에 의한 댓글

    Oh yes, makes sense that the information on canvases gets lost on the way.
    I tested the demo on an iPod touch (4th gen.) and an iPad 2 and it performed well.
    The performance bottleneck lies in the cloning of the elements. I see two solutions for that: 1.) background: element ( and 2.) arbitrary folds - fold for each div. Therefore the animation has to be calculated in Javascript - so that's no optimal solution. Though - one might be able to generate a fitting bezier curve for every slide and then animate via css-transitions.
  11. RaineDragon에 의한 댓글

    Great idea, love the way it looks, but having it move all around makes it hard to click on the show more comments on the actual page. I use a wacom tablet + Pen set, and my "clicks" are more likely to be interpreted as motion by the computer than a mouses' clicks. So I had to click a good 5-6 times before I stopped slightly wiggling the whole thing and actually opened it. I have to wonder if people with touch-screen devices have the same issue?
  12. bedex78에 의한 댓글

    In Firefox, it doesn't render & perform very well, though.

    Anyway, here's a good implementation:
  13. bedex78에 의한 댓글

    And here:
  14. abhixecutor에 의한 댓글

    love it :)
  15. devcd에 의한 댓글

    Great effect. Is there a way to have the same effect in Internet Explorer 9 using a javascript library like Jquery?
    1. mrflix에 의한 댓글

      No, no there is no way :-( It should work in Internet Explorer 10 though.
  16. mplungjan에 의한 댓글

    I lose Betty and Gero's pictures on latest Chrome on OSX Mountain Lion after I expand
  17. nicedice에 의한 댓글

    Hi, sweet demo - hats off to you sir!
    Is there a way to get the paperfold effect horizontal not vertical? I've had a quick look through your code and can't see any easy way apart from re-writing paperfold.js - this would be a hard task for me as I'm not the best at JS.
  18. tank에 의한 댓글

    well done!
  19. dnordstrom에 의한 댓글

    Great work, looks fantastic on Aurora (currently Firefox 27.0a2, about to update).
  20. wpgra에 의한 댓글

    Nice stuff
  21. FloRida에 의한 댓글

    Life's too short. Love, live & regret nothing

About this Demo

소스 다운로드 124.57 KB · ZIP 파일

현재 데모는 Public Domain (where applicable by law) 라이센스 하에 공개되고 있습니다.