Erasers Effect Using CSS or JavaScript

Question

Does anyone know of any css or javascript that creates the effect of gradually erasing text on a web page in the same way that an eraser on a blackboard erases a record on a blackboard?

Thanks.

Answer 1

I did a small demo that uses gradient, box, and keyframe animations. The code is below and you can see it in action at http://dabblet.com/gist/2722829

HTML:

<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> 

CSS:

 .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%;} } 

Answer 2

You can achieve this effect using canvas . Cm:

• Erase in html5 canvas
• HTML5 Canvas eraser

The simulation effect of the backward pass only on the text can be seen here: http://demos.frnzzz.com/typing/

Removing the free form of any DOM element on the page will be difficult, since you cannot delete part of the element, and it is not easy to apply color to only part of the element.

You can model partial removal of an element by moving it outside the visible area or by trimming it. This will probably only work with one axis at a time.

Finally, there may be some combination of CSS transforms and / or CSS Transitions that give the effect you are looking for, but browser support is currently better for canvas than transformations / transitions, so you would probably be better served using canvas .