Rotating text with Javascript

I'd like to cycle through an array of words creating a text rotation affect. I have most of it working as expected. Is there any way I can use a css transition on the length of the p element?

When traversing from an object with char.length > 10 to an object with char.length < 5 (for example) the movement isn't smooth and I'd like to ease the movement of the text around the word rather than abruptly jumping backwards (or forwards depending on the length of the word)

HTML:

<p><span id="description-rotate"></span> something built on something else.</p>

SASS:

@-webkit-keyframes rotate-text

    0%
        opacity: 0

    30%
        opacity: 1

    50%
        opacity: 1

    70%
        opacity: 1


    100%
        opacity: 0

p
    font-family: 'Helvetica', sans-serif

.rotate-text
   -webkit-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -moz-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -o-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite

Javascript:

var descriptionArray = ['some text', 'some more text', 'some even longer text'];
var descriptionLength = descriptionArray.length;
var description = $('#description-rotate');

function loop(i) {
     description.text(descriptionArray[i%descriptionLength]);
     setTimeout(function() {
        loop(i+1);
        description.addClass('rotate-text');
    }, 3050); // This duration must match the length of the animation
}

loop(0);

I realize this may be a poor way of explaining my goal, check out the CodePen for a better idea of what I'm trying to create.

Thanks!

See: http://codepen.io/anon/pen/JueGx

---

You don't need CSS3 .
Still in 2014 lacks of support and due to -vendor-specific prefixes makes our living pretty hard.
All you need:

http://jsbin.com/rotating-text-with-javascript/

var arr = ['1 some text', '2 some more text', '3 some even longer text'],
    i = 0, // Start Index
    len = arr.length,
    $el = $('#description-rotate'),
    $temp = $('<span />'); // Helper - Will measure Text width

$temp.hide().appendTo( $el.parent() ); // Setup Helper

(function loop() {
  var w = $temp.text( arr[i%=len] ).width(); // set text + get width
  $el.fadeTo(600,0).animate({width: w}, 300, function(){
    $(this).text( arr[i++] ).fadeTo(600, 1);
  });
  setTimeout(loop, 3000);
}());

and just this CSS:

#description-rotate{ // The span holding the text
   vertical-align: top;
}

For another similar approach see also this SO. answer

---

How about jQuery's animate() function? http://api.jquery.com/animate/

You can trigger an animation for each word in the array. Here's an idea, you will have to figure out how populate the variables hasMoreWordsInTheArray and nextWordInTheArray :

function animateParagraphTag(word) {
    if(hasMoreWordsInTheArray) {
        //some special code to calculate the best width based on the word's length (theNewWidthValue)
        $('p').animate(
            { width: theNewWidthValue },
            "fast",
            animateParagraphTag(nextWordInTheArray)
        );
    }
}

You will have to calculate the width based on the length of the words and place that within the parameters of the animation, then, once the p tag finishes the expansion/contraction accordingly, it will trigger the callback function, you can then move on to the next element (word) of the array.

链接地址: http://www.djcxy.com/p/79270.html

上一篇: 使用鲍尔玩

下一篇: 用Javascript旋转文字