ランダムに変化しながら表示されるモーションテキスト
Index
― 目次 ―モーションテキストの仕様
今回作成する「ランダムに変化しながら表示されるモーションテキスト」の仕様は、以下のように作成していきます。
仕様について- ランダムに文字列が表示された後「指定のテキスト」が表示される
- 画面のスクロール位置に応じて処理を実行
※「指定のテキスト」を基準に、その要素から画面のスクロール位置を判定し処理を実行 - 背景(background-image)ではなく、画像の上にテキストを表示
- 端末ごとのレスポンシブ対応
※デバイス幅に応じて、モーションテキストのフォントサイズを可変対応(デバイス幅に応じて、見易いフォントサイズに最適化)
モーションテキストのサンプル
以下が「ランダムに変化しながら表示されるモーションテキスト」のサンプルです。
※画面を上下にスクロールさせると表示内容を確認できます
― モーションテキストのサンプル ―
Cross
Country
Vehicle
「モーションテキストのサンプル」のHTML・CSS・JavaScript(jQuery)については、以下のソースをご参照ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- モーションテキスト --> <div class="visual-img"> <h1 class="motion-text TypingTextRandom">Cross</h1> <h1 class="motion-text TypingTextRandom">Country</h1> <h1 class="motion-text TypingTextRandom">Vehicle</h1> <img src="ビジュアルイメージ画像のパス" alt="ビジュアルイメージ"> </div> ・ ・ ・ <!-- jQuery CDN --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <!-- Shuffle Text CDN --> <script src="https://cdn.jsdelivr.net/npm/shuffle-text@0.5.0/build/shuffle-text.min.js"></script> </body> |
[補足]
3～5行目がモーションテキストの記述。
クラス「TypingTextRandom」を適応した要素(h1内のテキスト)に対してモーションが実行されます。
※クラス「TypingTextRandom」は、後程説明するJavaScript(jQuery)側でクラス名を指定する必要があります
6行目がビジュアルイメージ画像のパス。
※CSS側で画像の上にモーションテキストが表示されるように設定します
12行目がjQuery CDNのjQuery本体を読み込むための記述。
※「jQuery CDN」から最新版(現時点での最新版は3.7.1)のコードをコピーして貼り付けます
14行目がShuffle Text CDN(ライブラリ)を読み込むための記述。
※「Shuffle Text CDN」から最新版(現時点での最新版は0.5.0)のファイルのURLを貼り付けます
3～5行目がモーションテキストの記述。
クラス「TypingTextRandom」を適応した要素(h1内のテキスト)に対してモーションが実行されます。
※クラス「TypingTextRandom」は、後程説明するJavaScript(jQuery)側でクラス名を指定する必要があります
6行目がビジュアルイメージ画像のパス。
※CSS側で画像の上にモーションテキストが表示されるように設定します
12行目がjQuery CDNのjQuery本体を読み込むための記述。
※「jQuery CDN」から最新版(現時点での最新版は3.7.1)のコードをコピーして貼り付けます
14行目がShuffle Text CDN(ライブラリ)を読み込むための記述。
※「Shuffle Text CDN」から最新版(現時点での最新版は0.5.0)のファイルのURLを貼り付けます
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/* 共通 */ /* Motion Text */ .motion-text { position: absolute; color: #000000; font-weight: 600; } /* 1つ目の要素に適応 */ .motion-text:first-child { top: 25%; left: 8%; } /* 2つ目の要素に適応 */ .motion-text:nth-child(2) { top: 40%; left: 8%; } /* 3つ目の要素に適応 */ .motion-text:nth-child(3) { top: 55%; left: 8%; } /* First Character Color */ h1.motion-text::first-letter { color: #ff0000; } /* PC表示：1100px以上 */ /* Motion Text：固定値 */ @media (min-width: 1100px) { .motion-text { font-size: 82px; letter-spacing: 5px; line-height: 90px; } } /* PC表示：769px～1099px */ /* Motion Text：可変値 */ @media (max-width: 1099px) { .motion-text { font-size: 6.8vw; letter-spacing: 0.5vw; line-height: 7.8vw; } } /* SP・Tablet表示：768px以下 */ /* Motion Text：可変値 */ @media (max-width: 768px) { .motion-text { font-size: 6.5vw; letter-spacing: 0.5vw; line-height: 7.5vw; } } /* Visual Image */ .visual-img { position: relative; } |
[補足]
3～7行目がモーションテキストの共通指定。
※モーションテキストは「position: absolute;」を指定し相対配置にします
10～13行目が1つ目の要素に適応。
※モーションテキスト「Cross」の位置指定をしています
16～19行目が2つ目の要素に適応。
※モーションテキスト「Country」の位置指定をしています
22～25行目が3つ目の要素に適応。
※モーションテキスト「Vehicle」の位置指定をしています
28～30行目が先頭の文字色を赤色に指定。
34～40行目が横幅1100px以上の端末(PC)でのフォントサイズ・文字間隔・行間を固定値(px)で指定。
44～50行目が横幅769px～1099の端末(PC)でのフォントサイズ・文字間隔・行間を可変値(vw)で指定。
54～59行目が横幅768px以下の端末(SP・Tablet)でのフォントサイズ・文字間隔・行間を可変値(vw)で指定。
※横幅1099px以下で表示する際、可変値(vw)を使用することで、画面幅に応じてフォントサイズが自動的に調整されるようになります
63～65行目がビジュアルイメージの指定。
※ビジュアルイメージは「position: relative」を指定し絶対配置にします
※ビジュアルイメージを「position: relative;(絶対値)」、モーションテキストを「position: absolute;(相対値)」とすることで、画像の上にテキストが表示できるようになり(複数の要素を重ね合わせたレイヤー構造が可能となり)、絶対値の要素(ビジュアルイメージ)からの位置指定が可能となります
3～7行目がモーションテキストの共通指定。
※モーションテキストは「position: absolute;」を指定し相対配置にします
10～13行目が1つ目の要素に適応。
※モーションテキスト「Cross」の位置指定をしています
16～19行目が2つ目の要素に適応。
※モーションテキスト「Country」の位置指定をしています
22～25行目が3つ目の要素に適応。
※モーションテキスト「Vehicle」の位置指定をしています
28～30行目が先頭の文字色を赤色に指定。
34～40行目が横幅1100px以上の端末(PC)でのフォントサイズ・文字間隔・行間を固定値(px)で指定。
44～50行目が横幅769px～1099の端末(PC)でのフォントサイズ・文字間隔・行間を可変値(vw)で指定。
54～59行目が横幅768px以下の端末(SP・Tablet)でのフォントサイズ・文字間隔・行間を可変値(vw)で指定。
※横幅1099px以下で表示する際、可変値(vw)を使用することで、画面幅に応じてフォントサイズが自動的に調整されるようになります
63～65行目がビジュアルイメージの指定。
※ビジュアルイメージは「position: relative」を指定し絶対配置にします
※ビジュアルイメージを「position: relative;(絶対値)」、モーションテキストを「position: absolute;(相対値)」とすることで、画像の上にテキストが表示できるようになり(複数の要素を重ね合わせたレイヤー構造が可能となり)、絶対値の要素(ビジュアルイメージ)からの位置指定が可能となります
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/*---------------------------------------------------------- ランダムに変化しながら表示されるモーションテキストの設定 ----------------------------------------------------------*/ var arr = [] // 初期設定 function TypingInit() { $('.TypingTextRandom').each(function (i) { // クラスTypingTextRandomに対して処理を実行 arr[i] = new ShuffleText(this); // 動作させるテキストを配列に格納 }); } // スクロールした際のモーション設定 function TypingAnime() { $(".TypingTextRandom").each(function (i) { var elemPos = $(this).offset().top - 50; // 要素より50px上 var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll >= elemPos - windowHeight) { if(!$(this).hasClass("endAnime")){ // endAnimeのクラスがあるかをチェック arr[i].start(); // 配列で登録テキストのモーションを実行 arr[i].duration = 800; // テキストが変化し終えるまでの時間(※規定値600) $(this).addClass("endAnime"); // 1度モーションした場合にendAnimeのクラスを追加 } }else{ $(this).removeClass("endAnime"); // 範囲外にスクロールした場合にendAnimeのクラスを削除 } }); } // 画面をスクロールしたら処理を実行 $(window).scroll(function () { TypingInit(); TypingAnime(); }); |
[補足]
8行目がクラス「TypingTextRandom」に対して処理を実行。
※HTML側でモーションさせたいテキストの要素にクラス「TypingTextRandom」を指定します
15行目がモーションテキストを実行する際のスクロール位置の指定。
※指定のテキスト(クラス「TypingTextRandom」が付与された要素)より50px上にスクロール位置が到達した時
21行目が「テキストが変化し終えるまでの時間」を指定。
31～34行目が「画面をスクロールしたら処理を実行」する関数(初期設定とスクロールした際のモーション設定)を指定。
8行目がクラス「TypingTextRandom」に対して処理を実行。
※HTML側でモーションさせたいテキストの要素にクラス「TypingTextRandom」を指定します
15行目がモーションテキストを実行する際のスクロール位置の指定。
※指定のテキスト(クラス「TypingTextRandom」が付与された要素)より50px上にスクロール位置が到達した時
21行目が「テキストが変化し終えるまでの時間」を指定。
31～34行目が「画面をスクロールしたら処理を実行」する関数(初期設定とスクロールした際のモーション設定)を指定。
今回は「ランダムに変化しながら表示されるモーションテキスト」についてご紹介しました。
モーションテキストの参考になりましたら幸いです。
関連キーワード
今回の記事は、「ランダムに変化しながら表示されるモーションテキスト」についてご紹介します。