restore rolling links.. but default to off #532

edit
Hakim El Hattab 2013-07-26 09:33:25 -04:00
parent 4c491e5ecc
commit 8bf19ab61f
4 changed files with 142 additions and 3 deletions

View File

@ -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 * SPEAKER NOTES
*********************************************/ *********************************************/

2
css/reveal.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -67,6 +67,9 @@ var Reveal = (function(){
// Enable slide navigation via mouse wheel // Enable slide navigation via mouse wheel
mouseWheel: false, mouseWheel: false,
// Apply a 3D roll to links on hover
rollingLinks: false,
// Opens links in an iframe preview overlay // Opens links in an iframe preview overlay
previewLinks: false, previewLinks: false,
@ -475,6 +478,14 @@ var Reveal = (function(){
document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false ); document.removeEventListener( 'mousewheel', onDocumentMouseScroll, false );
} }
// Rolling 3D links
if( config.rollingLinks ) {
enableRollingLinks();
}
else {
disableRollingLinks();
}
// Iframe link previews // Iframe link previews
if( config.previewLinks ) { if( config.previewLinks ) {
enablePreviewLinks(); 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. * Bind preview frame links.
*/ */

4
js/reveal.min.js vendored

File diff suppressed because one or more lines are too long