restore rolling links.. but default to off hakimel#532

enovajuan · Jul 26, 2013 · 05c8a0e · 05c8a0e
1 parent 6cfe8b1
commit 05c8a0e
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 3 deletions.
diff --git a/css/reveal.css b/css/reveal.css
@@ -1494,6 +1494,90 @@ body {
  	}
 
 
+/*********************************************
+ * ROLLING LINKS
+ *********************************************/
+
+.reveal .roll {
+	display: inline-block;
+	line-height: 1.2;
+	overflow: hidden;
+
+	vertical-align: top;
+
+	-webkit-perspective: 400px;
+	   -moz-perspective: 400px;
+	    -ms-perspective: 400px;
+	        perspective: 400px;
+
+	-webkit-perspective-origin: 50% 50%;
+	   -moz-perspective-origin: 50% 50%;
+	    -ms-perspective-origin: 50% 50%;
+	        perspective-origin: 50% 50%;
+}
+	.reveal .roll:hover {
+		background: none;
+		text-shadow: none;
+	}
+.reveal .roll span {
+	display: block;
+	position: relative;
+	padding: 0 2px;
+
+	pointer-events: none;
+
+	-webkit-transition: all 400ms ease;
+	   -moz-transition: all 400ms ease;
+	    -ms-transition: all 400ms ease;
+	        transition: all 400ms ease;
+
+	-webkit-transform-origin: 50% 0%;
+	   -moz-transform-origin: 50% 0%;
+	    -ms-transform-origin: 50% 0%;
+	        transform-origin: 50% 0%;
+
+	-webkit-transform-style: preserve-3d;
+	   -moz-transform-style: preserve-3d;
+	    -ms-transform-style: preserve-3d;
+	        transform-style: preserve-3d;
+
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	        backface-visibility: hidden;
+}
+	.reveal .roll:hover span {
+	    background: rgba(0,0,0,0.5);
+
+	    -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+	       -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+	        -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+	            transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+	}
+.reveal .roll span:after {
+	content: attr(data-title);
+
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 0;
+	padding: 0 2px;
+
+	-webkit-backface-visibility: hidden;
+	   -moz-backface-visibility: hidden;
+	        backface-visibility: hidden;
+
+	-webkit-transform-origin: 50% 0%;
+	   -moz-transform-origin: 50% 0%;
+	    -ms-transform-origin: 50% 0%;
+	        transform-origin: 50% 0%;
+
+	-webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+	   -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+	    -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+	        transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
+}
+
+
 /*********************************************
  * SPEAKER NOTES
  *********************************************/

diff --git a/css/reveal.min.css b/css/reveal.min.css
diff --git a/js/reveal.js b/js/reveal.js
@@ -67,6 +67,9 @@ var Reveal = (function(){
 			// Enable slide navigation via mouse wheel
 			mouseWheel: false,
 
+			// Apply a 3D roll to links on hover
+			rollingLinks: false,
+
 			// Opens links in an iframe preview overlay
 			previewLinks: false,
 
@@ -475,6 +478,14 @@ var Reveal = (function(){
 			document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
 		}
 
+		// Rolling 3D links
+		if( config.rollingLinks ) {
+			enableRollingLinks();
+		}
+		else {
+			disableRollingLinks();
+		}
+
 		// Iframe link previews
 		if( config.previewLinks ) {
 			enablePreviewLinks();
@@ -697,6 +708,50 @@ var Reveal = (function(){
 
 	}
 
+	/**
+	 * Wrap all links in 3D goodness.
+	 */
+	function enableRollingLinks() {
+
+		if( supports3DTransforms && !( 'msPerspective' in document.body.style ) ) {
+			var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a:not(.image)' );
+
+			for( var i = 0, len = anchors.length; i < len; i++ ) {
+				var anchor = anchors[i];
+
+				if( anchor.textContent && !anchor.querySelector( '*' ) && ( !anchor.className || !anchor.classList.contains( anchor, 'roll' ) ) ) {
+					var span = document.createElement('span');
+					span.setAttribute('data-title', anchor.text);
+					span.innerHTML = anchor.innerHTML;
+
+					anchor.classList.add( 'roll' );
+					anchor.innerHTML = '';
+					anchor.appendChild(span);
+				}
+			}
+		}
+
+	}
+
+	/**
+	 * Unwrap all 3D links.
+	 */
+	function disableRollingLinks() {
+
+		var anchors = document.querySelectorAll( SLIDES_SELECTOR + ' a.roll' );
+
+		for( var i = 0, len = anchors.length; i < len; i++ ) {
+			var anchor = anchors[i];
+			var span = anchor.querySelector( 'span' );
+
+			if( span ) {
+				anchor.classList.remove( 'roll' );
+				anchor.innerHTML = span.innerHTML;
+			}
+		}
+
+	}
+
 	/**
 	 * Bind preview frame links.
 	 */