Eraser Effect Using CSS or JavaScript

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>

Answer 2

You can achieve this effect using a canvas. See:

• "Erasing" in html5 canvas
• HTML5 Canvas eraser

A simulated backspace effect on text only can be seen here: http://demos.frnzzz.com/typing/

Free-form erasing of any DOM element on the page would be difficult, since you can't remove part of an element nor is it easy to apply color to only part of an element.

You could simulate partial removal of an element by moving it outside a visible region or clipping it. This would probably only work with one axis at a time.

Lastly, there might be some combination of CSS transforms and/or CSS transitions which gives the effect you are seeking, but browser support is currently better for canvas than transforms/transitions, so you would probably be better served by using a canvas.