HTML
<html>
<head>
<meta charset="UTF-8">
<title>HTML CSS Text-Glitch Effect | Webdevtrick.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="textglitch">
<a class="textglitch-link"><span>WEBDEVTRICK</span></a>
</div>
<div class="textglitch">
<a class="textglitch-link"><span>HTML CSS JS TEXT-GLITCH</span></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="function.js"></script>
</body>
</html>CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300);
* {
margin:0;
padding:0;
outline:none;
list-style:none;
text-decoration:none;
box-sizing:border-box;
color:#000;
background: transparent;
border:none;
}
html, body {
height: 100%;
width: 100%;
margin-top: 5%;
}
body {
background: #111;
font-family: 'Roboto', sans-serif;
}
.textglitch {
position: relative;
text-align: center;
margin: 0 auto;
cursor: pointer;
z-index: 1;
font-size: 5vw;
font-weight: 700;
margin: 50px 0;
}
.textglitch .textglitch-link {
position: relative;
display: inline-block;
}
.textglitch-link span {
position: relative;
z-index: 2;
color: #fff;
}
.blur {
filter: blur(1px);
-webkit-filter: blur(1px);
}
.textglitch .textglitch-link:after,
.textglitch .textglitch-link:before {
position: absolute;
top: 0px;
left: 0px;
content: attr(data-content);
visibility: hidden;
}
.textglitch.active .textglitch-link:after,
.textglitch.active .textglitch-link:before {
visibility: visible;
}
.textglitch .textglitch-link:before {
color: rgba(255, 0, 188, 0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite;
}
.textglitch .textglitch-link:after {
color: rgba(0,255,255,0.8);
-webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite;
}
@keyframes textglitch {
0% {
-webkit-transform: translate(0);
transform: translate(0)
}
20% {
-webkit-transform: translate(-3px, 3px);
transform: translate(-3px, 3px)
}
40% {
-webkit-transform: translate(-3px, -3px);
transform: translate(-3px, -3px)
}
60% {
-webkit-transform: translate(3px, 3px);
transform: translate(3px, 3px)
}
80% {
-webkit-transform: translate(3px, -3px);
transform: translate(3px, -3px)
}
to {
-webkit-transform: translate(0);
transform: translate(0)
}
}JS
$('.textglitch').hover(function(){
var eLtext = $(this).text(),
eLchild = $(this).find('.textglitch-link');
console.log(eLchild);
eLchild.attr('data-content', eLtext);
eLchild.toggleClass('blur');
$(this).toggleClass('active');
});