このページで学習出来る事
何処かのサイトで、文字が動く[JavaScript]を見まして、それにインスパイヤを受け複数個同時に変わるヤツを作ってみました。今回はそれを紹介したいと思います。
学習内容
-
jQueryへの変数の渡し方
-
jQueryのメソッドチェンのやり方
-
jQueryのアニメーション
この学習で使用するソースコード類はここからダウンロードできます。
実際に動いているチャットはこちらから確認できます。
サンプルコード[HTML]
まずはhtmlファイルからですが、htmlファイルに関しては[jQuery]や[javascript]の読み込み、[span view=”,,”]で[jQuery]に値を渡す書き方をしています。
[span view=”,,”]のカンマで区切られた値が動く文字として表示されます。
<!doctype html>
<html lang="jp">
<head>
<title>Taru-View-Str</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="./viewStr.js"></script>
<link href="./viewStr.css" rel="stylesheet">
</head>
<body>
<p>個人的な緊急事態宣言を「JavaScript[jQuery]」で動かしてみました。</p>
<p>
自分の
<span view="太田胃散（粉末）,ブログのPV数,自転車"></span>
が
<span view="床にこぼれて,ほぼ自分,消えていて"></span>
<span view="しまい,ということで,..."></span>
緊急事態宣言です。
</p>
<p></p>
<a href="https://www.taru-net.jp/">TARU-NET</a>
</body>
</html>
サンプルコード[JavaScript]
続いて[Javascript]の処理になります。
DOMの更新がされたときに実行される[$(document).ready]、実際にアニメーション操作をする[strView]が主要機能です。
function strView () {
$("[view]").attr("view", function(self, msg) {
var $self = $(this);
var $arrayMsg = msg.split(",");
var arrayLen = $arrayMsg.length;
var count = 0;
for(var i=0; i<arrayLen; i++) {
$self.append($('<span/>',{text:$arrayMsg[i]}));
}
$arrayMsg = $self.find("span").hide();
(function loop() {
$self.animate({width: $arrayMsg.eq(count).width()});
$arrayMsg.stop().fadeOut().eq(count).fadeIn().delay(3000).show(loop);
if (count == (arrayLen)-1) {
count = 0;
} else {
count = count + 1
}
}());
});
}
//console.log(count);
$(document).ready(function() {
strView();
});コードの解説 JavaScript
‘[span]タグに記載されている値を取得します。
$(“[view]”).attr(“view”, function(self, msg)
‘使用する変数を設定しています。
‘jQueryの関数を設定しています。
var $self = $(this);
‘カンマ区切りで取得した値を配列に入れています。
var $arrayMsg = msg.split(“,”);
‘カンマで区切った配列の要素をカウントしています。
var arrayLen = $arrayMsg.length;
‘配列の要素数分繰り返し[append]でDOMの要素を追加しています。
for(var i=0; i<arrayLen; i++) {
$self.append($(‘<span/>’,{text:$arrayMsg[i]}));
}
‘[span]の箇所を非表示にしています。
$arrayMsg = $self.find(“span”).hide();
‘[eq]で取り出した[count番目]のエレメントをアニメーションの対象にしています。
$self.animate({width: $arrayMsg.eq(count).width()});
‘メソッドチェーンによって順番にアニメーション処理をしています。
‘一旦停止()→フェードアウト→対象の文字→フェードイン→3秒待つ→表示
$arrayMsg.stop().fadeOut().eq(count).fadeIn().delay(3000).show(loop);
[.]を繋げることで処理を実施することをメソッドチェーンと言います。
jQueryでは多くのメソッドチェーンを使う場面がありますので、使い方を覚えておくと処理が楽になります。
最後に
以上で文字の動かし方解説となります。アニメーションの部分を変更すれば、もっと良い感じに改造できると思います。
アニメーション系は結構コピーして終わる方も多いと思いますが、表示の仕方などを覚えることによって、サンプルを改修するなどオリジナルな表現をすることも出来ると思います。