textFx
work/テキストアニメーションテスト/text-anime-test/
参照サイトのtest.jsは左側にインデントが入っているためにそのままコピペしても動かない。参照サイトからコピペするならインデント箇所は削除する。
削除したもの↓
test.js
$(function() {
$(‘.test‘).textFx({
type: ‘fadeIn’,
iChar: 40,
iAnim: ‘3500’
});
});
html
<!–テキストアニメーション–>
<script type=”text/javascript” src=”js/jquery-1.11.3.min.js”></script>
<script type=”text/javascript” src=”js/jquery.transit.js”></script>
<script type=”text/javascript” src=”js/jquery.textFx.js”></script>
<script type=”text/javascript” src=”js/test.js”></script>
<div class=”col-lg-12″ style=”text-align: center;”>
<span class=”test” style=”font-size: 50px;”>株式会社AMGSolution</span>
</div>
べつなやつ↓
textillate
公式サイトでエフェクトの様子が見れる
desktop/webコンテンツツール/テキストアニメーション-textillate/textillate
または、work/テキストアニメーションテスト/text-anime-test/内にある
https://www.plusdesign.co.jp/blog/?p=3372
https://liginc.co.jp/web/js/jquery/16661
<!–テキストアニメーション2–>
<script type=”text/javascript” src=”textillate/jquery.lettering.js”></script>
<script type=”text/javascript” src=”textillate/jquery.textillate.js”></script>
<script type=”text/javascript” src=”textillate/test2.js“></script>
<link href=”textillate/animate.css” rel=”stylesheet”>
■test2.js
$(function() {
$(‘.ef‘).textillate({
// ループのオンオフ、falseの場合、outは発動しない
loop: false,
// テキストが置き換えられるまでの表示時間
minDisplayTime: 2000,
// 遅延時間
initialDelay: 0,
// アニメーションが自動的にスタートするかどうか
autoStart: true,
// フェードインのエフェクトの詳細設定
in: {
// エフェクトの名前（animate.cssをご参照下さい）
effect: ‘fadeInLeftBig’,
// 遅延時間の指数
delayScale: 1.5,
// 文字ごとの遅延時間
delay: 50,
// trueにすることでアニメーションをすべての文字に同時に適用される
sync: false,
// trueにすることで文字を順番にではなく、ランダムに入ってくるようにする
// (注：syncがtrueの場合は無効になる)
shuffle: false
},
// フェードアウトのエフェクトの詳細設定(同上)
out: {
effect: ‘hinge’,
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
});
スクロールダウンして該当要素が見えたらアニメーションが発動するようにするにはどうしたらいいのかわからない。ページ読み込み時にイベントが発生する。
スクロールイベントの設定がわからん
■html
<div class=”col-lg-12″ style=”text-align: center;”>
<span class=”ef” style=”font-size: 50px;”>textillate textillate</span>
</div>