Shot with Nikon D7000
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".
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>
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>
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 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/
This tutorial shows you how to create catchy "rolling links".
What we need
- Notepad++ (or any other html editor of your choice)
- 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/
Subscribe to:
Posts (Atom)