可以分別爲每個字母設置動畫效果嗎？

是否有辦法單獨爲單詞中的每個字母製作動畫，僅使用CSS？可以分別爲每個字母設置動畫效果嗎？

我想這是可能的，使用javascript/jquery，遍歷單詞作爲字母數組。

但在這裏我正在尋找一個簡單的方法..

2012-05-12 BSG

你做了什麼？ – 2012-05-12 10:17:56

無論你用CSS或JavaScript這樣做，你（或庫）將不得不把每個字母在自己的元素，爲了單獨製作動畫。例如： -

<p>Hi there</p>

...需要成爲

<p><span>H</span><span>i</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span></p>

這使我想到一個JavaScript的解決方案可能是首選，否則您的標記將是一個有點...不愉快寫。

隨着使用jQuery JavaScript的，它很容易與一羣包含文本字符一個字符跨度來替換元素的文本：

var target = $("#target"); 
target.html(target.text().replace(/./g, "<span>$&</span>"));

然後你動畫span秒。（注意：我假設這裏所討論的元素包含只文本，而不是文本和子元素，如果你有子元素它是更爲複雜的。）

這裏是一個非常簡單的例子：

HTML：

<p id="target" style="margin-top: 20px">Hi there</p>

的JavaScript：

jQuery(function($) { 

    var target = $("#target"); 
    target.html(target.text().replace(/./g, "<span>$&</span>")); 

    setTimeout(runAnimation, 250); 

    function runAnimation() { 
    var index, spans; 

    index = 0; 
    spans = target.children(); 
    doOne(); 

    function doOne() { 
     var span = $(spans[index]); 
     if (!$.trim(span.text())) { 
     // Skip blanks 
     next(); 
     return; 
     } 

     // Do this one 
     span.css({ 
     position: "relative", 
     }).animate({ 
     top: "-20" 
     }, "fast").animate({ 
     top: "0" 
     }, "fast", function() { 
     span.css("position", ""); 
     next(); 
     }); 
    } 

    function next() { 
     ++index; 
     if (index < spans.length) { 
     doOne(); 
     } 
     else { 
     setTimeout(runAnimation, 500); 
     } 
    } 
    } 

});

Live copy | source

來源

2012-05-12 10:19:51

恐怕那是唯一的出路。：/ – BSG

+'d，但是如果OP有一個小提琴玩的話，它會更大+ – Zuul

謝謝你的努力。 :) – BSG

這是不可能的只有CSS（直到有一個第n個字母的規範被接受）。與此同時，您可以使用lettering.js http://letteringjs.com/將每個字母包裹在一個範圍中，然後獨立地爲每個字母製作動畫。

來源

2012-05-12 17:44:54

謝謝。我會看着這個。 – BSG

-1

該技術T.J. Crowder描述的非常好，但它不適用於更復雜的情況。跨越的空白區域消失，這可能會導致一些問題。如果將跨度的顯示設置爲內聯塊（您需要它，爲某些屬性設置動畫效果），則最終會出現一個長單詞。所以這個技巧對於簡單的淡入/淡出動畫非常棒，但對於更高級的情況，我會推薦這個jQuery插件https://github.com/jschr/textillate/blob/master/jquery.textillate.js。

P.S.

我修改先生。克羅德代碼，以便它工作正常空格：

var target = $("#test"); 
target.html(target.text().replace(/./g, "<span>$&</span>").replace(/\s/g, "&nbsp;"));

我的動畫它使用TweenMax staggerFromTo（）方法，併爲我工作得很好。

這是一些演示：http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/

來源

2013-05-22 14:23:27

可以分別爲每個字母設置動畫效果嗎？

回答

相關問題