テキストの動き
-回転-
動きを実現する仕組み
JavaScriptを使い、画面が読み込まれたら1文字づつ<span>タグを付与する。
<span>タグにはCSSのanimation-delay(アニメーション開始の遅延時間)を直接指定して遅延時間を自動的に増やす。
画面が読み込まれた時と、スクロールした時にHTML内のrollAnimeにrollというクラス名を付け、CSSのアニメーションを使って、<span>タグを回転させる。
[使用するライブラリ]
*jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-7.css"> </head>
- body内のテキストを表示させたい場所にHTMLを記載します。
<p class="rollAnime">テキストが回転します</p>
- body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/8-7.js"></script> </body>
自作のCSS内の書き方
.rollAnime.roll span {
transition-property: opacity,transform;
transform: rotateY(360deg);
transition: all .8s cubic-bezier(.77,0,.175,1);
transition-timing-function: cubic-bezier(.77,0,.175,1);
display: inline-block;
}
自作のJS内の書き方
// rollAnimeにrollというクラス名を付ける定義
function RollAnimeControl() {
$('.rollAnime').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
var childs = $(this).children(); //rollAnimeの子要素を取得
if (scroll >= elemPos - windowHeight) {
$(childs).each(function (i) { //子要素を1つ1つ処理をおこなう
if (i < 10) { //10未満の場合
$(this).css("transition-delay","."+i+"s"); //子要素にcsstransition-delayを追加
}else { //10以上の場合
var n = i / 10; //ミリ秒指定なので10で割る
$(this).css("transition-delay",n+"s"); //子要素にcsstransition-delayを追加
}
});
$(this).addClass("roll"); //rollというアニメーションクラスを付与
} else {
$(childs).each(function () { //子要素を1つ1つ処理をおこなう
$(this).css("transition-delay","0s");//子要素にcsstransition-delayの秒を0とする
});
$(this).removeClass("roll");//rollというアニメーションクラスを除去
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
//spanタグを追加する
var element = $(".rollAnime");
element.each(function () {
var text = $(this).text();
var textbox = [];
text.split('').forEach(function (t, i) {
if (t !== " ") {
if (i < 10) {
textbox += '<span style="transition-delay:.' + i + 's;">' + t + '</span>';
} else {
var n = i / 10;
textbox += '<span style="transition-delay:' + n + 's;">' + t + '</span>';
}
} else {
textbox += t;
}
});
$(this).html(textbox);
});
RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!