A fancy 3D effect for a mobile app showcase where the app screens animate to a layered stack.
Today we’d like to share an experimental 3D effect with you. It
involves a 3D mobile device and some mobile app screenshots. When
clicking on a toggle button, we’ll animate the mobie device to rotate
and we’ll move each screen so that we have a layered view in the end.
You have surely seen this kind of presentation of apps before and we
thought it might be fun to do it in CSS.
The idea is to position the mobile device with an slight initial rotation:
Then we apply a class to the wrapper which will make the device transition to a second position where the screens move out in a layer stack. Effect one is the following:
The second effect has a different rotation:
And the third one will also show some labels:
The screens are anchors so that one can actually link them to eventual info pages. There are a lot of possibilities here, go nuts.
There is a SCSS file included for dealing with some dimension variables of the device and some other variables.
The 3D phone includes a technique for the rounded corners involving pseudo elements for the sides, first implemented by brilliant web designer and developer Jonathan Levaillant.
source: http://tympanus.net/codrops/2013/08/01/3d-effect-for-mobile-app-showcase/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29
The idea is to position the mobile device with an slight initial rotation:
Then we apply a class to the wrapper which will make the device transition to a second position where the screens move out in a layer stack. Effect one is the following:
The second effect has a different rotation:
And the third one will also show some labels:
The screens are anchors so that one can actually link them to eventual info pages. There are a lot of possibilities here, go nuts.
There is a SCSS file included for dealing with some dimension variables of the device and some other variables.
The 3D phone includes a technique for the rounded corners involving pseudo elements for the sides, first implemented by brilliant web designer and developer Jonathan Levaillant.
source: http://tympanus.net/codrops/2013/08/01/3d-effect-for-mobile-app-showcase/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+tympanus+%28Codrops%29
RSS Feed
Twitter
Facebook
0 komentar:
Post a Comment