テキストの動き
-バラバラに出現-
See the Pen 8-1 バラバラに出現 by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.
「Result」下のRerunを押して動きを確かめてね!↑
動きを実現する仕組み
JavaScriptを使い画面が読み込まれたら1文字づつ<span>タグを付与する。
また、画面が読み込まれた時とスクロールをした時にTextRandomAnimeにappearRandomtextというCSSアニメーション用のクラス名をつける。
appearRandomtextがついたらCSSでspanタグの透過を0から1に変化させ、spanタグのついた2の倍数と3の倍数+1の文字列にアニメーションの遅延をかけてバラバラに出現させる。
[使用するライブラリ]
*jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/8-1.css"> </head>
- body内のテキストを表示させたい場所にHTMLを記載します。
<p class="TextRandomAnime">テキストがバラバラに出現します</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-1.js"></script> </body>
自作のCSS内の書き方
.TextRandomAnime span{
opacity: 0;
}
.TextRandomAnime.appearRandomtext span{
animation:text_randomanime_on .5s ease-out forwards;
}
/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
0% {opacity:0;}
100% {opacity:1;}
}
.TextRandomAnime.appearRandomtext span:nth-child(2n) {
animation-delay: .5s;/* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}
.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
animation-delay: .15s;/* spanのついた3の倍数+1の文字列の変化を0.15秒遅らせる*/
}
自作のJS内の書き方
// TextRandomAnimeにappearRandomtextというクラス名を付ける定義
function TextRandomAnimeControl() {
$('.TextRandomAnime').each(function () {
var elemPos = $(this).offset().top - 50;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
$(this).addClass("appearRandomtext");
} else {
$(this).removeClass("appearRandomtext");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
TextRandomAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述
// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
//spanタグを追加する
var element = $(".TextRandomAnime");
element.each(function () {
var text = $(this).text();
var textbox = '';
text.split('').forEach(function (t) {
textbox += '<span>' + t + '</span>';
});
$(this).html(textbox);
});
TextRandomAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!