11 Creativity Text Styles and Hover Effects CSS3 | Tutorial SVG masking and Canvas

Text Styles and Hover Effects CSS3

Text Styles and Hover Effects CSS3

Here  Creativity Text Styles and Hover Effects CSS3 you can view in the Live Demo. Some effects using SVG masking and Canvas.  Then its animations and effects on text, be it a link, a typographic logo or an introductory sentence, etc, Here we share some of the text styles and hover effects with you to get your creative juices flowing. We hope you enjoy them and find them.

Live Demo   Download Source Code

Index.html

<div class="container">
		
		<div class="col-8">
			
			<div class="grid__item">
				<a class="link link--takiri" href="#">Takiri <span>Here To Go Tag Line?</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-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-1">
				<a class="link link--kukuri" href="#" data-letters="Kukuri">Kukuri</a>
			</div>
            <div class="grid__item color-8">
				<a class="link link--manko" href="#">Manko <span>Opening</span> <span>Ending</span></a>
			</div>
            <div class="grid__item color-5">
				<a class="link link--urpi" href="#" data-letters="Urpi">Urpi</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-9">
				<a class="link link--ilin" href="#"><span>Il</span><span>in</span></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 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>
		<!-- Related demos -->
		
	</div>

Script.js

<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>

 

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x