Wednesday, February 26, 2014

Rolling links - CSS3 + JS example

"Rolling link" is a great example of CSS and JS combination. I found it the other day at this great site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/ full of flat-ui design inspirations.

This tutorial shows you how to create catchy "rolling links".

 

What we need

  1. Notepad++ (or any other html editor of your choice)
  2. jQuery  (you can download jQuery file from  http://jquery.com/download/ or you can add this markup into head section of your html file <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>

 

Create Html file


We'll start with the simple html file. Let's save it as index.html

<!DOCTYPE html>
<html>
   <head>
       <title>Fancy Rolling Link</title>

   </head>
   <body>
   </body>
</html>

Add div box into body section. We will apply CSS3 and JavaScript to everything inside the <a> tags, in our case it'll be "Flat design".

<div>
    <article>
       We love <a href="#" >Flat design </a>.
    </article>
</div>


Styling rolling links


You can create a CSS file or else you can include CSS into head section of he HTML file. We'll add this CSS markup to our html file in this tutorial.  

 <style>
  
a {
   color: #9b59b6;
   font-weight: bold;
   text-decoration: none;
   }
  .roll-link {
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
   -webkit-perspective: 600px;
      -moz-perspective: 600px;
       -ms-perspective: 600px;
           perspective: 600px;
   -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
           perspective-origin: 50% 50%;
   }
   .roll-link:hover span {
    background: #9b59b6;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
   .roll-link span {
    display: block;
    padding: 0 2px;
    position: relative;
    -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;
    }
    .roll-link span:after {
     background: #9b59b6;
     color: #fff;
     content: attr(data-title);
     display: block; 
     left: 0;
     padding: 0 2px;
     position: absolute;
     top: 0; 
     -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
         -ms-transform-origin: 50% 0%;
             transform-origin: 50% 0%;
     -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
         -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
             transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
     } 
 </style>


JavaScript


This simple JS function is executed immediately after the DOM has been fully loaded. It finds all <a> tags, adds class="roll-link" to it and encloses text inside <a> tag with <span> tags. 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script>
  jQuery(document).ready(function(){
   initFancyRollingLinks();
  });

  function initFancyRollingLinks(){
   jQuery('a').each(function(i,e){
    var link = jQuery(e);
    link.addClass('roll-link');
    link.html('<span data-title="'+ link.text() +'">' + link.html() + '</span>');
   });
  };
 </script>


Demo


Demo to this tutorial is not available at the moment. But you can see working version on this site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/


No comments:

Post a Comment