advanced iOS style folders page split with jQuery

iOS style folders page split with jQuery

the iOS split page effect in HTML with CSS3 -webkit-animations…

The demo should be viewed in webkit browsers… Safari on Mac OS X does the best job. The iPhone has a late start but the animations look sweet. Chrome is a little slow on 3d transformation and transitions.

iOS 5 webapp

I am currently working on a webapp framework that mimics iOS 5. So I needed to create the effect of the folders on the iPhone’s Springboard.
Splitting a page was not the problem. I am using two divs with the same background image and the positions are set via jQuery.
But how do we get the arrows to fade in and out correctly and get a smooth effect on the iPhone?

HTML5 canvas???

I first thought about using HTML5 canvas and javascript, to cut the images into the desired shape, but with dynamic positions and different backgrounds/Wallpapers a lot of canvases would need to be created and this would definitely increase loading times and probably end with really jerky animations.

CSS3???

Ok.. next thought… CSS.
I am a big fan of CSS, realizing every day, that even though I’m not a greenhorn, there is still stuff I haven’t done.

CSS3!!!

So the main idea for the arrow was, to take a rotated square with a mask at 70%. This square div has another div inside it, which is rotated in the other direction, so it’s in the original page position again.
Now we need to set the background position (we will use jQuery to do this). Using the pseudo-classes :before and :after we can add a box shadow if required.

This is basically the same for the upper and lower arrow.

The animations are pure CSS, using -webkit-animation -webkit-transform: translate3d and -webkit-transition.
This is my first approach with dynamic arrows, so it still needs some tweaking, but if you care, you can try the demo or download and play with the sourcecode.
This is without any license, so use it for whatever you like.

Incoming search terms:

ios folder effect jquery, css back button, ios folder jquery, iphone back button, jquery split page,

About
Latest Posts

Follow me

Gregor Adams

web developer at Codefights

Hi, I am a web-programmer and frontend-developer from Germany.
I specialize in CSS, HTML and JavaScript. As I am a huge fan and also a student of open-source, I try to help other programmers (especially newcomers) as much as I can. I am also very happy for "true" criticism. So feel free to ask any question you like and I will try to give the best possible answer.

Follow me

Latest posts by Gregor Adams (see all)

Forget Lesshat – More-or-less is smarter and faster - April 6, 2014
cross browser custom scrollbars with jQuery and CSS3 – replicating the fading scrollbars from OS X Lion or Mountain Lion - May 21, 2013
arrow button in pure CSS & HTML iOS 6| CSS3 HTML5 Back button - March 9, 2013

Phill

Download link is broken
Phill

Found it: http://webkit-os.pixelass.com/foldertest.zip
Gregor Adams

it’s not up to date though. I fixed a bug that left folders above the first clicked unclickable… I can update it though
User

Great Example !
And so smooth !
Would be great to see an update to this. Maybe making it stable and work with more browsers ?
- Gregor Adams
  
  This was actually developed to work on webkit browsers only, but I guess I could make it compatible to Firefox and IE too.
  There are a lot of new tutorials on my list, I just need to find some time.
  
  Next up will be a JavaScript and CSS3 version of the “tilting tiles” as seen on the Windows-Phone or in MetroUI (Windows 8). It works in Chrome, Safari, Firefox 10 and Internet Explorer 10
Alok kumar saxena

hi there,
i am alok and i am a web developer. when i click on the icon page is going to split but i want when page will split other icon or may dynamic data show underneath. how. please help me.
Thanks
Alok kumar saxena
- Gregor Adams
  this is basically just a proof of concept. but i might write a plugin that generates a view from a
```
    
        
            
        
    
```
Ramandeep Singh

This is a great example! really nice job!

I am having some trouble with CSS3 animations on Android browser (your demo app works fine). Animation in my app is really slow. I need to display a folder view like your example and i am using “transition: height 0.7s ease-in-out;” but it’s really slow on Android. I guess, i have to try to use ” transition: -webkit-transform 600ms;
-webkit-transition: -webkit-transform 600ms;” or -webkit-transform: translateY() to get better performance. Your CSS + JavaScript animation code is difficult to understand. Can you please provide a small example of doing the height animation (using -webkit-transform and/or translateY()) which can perform better on Android.
- pixelass
  
  you can add transform: translate3d(0,0,0) to use hardware accelerated animations.
  - Ramandeep Singh
    
    I already have that in my css but apparently it doesn’t work on Android but your demo works great. So, i guess i have to use translateY() or transform3d() instead of changing the height. It seems like height animation is not hardware accelerated.
    - pixelass
      
      might be.. maybe you can use scale();