1

Firstly, I've made a CODEPEN or jsfiddles

Background:

Ok I have a span tag within a few header tags h1,h2,h3. Inside that spantag is the word

experience which is spelled backwards like so:

<h3>for <span class="hover-spell">ecneirepxe</span>.</h3>

Question

I'm unsure on the best way to approch this but I would like on hover:

  • reorder to spell experience correctly
  • if possible animate them overlapping another while re-ordering

I have no idea how to do this but I keep thinking regex, with arrays but this feels overly complicated and I really don't know anything about regex and proper array sorting. Any information to lead me in the right direction would be most appreciated. Or an edit to the codepen or jsfiddles would be so excellent.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
Armeen Moon
  • 18,061
  • 35
  • 120
  • 233
  • Anything i can think of is wrapping each letter in a container so you can manipulate their positions. Getting letters from string in JS is actually straightforward - as strings are arrays - just do `var theString = 'ASD'; console.log(theString[2])` and you'll get `S`. Number of letters in a string is in `theString.length`. – Artek Wisniewski Aug 05 '13 at 20:37

3 Answers3

3

One possible solution is to use css to accomplish this. This solution doesn't animate the transition, it just changes the order of the letters. Add this to your css:

.hover-spell:hover{
    direction: rtl; 
    unicode-bidi: bidi-override;
}

Edit: Thanks to Marcel Gwerder for pointing out that it's not possible to animate the direction property

I found this answer, in another post (it goes through a given string of text and wraps each character in a span then assigns transiton styles to each), that may help with a jquery solution.

Community
  • 1
  • 1
jvilhena
  • 1,131
  • 8
  • 21
  • Plus one for cleverness but damn any idea on how to get to get this to animate? – Armeen Moon Aug 05 '13 at 20:33
  • 1
    @MatthewHarwood you will not get animation with this css solution, because [it's not possible to animate the direction property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) – Marcel Gwerder Aug 05 '13 at 20:37
1

I've just tried to set up something animated with jquery, it's a bit tricky to get a fancy looking animation. But that one doesn't look too bad (DEMO).

var expElem = $(".hover-spell");
var exp = expElem.text();
var run = false;

expElem.empty();
for(var i = 0; i <= exp.length; i++) {
   expElem.append('<span>'+exp.charAt(i)+'</span>'); 
}

expElem.mouseover(function() {   
    if(run === true) return false;
    run = true;
    var stepDuration = 300;
    var counter = 0;

    (function anim(){
        if(counter == exp.length -1) return false; //Remove -1 to get last "e" animated
         counter++;

        var nth = exp.length;
        var elem = $('span:nth-child('+nth+')', expElem); 

        elem.slideUp(stepDuration, function() {
            (function() {
                if(counter == 1) return elem.prependTo(expElem);
                else return elem.insertAfter($('span:nth-child('+(counter-1)+')', expElem));
            })().slideDown(stepDuration, anim);
        });
    })();   
});

To get it working with hover(including mouseleave) is a bit more complicated. You could also try something with storing the position and then slide them over each other but again a bit more complicated.

Marcel Gwerder
  • 8,353
  • 5
  • 35
  • 60
0
<span id = "spell">olleh</span>   //hello in reverse

<script type="text/javascript">
        var newText;
        var text = null;
        text = document.getElementById("spell").innerHTML;
        for (var i = text.length - 1; i >= 0; i--) {




            if (i == text.length - 1) {
                newText = text.substr(i, 1);
            }
            else {
                newText = newText + text.substr(i, 1);
            }
         }
        alert(newText);
    </script>

write this script in body tag...

user1343227
  • 24
  • 2