Question

Is anyone aware of any css or javascript that creates an effect of gradually erasing text on a web page the same way a chalkboard eraser would erase writing on a chalkboard?

Thanks.

Answer 1

I’ve made a little demo which uses a gradient, box-shadow and keyframe animation. The code is below and you can see it in action at http://dabblet.com/gist/2722829

.parent {
  width: 400px;
  margin: 125px auto;
  padding: 8px;
  overflow: hidden;
  position: relative;
}
.eraser {
  left:-30%;
  top: 8px;
  height: 100%;
  width: 130%;
  border-radius: 135px/65px;
  box-shadow: 0 0 100px 50px rgba(255, 255, 255, .8);
  display: block;
  position: absolute;
  z-index: 2;
  background: radial-gradient(#fff, rgba(255, 255, 255, .95));
  animation: erase 4s ease-out;
}
@keyframes erase {
  from {left: -170%;}
  to {left: -30%;}
}

<div class="parent">
  <p>Biscuit danish icing halvah jelly beans jelly beans powder liquorice sugar plum. 
  Pie marzipan toffee donut chocolate dragée topping caramels. 
  Applicake wafer donut soufflé. Icing danish dessert icing carrot cake soufflé apple pie.
  </p>
  <div class="eraser"></div>
</div>