| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191 |
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head profile="http://www.w3.org/2005/10/profile">
- <title> </title>
-
- <style type="text/css" media="screen">
-
- #container {
- position: absolute;
- width: 400px;
- height: 500px;
- border: 1px solid black;
- overflow: hidden;
- }
- #top {
- position: absolute;
- width: 100%;
- height: 150px;
- background: green;
- }
- #slide {
- position: absolute;
- width: 100%;
- top: 150px;
- height: 0;
- background: orange;
- overflow: hidden;
-
- -webkit-transition: height 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
-
- -webkit-perspective: 360;
- -webkit-perspective-origin: 50% 50%;
- }
- #slide-top {
- position: absolute;
- width: 100%;
- top: 0;
- height: 100px;
-
- background-color: yellow;
- /* easeOutSine */
- background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 100%);
-
- -webkit-transition: -webkit-transform 5000ms linear;
-
- -webkit-transform-style: preserve-3d;
- -webkit-transform-origin: top;
- -webkit-transform: rotateX(-90deg);
- }
- .visible #slide-top {
- -webkit-transform: rotateX(0deg);
- }
- .visible #slide-bottom {
- -webkit-transform: rotateX(0deg);
- }
- #slide-bottom {
- position: absolute;
- width: 100%;
- top: auto;
- bottom: 0;
- height: 200px;
- z-index: -1;
-
- background-color: blue;
- background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 0%,rgba(0, 0, 0, 0.20) 50%);
-
- -webkit-transition: -webkit-transform 5000ms linear;
-
- -webkit-transform-style: preserve-3d;
- -webkit-transform-origin: bottom;
- -webkit-transform: rotateX(90deg);
- }
- #bottom {
- position: absolute;
- width: 100%;
- top: 150px;
- height: 500px;
- background: red;
- /* easeOutSine */
- -webkit-transition: top 5000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
- }
-
- </style>
- </head>
- <body>
- <div id="container">
- <div id="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
- sed diam nonummy nibh euismod tincidunt ut laoreet dolore
- magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
- quis nostrud exerci tation ullamcorper suscipit lobortis nisl
- ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
- dolor in hendrerit in vulputate velit esse molestie consequat,
- vel illum dolore eu feugiat nulla facilisis at vero eros et
- accumsan et iusto odio dignissim qui blandit praesent luptatum
- zzril delenit augue duis dolore te feugait nulla facilisi.
- Nam liber tempor cum soluta nobis eleifend option congue
- nihil imperdiet doming id quod mazim placerat facer possim
- assum. Typi non habent claritatem insitam; est usus legentis
- in iis qui facit eorum claritatem. Investigationes
- demonstraverunt lectores legere me lius quod ii legunt saepius.
- Claritas est etiam processus dynamicus, qui sequitur mutationem
- consuetudium lectorum. Mirum est notare quam littera gothica,
- quam nunc putamus parum claram, anteposuerit litterarum formas
- humanitatis per seacula quarta decima et quinta decima. Eodem
- modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
- in futurum.</div>
- <div id="slide">
- <div id="slide-top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
- sed diam nonummy nibh euismod tincidunt ut laoreet dolore
- magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
- quis nostrud exerci tation ullamcorper suscipit lobortis nisl
- ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
- dolor in hendrerit in vulputate velit esse molestie consequat,
- vel illum dolore eu feugiat nulla facilisis at vero eros et
- accumsan et iusto odio dignissim qui blandit praesent luptatum
- zzril delenit augue duis dolore te feugait nulla facilisi.
- Nam liber tempor cum soluta nobis eleifend option congue
- nihil imperdiet doming id quod mazim placerat facer possim
- assum. Typi non habent claritatem insitam; est usus legentis
- in iis qui facit eorum claritatem. Investigationes
- demonstraverunt lectores legere me lius quod ii legunt saepius.
- Claritas est etiam processus dynamicus, qui sequitur mutationem
- consuetudium lectorum. Mirum est notare quam littera gothica,
- quam nunc putamus parum claram, anteposuerit litterarum formas
- humanitatis per seacula quarta decima et quinta decima. Eodem
- modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
- in futurum.</div>
- <div id="slide-bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
- sed diam nonummy nibh euismod tincidunt ut laoreet dolore
- magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
- quis nostrud exerci tation ullamcorper suscipit lobortis nisl
- ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
- dolor in hendrerit in vulputate velit esse molestie consequat,
- vel illum dolore eu feugiat nulla facilisis at vero eros et
- accumsan et iusto odio dignissim qui blandit praesent luptatum
- zzril delenit augue duis dolore te feugait nulla facilisi.
- Nam liber tempor cum soluta nobis eleifend option congue
- nihil imperdiet doming id quod mazim placerat facer possim
- assum. Typi non habent claritatem insitam; est usus legentis
- in iis qui facit eorum claritatem. Investigationes
- demonstraverunt lectores legere me lius quod ii legunt saepius.
- Claritas est etiam processus dynamicus, qui sequitur mutationem
- consuetudium lectorum. Mirum est notare quam littera gothica,
- quam nunc putamus parum claram, anteposuerit litterarum formas
- humanitatis per seacula quarta decima et quinta decima. Eodem
- modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
- in futurum.</div>
- </div>
- <div id="bottom">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
- sed diam nonummy nibh euismod tincidunt ut laoreet dolore
- magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
- quis nostrud exerci tation ullamcorper suscipit lobortis nisl
- ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
- dolor in hendrerit in vulputate velit esse molestie consequat,
- vel illum dolore eu feugiat nulla facilisis at vero eros et
- accumsan et iusto odio dignissim qui blandit praesent luptatum
- zzril delenit augue duis dolore te feugait nulla facilisi.
- Nam liber tempor cum soluta nobis eleifend option congue
- nihil imperdiet doming id quod mazim placerat facer possim
- assum. Typi non habent claritatem insitam; est usus legentis
- in iis qui facit eorum claritatem. Investigationes
- demonstraverunt lectores legere me lius quod ii legunt saepius.
- Claritas est etiam processus dynamicus, qui sequitur mutationem
- consuetudium lectorum. Mirum est notare quam littera gothica,
- quam nunc putamus parum claram, anteposuerit litterarum formas
- humanitatis per seacula quarta decima et quinta decima. Eodem
- modo typi, qui nunc nobis videntur parum clari, fiant sollemnes
- in futurum.</div>
- </div>
- <script>
- setTimeout(function() {
- document.getElementById("bottom").style.top = "350px";
- document.getElementById("slide").style.height = "200px";
- document.getElementById("slide").className += " visible";
-
- }, 1000);
- </script>
- </body>
- </html>
|