How to make an animation hit using JavaScript on a piece of text?

Question

I want to try to create an effect when, when I fire an event, an animated line hits a piece of text. The effect must be performed in Java Script.

Can someone suggest some ways to do this? I have the text already on the page, and I would like the text to hit from left to right, as if the line was drawn

Answer 1

Using jQuery is possible with a little change: http://jsfiddle.net/yahavbr/EbNh7/

JS:

var _text = ""; $(document).ready(function() { _text = $("#myDiv").text(); StrikeThrough(0); }); function StrikeThrough(index) { if (index >= _text.length) return false; var sToStrike = _text.substr(0, index + 1); var sAfter = (index < (_text.length - 1)) ? _text.substr(index + 1, _text.length - index) : ""; $("#myDiv").html("<strike>" + sToStrike + "</strike>" + sAfter); window.setTimeout(function() { StrikeThrough(index + 1); }, 100); } 

This will remove the text myDiv , causing the line to appear with the animation.

Since it doesn't use any jQuery heavy stuff, it can easily be converted to plain JavaScript, so if you prefer not to use jQuery, I will edit my answer.

Answer 2

 var findText = function(element, pattern, callback) { if ( ! element.childNodes) { return; } for (var childi = element.childNodes.length; childi-- > 0;) { var child = element.childNodes[childi]; if (child.nodeType == 1) { findText(child, pattern, callback); } else if (child.nodeType == 3) { var matches = []; var match; while (match = pattern.exec(child.data)) matches.push(match); for (var i = matches.length; i-- > 0;) callback.call(window, child, matches[i]); } } } findText(document.body, /./g, function(node, match) { var element = document.createElement('span'); node.splitText(match.index + 1); element.appendChild(node.splitText(match.index)); node.parentNode.insertBefore(element, node.nextSibling); }); var spans = document.getElementsByTagName('span'), spansLength = spans.length, currentSpan = 0, interval = setInterval(function() { if (currentSpan == spansLength) { clearInterval(interval); } spans[currentSpan++].style.textDecoration = 'line-through'; }, 100); 

jsFiddle .

• Go through each character (except \n ) with regex and recursively apply a callback function to wrap each individual character with span .
• Select all of these span elements, and then use setInterval() to move through them by adding style="text-decoration: line-through through the style span object.
• Stop when we iterate through each span .

The disadvantage of using innerHTML is that when you serialize HTML, you lose all events, etc. In the above script, the strong element is still clickable (you will click the span , which will bubble for the parent).

Answer 3

You can use jQuery to animate a background image that looks like strikethrough. Maybe something like this:

 $(".someclass").animate({backgroundPosition: '0px 0px'}) 

This may look a little smoother than trying to do something with <s> tags. Your HTML markup will look like this:

 <span class="someclass">Lorem ipsum</span> 

And you need to make sure .someclass had CSS by default, which hid the background image using background-position, .someclass .:

 .someclass { background-position: -1000px 0px; } 

Answer 4

I would create an empty space before the text with a sketched style. Then I will write a function that pops the first character from the front of the piece of text and adds it to your range. Then use setTimeout () to call this function again until a piece of text is empty.

You requested an offer - the code will take more time :)

Answer 5

You can add the <s> to the beginning of the line and iteratively move the end tag </s> one character further to the end of the line, it might be best to use setTimeout() .

Something along these lines (not verified):

 STRIKE_POS = 1; ORIG_STR = ''; function startStrike(str) { STRIKE_POS = 1; ORIG_STR = str; strike(); } function strike() { var str = '<s>' + ORIG_STR.substr(0, STRIKE_POS) + '</s>' + ORIG_STR.substr(STRIKE_POS); // DO SOMETHING WITH THE STRING, LIKE DISPLAY SOMEWHERE STRIKE_POS++; if (STRIKE_POS < ORIG_STR.length) { window.setTimeout("strike()", 200); // adjust the timeout } } 

Answer 6

Here is a basic implementation that works in current versions of IE, Firefox, and Chrome:

 <html> <head> <script type="text/javascript"> window.gradualStrike = function(spanId, timeMillis) { var stepDuration; var strikeElem = document.getElementById(spanId); var strikeText = strikeElem.innerHTML.replace("<S>", "<s>").replace("</S>", "</s>"); //IE uppercases the tag var currentStrikePos = strikeText.indexOf("</s>"); if (currentStrikePos < 0) { currentStrikePos = 0; stepDuration = timeMillis / strikeText.length; } else { if (currentStrikePos + 3 == strikeText.length) { //the '</s>' is at the end, we are done return; } currentStrikePos -= 3; //account for the '<s>' tag stepDuration = timeMillis / (strikeText.length - 7); //account for '<s>' and '</s>' strikeText = strikeText.replace("<s>", "").replace("</s>", ""); //strikeText.replace(/\<s\>/, "").replace(/\<\/s\>/, ""); } currentStrikePos++; strikeText = "<s>" + strikeText.substring(0, currentStrikePos) + "</s>" + strikeText.substring(currentStrikePos); strikeElem.innerHTML = strikeText; setTimeout("gradualStrike('" + spanId + "', " + timeMillis + ");", stepDuration); }; </script> </head> <body> <span id="someText" onclick="gradualStrike('someText', 1000); this.onclick=function(){return;};">Click to strike...</span> </body> </html> 

Answer 7

Just came here from Google, eventually wrote my own little function. Here is how I did it:

 function drawLineOnClick() { //add or prepend div to the top of the div holding your text $("#IdOfElementHoldingTheText").prepend('<div id="lineThrough"></div>'); var WidthStrikeThrEl = $("#IdOfElementHoldingTheText").width(); $("#lineThrough").animate({width: WidthStrikeThrEl},1000, function() { //when line has been drawn, apply CSS line-through and remove line $("#IdOfElementHoldingTheText").attr('class', 'lineThrCssClass'); $("#lineThrough").remove(); }); } #lineThrough { position:absolute; top:23px; //centering line over text to simulate actual line through width:0px; height:1px; background:#444; //color of line through } .lineThrCssClass { color:#444; text-decoration:line-through; }