fix vertical slide transition and hit areas of rolling links
This commit is contained in:
parent
233160ff23
commit
f9527d31b4
39
css/main.css
39
css/main.css
@ -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;
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user