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');
});

Lascia un commento