mirror of
https://github.com/codrops/TextStylesHoverEffects.git
synced 2025-12-08 20:26:25 +00:00
236 lines
8.1 KiB
HTML
Executable File
236 lines
8.1 KiB
HTML
Executable File
<!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/normalize.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
|
<link rel="stylesheet" type="text/css" href="css/linkstyles.css" />
|
|
<!--[if IE]>
|
|
<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>
|
|
<!-- clipping mask for style "Urpi" -->
|
|
<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 for effect "Asiri" -->
|
|
<!-- Inverted masking technique by Yoksel http://tympanus.net/codrops/2015/02/16/create-animated-text-fills/ -->
|
|
<svg class="hidden svg--asiri" viewBox="0 0 400 200">
|
|
<!-- Symbol with text -->
|
|
<symbol id="s-text">
|
|
<text text-anchor="middle" x="50%" y="50%" dy="0.35em" textLength="280" class="text--asiri">Asiri</text>
|
|
</symbol>
|
|
<!-- Mask with text -->
|
|
<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="#">
|
|
<!-- Content for text -->
|
|
<div class="text-fill">
|
|
<canvas id="canv"></canvas>
|
|
</div>
|
|
<!-- SVG to cover text fill -->
|
|
<svg viewBox="0 0 400 200" class="svg-inverted-mask">
|
|
<!-- Big shape with hole in form of text -->
|
|
<rect width="100%" height="100%" mask="url(#m-text)" class="shape--fill" />
|
|
<!-- Transparent copy of text to keep
|
|
patterned text selectable -->
|
|
<use xlink:href="#s-text" class="text--transparent"></use>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<!-- Related demos -->
|
|
<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>
|
|
<!-- /container -->
|
|
<!-- Jolt by Tiffany Rayside: http://codepen.io/tmrDevelops/pen/dPjYYP/ -->
|
|
<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>
|