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.

What do you mean by `the same way a chalkboard eraser would erase writing`? — Derek 朕會功夫, May 18 '12 at 02:11
For fun you can (read inefficient) animate background-image gradients! Quick demo: http://jsfiddle.net/MncSg/ — WSkid, May 18 '12 at 03:14

score 11 · Accepted Answer · edited Oct 31 '21 at 13:40

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>

So cool @Ana. Thanks. I will work with it and try to tweak it using javascript to get the effect to happen onMouseover. I want to be able to erase text using the mouse controls. — H. Ferrence, May 18 '12 at 12:07

score 3 · Answer 2 · edited May 23 '17 at 10:09

3

You can achieve this effect using a canvas. See:

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.

edited May 23 '17 at 10:09

Community

1
1

answered May 18 '12 at 02:13

Tim M.

53,671
14
120
163

Thanks @TimMedora. Before I asked the question I did see both of the links you provided. I want to achieve an effect where you drag your mouse pointer across a chalkboard and erase what is on it. Probably need o do this in flash. But I was exploring to see if some of the new CSS offered a concept like this or to see if anyone did anything real creative via jQuery. – H. Ferrence May 18 '12 at 10:17
@Ana's solution would be my top choice if you don't need to support every browser (much cleaner than using Flash, but IE 7/8/9 don't work). You could probably write a solution which degrades nicely and just clips/hides in browsers which don't support transitions. – Tim M. May 18 '12 at 12:17

Eraser Effect Using CSS or JavaScript

2 Answers2