Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

link rolling

  • Loading branch information...
commit 3f24592809ddc74c45465a14e8a5fc659dfb64b1 1 parent 576cbc9
@paulirish paulirish authored
Showing with 80 additions and 0 deletions.
  1. +62 −0 css/sass/_extends.scss
  2. +18 −0 js/script.js
View
62 css/sass/_extends.scss
@@ -60,3 +60,65 @@
font-family: $index-font-family;
font-weight: normal;
}
+
+@mixin roll {
+
+ display: inline-block;
+ overflow: hidden;
+
+ vertical-align: top;
+
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px;
+ -moz-perspective: 400px;
+
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+
+ & span {
+ display: block;
+ position: relative;
+ padding: 0 2px;
+
+ -webkit-transition: all 400ms ease;
+ -moz-transition: all 400ms ease;
+ transition: all 400ms ease;
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ }
+ &:hover span {
+ background: #111;
+
+ -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
+ -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
+ transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
+ }
+ & span:after {
+ content: attr(data-title);
+
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 0 2px;
+
+ color: #fff;
+ background: hsl(206, 80%, 30%);
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ }
+}
+
View
18 js/script.js
@@ -161,3 +161,21 @@ moredetails.onclick = function(e) {
classList(document.getElementById(/#(.*)/.exec(target.href)[1])).toggle('active');
e.preventDefault && e.preventDefault();
};
+
+var supports3DTransforms = document.body.style['webkitPerspective'] !== undefined ||
+ document.body.style['MozPerspective'] !== undefined;
+
+function linkify( selector ) {
+ if( supports3DTransforms ) {
+
+ var nodes = document.querySelectorAll( selector );
+
+ for( var i = 0, len = nodes.length; i < len; i++ ) {
+ var node = nodes[i];
+
+ node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
+ };
+ }
+}
+
+linkify( 'a' );
Please sign in to comment.
Something went wrong with that request. Please try again.