Hitesh Misro Hitesh Misro - 4 days ago 5
CSS Question

How to make a shining effect over a text in jQuery?

I want to make a realistic shining effect over a text, I've tried solving it with pure css but ended up with this.



$(function(){
setInterval(function(){
setTimeout(function(){
$('div span:nth-child(4)').removeClass('shine');
$('div span:nth-child(1)').addClass('shine');
},200);
setTimeout(function(){
$('div span:nth-child(1)').removeClass('shine');
$('div span:nth-child(2)').addClass('shine');
},400);
setTimeout(function(){
$('div span:nth-child(2)').removeClass('shine');
$('div span:nth-child(3)').addClass('shine');
},600);
setTimeout(function(){
$('div span:nth-child(3)').removeClass('shine');
$('div span:nth-child(4)').addClass('shine');
},800);
},1000);
});

div{
height:50px;
line-height:50px;
background:#3498db;
color:#ccc;
font-family:tahoma;
font-weight:bold;
font-size:40px;
text-transform:uppercase;
text-align:center;
}
div span{
-webkit-transition: color 0.5s;
transition: color 0.5s;
}
.shine{
color:#fcfcfc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span>T</span>
<span>e</span>
<span>x</span>
<span>t</span>
</div>





I'm looking for something similar to this

enter image description here

Answer

Somewhat close, with the before element.

A pure CSS workaround

Drawback: div's background-color and before element's background-color must match. For instance, it is white in this example. Different colors would make the shine's rectanlge quite obviously visible.

div {
  box-sizing: border-box;
}
body {
  margin: 0px;
}
div:before {
  content: ' ';
  position: absolute;
  width: 20px;
  height: 50px;
  animation: slide 1s linear infinite;
  transform: rotate(30deg);
}
div {
  height: 50px;
  font-size: 40px;
  background-color: white;
  width: 200px;
}
@keyframes slide {
  from {
    left: -10px;
    background: rgba(255, 255, 255, 0.5);
  }
  to {
    left: 190px;
    background: rgba(255, 255, 255, 0.5);
  }
}
<div>
  THIS
</div>

Comments