[英]Rotating text with Javascript
我想循环创建一个文字旋转效果的单词数组。 我的大部分都按预期工作。 有什么办法可以在p元素的长度上使用css转换吗?
从char.length> 10的对象遍历到char.length <5的对象(例如)时,运动不顺畅,我想放松文本在单词周围的移动,而不是突然向后跳(或根据单词的长度转发)
HTML:
<p><span id="description-rotate"></span> something built on something else.</p>
上海社会科学院:
@-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);
我意识到这可能是解释我的目标的一种不好的方式,请查看CodePen以更好地了解我正在尝试创建的内容。
谢谢!
请参阅: http : //codepen.io/anon/pen/JueGx
一个使用jQuery的简单示例
是通过将所需的循环/交换字存储到data-*
属性中:
$("[data-words]").attr("data-words", function(i, words) { var $self = $(this).text(""), words = words.split("|"), tot = words.length, c = 0; for(var i=0; i<tot; i++) $self.append($('<span/>',{text:words[i]})); var $words = $self.find("span"); (function loop(){ $self.animate({ width: $words.eq( c ).width() }); $words.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop); c = ++c % tot; }()); });
/* DATA-WORDS Loop/swap words in sentence */ [data-words] { vertical-align: top; position: static; } [data-words] > span { display: none; position: absolute; color: #0bf; }
<p> This is <span data-words="some|an interesting|some longer">some</span> text </p> <p> Say <span data-words="hi|wow">hi</span> to <span data-words="Javascript|Stack Overflow">mom</span> </p> <script src="//code.jquery.com/jquery-3.1.0.js"></script>
|
-delimited words将转换为Array,最后转换为child <span>
元素 span
元素需要绝对定位在父span
jQuery的animate()
函数怎么样? http://api.jquery.com/animate/
您可以为数组中的每个单词触发动画。 这是一个想法,你将不得不弄清楚如何填充变量hasMoreWordsInTheArray
和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)
);
}
}
您必须根据单词的长度计算宽度并将其放置在动画的参数内,然后,一旦p标签相应地完成扩展/收缩,它将触发回调函数,然后您可以继续数组的下一个元素(单词)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.