-
-
Save netzzwerg/1011917 to your computer and use it in GitHub Desktop.
Lion Mail 3d Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Lion Mail 3d Animation</title> | |
| <style type="text/css"> | |
| body { | |
| font: 12px/15px "Helvetica Neue", sans-serif; | |
| background: #adb0b8; | |
| } | |
| h3 { | |
| margin: 0; | |
| font-size: 12px; | |
| line-height: 18px; | |
| font-weight: bold; | |
| } | |
| hr { | |
| border: none; | |
| border-bottom: 1px solid #ddd; | |
| margin-bottom: 13px; | |
| } | |
| article { | |
| max-width: 512px; | |
| margin: 8px auto 21px; | |
| } | |
| article:last-child { | |
| margin-bottom: 8px; | |
| } | |
| section:not(.hidden), | |
| section.hidden > .slide, | |
| .seeMore { | |
| padding: 0 15px; | |
| background-color: white; | |
| border-left: 1px solid #777; | |
| border-right: 1px solid #777; | |
| position: relative; | |
| } | |
| section.hidden { | |
| height: 18px; | |
| background: transparent; | |
| position: relative; | |
| overflow: hidden; | |
| -webkit-perspective: 360; | |
| -webkit-perspective-origin: 50% 50%; | |
| } | |
| .ready section.hidden { | |
| -webkit-transition: 480ms; | |
| } | |
| section.hidden > .slide { | |
| top: 0; | |
| margin: 0; | |
| height: 0; | |
| width: 480px; | |
| overflow: hidden; | |
| background-color: #aaa; | |
| background-image: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 75%); | |
| -webkit-transform-style: preserve-3d; | |
| -webkit-transform-origin: top; | |
| -webkit-transform: rotateX(-90deg); | |
| position: absolute; | |
| } | |
| .ready section.hidden > .slide { | |
| -webkit-transition: 480ms; | |
| } | |
| section.hidden > .slide.helper { | |
| top: auto; | |
| bottom: 0; | |
| z-index: -1; | |
| background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,0), rgba(255,255,255,1) 75%); | |
| -webkit-transform-origin: bottom; | |
| -webkit-transform: rotateX(90deg); | |
| } | |
| section.hidden > .slide.helper > blockquote { | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| .visible section.hidden > .slide { | |
| -webkit-transform: rotateX(0deg); | |
| background-color: white; | |
| } | |
| section:not(.hidden) { | |
| padding: 15px; | |
| z-index: 1; | |
| } | |
| section:first-child { | |
| padding-bottom: 0; | |
| border-top: 1px solid #888; | |
| } | |
| section:last-child { | |
| padding-top: 0; | |
| border-bottom: 1px solid #666; | |
| } | |
| blockquote, | |
| .level-1, .level-2, .level-3 { | |
| margin: 8px 0; | |
| padding: 0 8px; | |
| color: #144fae; | |
| border-left: 2px solid #144fae; | |
| } | |
| blockquote blockquote, | |
| .level-2 { | |
| color: #006312; | |
| border-color: #006312; | |
| } | |
| blockquote blockquote blockquote, | |
| .level-3 { | |
| color: #540000; | |
| border-color: #540000; | |
| } | |
| .seeMore { | |
| padding-top: 3px; | |
| height: 15px; | |
| width: 480px; | |
| position: absolute; | |
| bottom: 0; | |
| overflow: hidden; | |
| -webkit-transition: 240ms; | |
| } | |
| .seeMore.hidden { | |
| padding-top: 0; | |
| height: 0; | |
| opacity: 0; | |
| } | |
| .level-1, .level-2, .level-3 { | |
| margin: 0; | |
| color: #777; | |
| font-weight: bold; | |
| border-left-style: dotted; | |
| cursor: pointer; | |
| overflow: hidden; | |
| -webkit-transition: 500ms; | |
| -moz-transition: 500ms; | |
| transition: 500ms; | |
| } | |
| .shortend section:first-child blockquote, | |
| .shortend section:first-child blockquote blockquote, | |
| .shortend section:first-child blockquote blockquote blockquote { | |
| margin-bottom: 0; | |
| } | |
| .hidden blockquote, | |
| .hidden blockquote blockquote, | |
| .hidden blockquote blockquote blockquote { | |
| margin-top: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <article class="shortend"> | |
| <section> | |
| <h3>Josheowaa <[email protected]></h3> | |
| We'll talk about it soon<br> | |
| June 6, 2011 00:10pm | |
| <hr> | |
| Night time - sympathize - I've been working on white lies.<br> | |
| So I'll tell the truth - I'll give it up to you. <br> | |
| And when the day come, it will have all been fun. We'll talk about it soon. | |
| <blockquote> | |
| You mean that much to me and it's hard to show.<br> | |
| Gets hectic inside of me when you go.<br> | |
| Can I confess these things to you.<br> | |
| Well I don't know embedded in my chest.<br> | |
| And it hurts to hold. | |
| <blockquote> | |
| I couldn't spill my heart, my eyes gleam looking in from the dark.<br> | |
| I walk out in stormy weather, hold my words, keep us together.<br> | |
| Steady walking but bound to trip, should release but just tighten my grip. | |
| <blockquote> | |
| And I couldn't spill my heart. | |
| </blockquote> | |
| </blockquote> | |
| </blockquote> | |
| </section> | |
| <section class="hidden"> | |
| <div class="slide"> | |
| <blockquote> | |
| <blockquote> | |
| <blockquote> | |
| My eyes gleam looking in from the dark.<br> | |
| I walk out in stormy weather, hope my words keep us together.<br> | |
| Steady walking but bound to trip.<br> | |
| Should release but just tighten my grip.<br> | |
| <br> | |
| Night time - sympathize - I've been working on white lies.<br> | |
| So I'll tell the truth - I'll give it up to you. <br> | |
| And when the day come, it will have all been fun. We'll talk about it soon. | |
| </blockquote> | |
| That's what she said. | |
| </blockquote> | |
| Get of my lawn! | |
| </blockquote> | |
| </div> | |
| <div class="seeMore"> | |
| <div class="level-1"> | |
| <div class="level-2"> | |
| <div class="level-3"> | |
| see more | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section> | |
| <br> | |
| --<br> | |
| Josheowaa | |
| </section> | |
| </article> | |
| <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| var shortendArticleList = []; | |
| var $shortend = $('.shortend'); | |
| var shortendArticle = { | |
| init: function(el){ | |
| this.$el = $(el); | |
| this.$section = this.$el.find('section.hidden'); | |
| this.$trigger = this.$el.find('.seeMore'); | |
| this.$holder = this.$el.find('.slide'); | |
| this.$helper = this.$holder.clone().addClass('helper').appendTo(this.$section); | |
| this.$trigger.click($.proxy( this, "reveal" )); | |
| this.getHiddenHeight(); | |
| }, | |
| getHiddenHeight: function(){ | |
| this.height = this.$holder.css('height', 'auto').height(); | |
| this.$holder.css('height', 0); | |
| // resize both slide and helper to 50% height | |
| this.$holder.css('height', this.height/2 + "px"); | |
| this.$helper.css('height', this.height/2 + "px"); | |
| setTimeout($.proxy(this,'ready'), 10); | |
| }, | |
| ready: function(){ | |
| this.$el.addClass('ready'); | |
| }, | |
| reveal: function(){ | |
| this.$el.addClass('visible animating'); | |
| this.$trigger.addClass('hidden'); | |
| this.$section.css('height', this.height + "px"); | |
| } | |
| } | |
| $.each($shortend, function(i, el){ | |
| shortendArticleList[i] = Object.create(shortendArticle); | |
| shortendArticleList[i].init(el); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment