xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix vertical slide transition and hit areas of rolling links

This commit is contained in:
Hakim El Hattab 2011-12-04 19:24:08 -08:00
parent 233160ff23
commit f9527d31b4
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/main.css
View File

@ -138,6 +138,17 @@ h1 {
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
#main section.present {
display: block;
position: absolute;
z-index: 10;
}
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.past { #main section.past {
display: block; display: block;
opacity: 0; opacity: 0;
@ -147,20 +158,6 @@ h1 {
transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
} }
/*********************************************
* DEFAULT THEME
*********************************************/
#main section.present {
display: block;
position: absolute;
z-index: 10;
-webkit-transform-style: flat;
-moz-transform-style: flat;
transform-style: flat;
}
#main section.future { #main section.future {
display: block; display: block;
opacity: 0; opacity: 0;
@ -204,6 +201,17 @@ h1 {
transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
} }
.concave #main section>section.past {
-webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
-moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
}
.concave #main section>section.future {
-webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
-moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
}
/********************************************* /*********************************************
* LINEAR THEME * LINEAR THEME
@ -433,7 +441,6 @@ img {
} }
/********************************************* /*********************************************
* ROLLING LINKS * ROLLING LINKS
*********************************************/ *********************************************/
@ -461,6 +468,8 @@ img {
position: relative; position: relative;
padding: 0 2px; padding: 0 2px;
pointer-events: none;
-webkit-transition: all 400ms ease; -webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease; -moz-transition: all 400ms ease;
transition: all 400ms ease; transition: all 400ms ease;

4
index.html
View File

@ -21,7 +21,7 @@
<section> <section>
<h1>Reveal.js</h1> <h1>Reveal.js</h1>
<h3 class="inverted">With 3D effects. And stuff.</h3> <h3 class="inverted">A CSS 3D Slideshow</h3>
<script> <script>
// Delicously hacky. Look away. // Delicously hacky. Look away.
if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) )
@ -183,7 +183,7 @@ linkify( 'a' );
controls: true, controls: true,
// Apply a 3D roll to links on hover // Apply a 3D roll to links on hover
rollingLinks: false, rollingLinks: true,
// Styling themes, only affects transitions for now // Styling themes, only affects transitions for now
theme: 'default' // default/concave/linear theme: 'default' // default/concave/linear