0

I have several words that I would like to create an animation for, basically several of the letters of each word will separate from the original words and generate a new words with those letters. So for example lets say I have Home general services, the animation would take the ho from home gen from general and ser from services to create another word under the original that says hgenser.

Would jquery or javascript be the best thing to do this or would it be easier to use photoshop and create an animated gif?

Thanks for the input.

5 Answers 5

1

No doubt, use jQuery. It simple and it's JavaScript. The function you need is animate, e.g: Move div jQuery using animate function by id name

0

It depends on what you hope to get out of it. An animated gif is pretty limited and you would have to do this for every single combination you want where as js will just need basic config parameters to know what to do with any string so long as your method is written correctly.

For future sake, I would definitely suggest a jquery solution. However, if you are only doing this for one word combination and never plan on adding more then js is probably overkill.

You can create a jsfiddle to play with then refine this question if you get stuck.

0

jQuery isn't the first thing that jumps to mind for a task like this, but if I were going to do it the steps would probably be as follows:

  1. display images of the three whole words in three separate divs

  2. change the width of these divs to only show the letters you want

  3. at the same time you are changing the width move each div to it's now position.

good luck!

0

I haven't yet had a chance to play with it, but perhaps raphael would be worth investigating? I've heard good things about it and some of the demos are very slick.

0

If you are only going to do it once it would probably be faster to make it with a GIF, if you make it with jQuery then it will be less expensive in terms of storage, infinitely more flexible and more efficient.

Let's say that you want to do it with jQuery:


You have the following element:

<span id="word">Home General Services</span>

Use jQuery to get the value inside the element you want to change.

var word = $("#word").html();

Split the elements into the separate letters, so that you can move them all around.

var letters = word.split("");
$("#word").html("");
for(var i = 0; i < letters.length; i++) {
    $("#word").append("<span>"+letters[i]+"</span>");
}

This should recreate the word that you had before, just split into the constituent letters. These can be accessed with

$("#word").eq(index); 

where index is the position of the letter in the original word.

If you create a function that you can supply a word and an element such as #word from above, then it can check that the word you want to make can be constructed from letters in the #word element, then you can animate the separate letters to either hide or move them depending on whether they are used in the final word.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.