テキストの動き
-ランダムに出現-
See the Pen 8-8 ランダムに出現 by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
動きを実現する仕組み
JavaScriptライブラリのtextillate.jsとlettering.js、CSSライブラリの「animate.css」の動きを組み合わせrandomAnimeとついた文字列のアルファベット1文字づつをランダムに出現させる。
[使用するライブラリ]
*jQuery
*textillate.js(https://github.com/jschr/textillate)
*lettering.js(https://github.com/davatron5000/Lettering.js)
*animate.css(https://daneden.github.io/animate.css/)
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <link rel="stylesheet" type="text/css" href="css/8-8.css"> </head>
- body内のテキストを表示させたい場所にHTMLを記載します。
<p class="randomAnime">ランダムに出現する</p>
- body 終了タグ直前にjQuery、textillate.js、lettering.jsと、動きを制御する自作のJS の4 つを読み込みます。
※lettering.jsは、https://github.com/davatron5000/Lettering.jsからダウンロードして使用してください<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script> <script src="js/jquery.lettering.js"></script> <!--自作のJS--> <script src="js/8-8.js"></script> </body>
自作のCSS内の書き方
.randomAnime {
visibility: hidden;
}
自作のJS内の書き方
var Obj = {
loop: false,
minDisplayTime: 2000,// アニメーションの間隔時間
initialDelay: 500, // アニメーション開始までの遅延時間
autoStart: true,
in: {
effect: 'fadeInUp',//animate.css の中にある採用したい動きのクラス名
delayScale: 1,// 遅延時間の指数
delay: 100,// 文字ごとの遅延時間
sync: false,// アニメーションをすべての文字に同時適用するかどうか
shuffle: true,// 文字表示がランダムな順に表示されるかどうか
},
out: {// 終了時のアニメーション設定をしたい場合はここに追記
}
}
var element
//初期設定
function RandomInit() {
element= $(".randomAnime");
$(element[0]).textillate(Obj);
}
function RandomAnimeControl() {
var elemPos = $(element[1]).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
$(element[1]).textillate(Obj);
}
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
RandomAnimeControl();/*アニメーション用の関数を呼ぶ*/
});//ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
RandomInit(); /*初期設定を読み込み*/
RandomAnimeControl();/*アニメーション用の関数を呼ぶ*/
});//ここまで画面が読み込まれたらすぐに動かしたい場合の記述
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!