テキストエリアの各ラインをアニメ化する

Question

私は、テキストエリアの各行に休憩を入れずにアニメートしたいと思います。このようなもの（https://greensock.com/SplitText）。これはjQueryで可能ですか（Greensockはありません）。

最高の願い

Answer 1

はい。それが可能だ。

typeItライブラリを使用できます。

そして、あなたは、各行の後にいくつかのCSSアニメーションを必要とする場合には、あなたがここに私の答えをチェックアウトすることができます https://stackoverflow.com/a/43222060/1907391

は、コールバック関数から.empty()を削除します。

ここにスニペットがあります。

$(document).ready(function() { 
 
    var ara = ['Text 1', 'Text 2', 'Text 3', 'Text 4', 'TypeIt is the most versatile jQuery animated typing plugin on the planet. In simple use, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles HTML tags & entities.', 'For more advanced, controlled typing effects, TypeIt comes with companion functions that can be chained to control your typing down to the smallest character, enabling you to type an dynamic narrative, with complete control over speed, characters, line breaks, deletions, pausing, everything.']; 
 
    doType(); 
 

 
    function doType() { 
 
    //var x = ara.pop(); 
 
    $('.type-it').typeIt({ 
 
     strings: ara, 
 
     speed: 110, 
 
     breakLines: true, 
 
     callback: function() { 
 
     $('.type-it').delay(2000).queue(function() {}) 
 
     } 
 
    }); 
 
    } 
 
});

.type-it { 
 
    transition: all 0.5s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script> 
 
<div class="type-it"></div>

あなたは単語ごとにサブ要素を作成することにより、個々の単語をアニメーション化することができ、ここでいくつかの他のアニメーションプラグインhttp://www.learningjquery.com/2016/06/12-jquery-plugins-to-animate-text

Answer 2

を見つけることができます。

$("#text").html(function() { 
 
    return "<div>" + $(this).html().split(" ").join("</div><div>") + " </div>"; 
 
}); 
 

 
setTimeout(function(){ 
 
    $("#text div:nth-child(even)") 
 
    .addClass("even",1000); 
 
    $("#text div:nth-child(odd)") 
 
     .addClass("odd",1000); 
 
},2000);

#text { 
 
    height:3em; 
 
    overflow:hidden; 
 
} 
 

 
#text div { 
 
    float:left; 
 
    margin-left:5px; 
 
} 
 

 
.even { 
 
    margin-top:-2em; 
 
} 
 

 
.odd { 
 
    margin-top:4em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div id="text"> 
 
    This is a great text area. 
 
</div>