Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I like Patrick's answer, but as an alternative I would alter the same letter throughout the text. And maybe rotate it a tiny bit as well (although this won't work in IE). I made <a href="http://jsfiddle.net/8TAjB/" rel="nofollow noreferrer">a demo</a> which I forked off of Patrick's.</p> <p>CSS</p> <pre><code>.newClass { left: 0px; top: -1px; color: red; position:relative; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); } </code></pre> <p>Code</p> <pre><code>function randomLetter(cased){ // case = true for uppercase, false for lowercase var base = (cased) ? 65 : 97; // convert HTML escape code into a letter var rand = $('&lt;span&gt;&amp;#' + parseInt(base+(Math.random()*25),10) + ';&lt;/span&gt;'); return rand.text(); }; $(document).ready(function(){ var ltr = randomLetter(false); var reg = new RegExp( ltr, 'g'); $('#typehead').html(function(i,html){ return html.replace(reg, '&lt;span class="newClass"&gt;' + ltr + '&lt;/span&gt;'); }); }); </code></pre> <hr> <p>Update: This is the code needed to apply to multiple h1 tags (<a href="http://jsfiddle.net/cgXa3/6/" rel="nofollow noreferrer">updated demo</a>):</p> <pre><code>function randomXToY(minVal,maxVal,floatVal){ var randVal = minVal+(Math.random()*(maxVal-minVal)); return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal); } $('.typehead').each(function() { //access the text and characters within the tag with the id typehead var exploded = $(this).text().split(''); var rdmltr = randomXToY(0,exploded.length); // Make sure we don't get a space character or undefined while(exploded[rdmltr] == ' ' || exploded[rdmltr] == undefined) { rdmltr = randomXToY(0,exploded.length); } // Wrap the letter with a span that has the new class brokenType // and update it in the array exploded[rdmltr] = '&lt;span class="brokenType"&gt;' + exploded[rdmltr] + '&lt;/span&gt;'; // Update the content $(this).html(exploded.join('')); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload