はじめに
ポートフォリオサイトの見栄えをよくするため、jQueryのプラグインを使いタイピングアニメーションを実装しました。
ものすごく簡単に出来たので備忘録としてまとめたいと思います。
実装イメージ↓
目次
1.htmlの記述
2.cssの記述
3.jQueryの記述
1. htmlの記述
<body>
<div class="typing">
<div class="typed_wrap">
<h1><span class="typed"></span></h1>
</body>
2. cssの記述
.typing {
height: 100%;
width: 100vw;
position: relative;
background-image: url('images/my-icon.JPG');
background-size: 100vw 100vh;
}
.typed_wrap {
position: absolute;
width: 100vw;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(7, 6, 6, 0.5);
}
.typed_wrap h1 {
color: #FFF;
font-family: 'Times New Roman', Times, serif;
font-size: 3rem;
height: 200px;
line-height: 200px;
}
.typed::after {
content: "|";
animation: blink 0.7s infinite;
}
@keyframes blink {
50%{opacity: 0;}
}
typing
背景画像になる一番下の層です。
cssで画面いっぱいまで広げます。
また上の層のtyped_wrapの位置調整のためにposition:relativeを設定します。
typed_wrap
position:absoluteで画面中央になるように位置を調整します。
text-align:centerでタイピングされる文字が中央になるように設定。
backgroundで背景を半透明になるように調整
typed_wrap h1
文字の大きさや文字の色、字体はお好みで調整可能です。
heightとline-heightの値を一致させて上下も中央になるように設定します。
typed::after
spanタグに擬似クラスを付与してタイピングされた文字の最後にバーを設置します。
アニメーションの内容はお好みですが、今回はblinkを設定し、0.7秒毎に点滅するようにします。
@keyframesでアニメーションの開始から終了までの詳細を設定出来ます。
50%{opacity: 0;}と記述することでアニメーションの中間地点で透明になるという意味になります。
詳しくはこの記事が参考になります
3. jQueryの記述
まずは、jQueryとTyped.jsというプラグインを読み込みます。
bodyの閉じタグの前に記述します。
これでjsファイルでTyped.jsのメソッドを使えるようになります。
<body>
.
.
.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>
</body>
jQueryを記述します
$(function() {
//タイピングアニメーション
$('.typed').typed({
strings: ["welcome to My Portfolio.", "Let's scroll down."],
typeSpeed: 100,
startDelay: 1000,
backSpeed: 20,
loop: true,
loopCount: Infinity,
showCursor: false,
backDelay: 500
});
});
$('.typed')でspanタグの要素をとってきます。.typedがプラグインで使えるメソッドです。
設定できる内容は以下の通りです。
- strings: タイピング入力させる文字を指定します。
- typeSpeed: タイピングのスピードを指定します。
- startDelay: タイピングがスタートするまでの時間を指定します。
- backSpeed: バック（文字を削除）するスピードを指定します。
- backDelay: バック（文字を削除）するまでの時間を指定します。
- loop: タイピングをループさせるかを指定します。（true、false）
- showCursor: カーソル文字を指定します。
- loopCount: ループさせる回数を指定します。
- contentType: テキストがhtmlかtextかを指定します。
ここまででタイピングアニメーションを実装できると思います！
js部分の数値もお好みで調整可能です。
おわりに
実装は以上になります！
最後まで読んでいただきありがとうございました！
お疲れさまでした。。。