旋转文本与Javascript [英] Rotating text with Javascript

问题描述

我想循环通过一个单词数组，创建文本旋转效果。我的大部分工作按预期。有什么办法我可以使用一个css过渡的p元素的长度？

当从一个char.length> 10的对象到具有char的对象。长度< 5（例如）运动不平滑，我想缓解文字周围的文字的运动，而不是突然向后跳（或向前取决于单词的长度）

HTML：

 < p>< span id =description-rotate> ; / span>某事建立在别的东西上。< / p> 
  

SASS：

 code> @  -  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立方贝赛尔（0.645,0.045,0.355,1.000）infinite 
 -moz-animation：rotate-text 3050ms立方贝赛尔（0.645,0.045,0.355,1.000）infinite 
 -o-animation：rotate-文本3050ms立方贝赛尔（0.645,0.045,0.355,1.000）无限
动画：旋转文本3050ms立方贝赛尔（0.645,0.045,0.355,1.000）无限
  

Javascript：

  var descriptionArray = '，'一些更多的文本'，'一些甚至更长的文本']; 
 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）; //此持续时间必须与动画的长度匹配
} 
 
 loop（0）; 
  

我意识到这可能是解释我的目标的一个糟糕的方法，检查CodePen一个更好的主意

请参阅：http://codepen.io/anon/pen/JueGx

解决方案

div>

您不需要CSS3 。

仍然在2014年缺乏支持，由于 -vendor特定
您需要的全部：

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

  var arr = ['1 some text'，'2 some more text'，'3 some even longer text']，
i = 0，//开始索引
 len = arr.length，
 $ el = $（'＃description-rotate'），
 $ temp = $（'< span /> ;'）; // Helper  -  Will measure Text width 
 
 $ temp.hide（）。appendTo（$ el.parent（））; //设置助手
 
（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 ）; 
}）; 
 setTimeout（loop，3000）; 
}（））; 
  

只是这个CSS：

 ＃description-rotate {//包含文本的span 
 vertical-align：top; 
} 
  

另一个类似的方法 =http://stackoverflow.com/questions/20695877/how-to-fade-animate-and-change-text-word-in-title-sentence> 此SO。回答

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

这篇关于旋转文本与Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！