testando | Mauricio Cedraz

<!DOCTYPE html><html lang="en" class="no-js"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Inspiration for Text Styles and Hover Effects</title> <meta name="description" content="A set of modern text styles and hover effects for your inspiration" /> <meta name="keywords" content="text style, link style, link hover, effect, animation, inspiration, web design" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="favicon.ico">  <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/linkstyles.css" />  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> /* Firefox seems to have issues loading the clip path from inside the CSS */ .link--urpi::before { -webkit-clip-path: url(#cp_up);  clip-path: url(#cp_up); } .link--urpi::after { -webkit-clip-path: url(#cp_down);  clip-path: url(#cp_down); } </style></head><body>  <svg class="hidden" viewBox="0 0 310 160"> <defs> <clippath id="cp_up"> <polygon id="cp_poly_up" points="0,0 310,0 310,160" /> </clippath> <clippath id="cp_down"> <polygon id="cp_poly_down" points="0,0 0,160 310,160" /> </clippath> </defs> </svg>   <svg class="hidden svg--asiri" viewBox="0 0 400 200">  <symbol id="s-text"> <text text-anchor="middle" x="50%" y="50%" dy="0.35em" textLength="280" class="text--asiri">Asiri</text> </symbol>  <mask id="m-text" maskunits="userSpaceOnUse" maskcontentunits="userSpaceOnUse"> <rect width="100%" height="100%" class="mask__shape"> </rect> <use xlink:href="#s-text" class="mask__text"></use> </mask> </svg> <div class="container"> <header class="codrops-header"> <div class="codrops-links"> <a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Development/PhotographyWebsiteConcept/" title="Previous Demo"><span>Previous Demo</span></a> <a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=24024" title="Back to the article"><span>Back to the Codrops article</span></a> </div> <h1><span class="sub">Inspiration for</span> Text Styles <span class="amp">&</span> Hover Effects</h1> </header> <div class="grid"> <div class="grid__item color-1"> <a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a> </div> <div class="grid__item"> <a class="link link--takiri" href="#">Takiri <span>Where do you want to be?</span></a> </div> <div class="grid__item color-2"> <a class="link link--surinami" href="#"><span data-letters-l="Suri" data-letters-r="nami">Surinami</span></a> </div> <div class="grid__item color-3"> <a class="link link--nukun" href="#">Nu<span>k</span>un</a> </div> <div class="grid__item color-4"> <a class="link link--kumya" href="#"><span data-letters="Kumya">Kumya</span></a> </div> <div class="grid__item color-8"> <a class="link link--manko" href="#">Manko <span>one step</span> <span>at a time</span></a> </div> <div class="grid__item color-11"> <a class="link link--yaku" href="#"> <span>Y</span><span>a</span><span>k</span><span>u</span>  </a> </div> <div class="grid__item color-7"> <a class="link link--mallki" href="#">Mallki<span data-letters="Mallki"></span><span data-letters="Mallki"></span></a> </div> <div class="grid__item color-9"> <a class="link link--ilin" href="#"><span>Il</span><span>in</span></a> </div> <div class="grid__item"> <p>The next effects only work in Firefox and Chrome.</p> </div> <div class="grid__item color-5"> <a class="link link--urpi" href="#" data-letters="Urpi">Urpi</a> </div> <div class="grid__item color-10"> <a class="link link--asiri" href="#">  <div class="text-fill"> <canvas id="canv"></canvas> </div>  <svg viewBox="0 0 400 200" class="svg-inverted-mask">  <rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill" />  patterned text selectable --> <use xlink:href="#s-text" class="text--transparent"></use> </svg> </a> </div> </div>  <section class="content content--related"> <p>If you enjoyed this demo you might also like:</p> <a class="media-item" href="http://tympanus.net/Development/CreativeLinkEffects/"> <img class="media-item__img" src="img/related/CreativeLinkEffects.png"> <h3 class="media-item__title">Creative Link Effects</h3> </a> <a class="media-item" href="http://tympanus.net/Tutorials/CaptionHoverEffects/"> <img class="media-item__img" src="img/related/CaptionHoverEffect.png"> <h3 class="media-item__title">Caption Hover Effects</h3> </a> </section> </div>   <script> window.requestAnimFrame = (function(callback) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; })(); var requestId, jolttime; var c = document.getElementById('canv'); var $ = c.getContext('2d'); var s = 18; //grid square size var mv = 10; //moving areas var sp = 1; //move speed var clm = 23; //columns var rw = 10; //rows var x = []; //x array var y = []; //y array var X = []; //starting X array var Y = []; //starting Y array c.width = c.offsetWidth; c.height = c.offsetHeight; for (var i = 0; i < clm * rw; i++) { x[i] = ((i % clm) - 0.5) * s; y[i] = (Math.floor(i / clm) - 0.5) * s; X[i] = x[i]; Y[i] = y[i]; } var t = 0; function jolt() { $.fillRect(0, 0, c.width, c.height); for (var i = 0; i < clm * rw; i++) { if (i % clm != clm - 1 && i < clm * (rw - 1) - 1) { $.fillStyle = "hsla(0,0,0,1)"; $.strokeStyle = "#95D384"; $.lineWidth = 1; $.beginPath(); $.moveTo(x[i], y[i]); $.lineTo(x[i + 1], y[i + 1]); $.lineTo(x[i + clm + 1], y[i + clm + 1]); $.lineTo(x[i + clm], y[i + clm]); $.closePath(); $.stroke(); $.fill(); } } for (var i = 0; i < rw * clm; i++) { if ((x[i] < X[i] + mv) && (x[i] > X[i] - mv) && (y[i] < Y[i] + mv) && (y[i] > Y[i] - mv)) { x[i] = x[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp; y[i] = y[i] + Math.floor(Math.random() * (sp * 2 + 1)) - sp; } else if (x[i] >= X[i] + mv) { x[i] = x[i] - sp; } else if (x[i] <= X[i] - mv) { x[i] = x[i] + sp; } else if (y[i] >= Y[i] + mv) { y[i] = y[i] - sp; } else if (y[i] <= Y[i] + mv) { y[i] = y[i] + sp; } } //controls time of electric shake> when counter equals 0, it will reset for 5s then start again. if (t % c.width == 0) { jolttime = setTimeout('jolt()', 5); t++; } else { jolttime = setTimeout('jolt()', 5); t++; } } function start() { if (!requestId) { requestId = window.requestAnimFrame(jolt); } } function stop() { if (requestId) { clearTimeout(jolttime); window.cancelAnimationFrame(requestId); requestId = undefined; } } document.querySelector('a.link--asiri').addEventListener('mouseenter', start); document.querySelector('a.link--asiri').addEventListener('mouseleave', stop); </script> <script> // For Demo purposes only (show hover effect on mobile devices) [].slice.call( document.querySelectorAll('.grid a') ).forEach( function(el) { el.onclick = function() { return false; } } ); </script></body></html>