fix vertical slide transition and hit areas of rolling links
This commit is contained in:
		
							
								
								
									
										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 | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user