JavaScriptでTestimonial Boxアプリを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、Testimonial Boxを作りましょう。ちなみに、Testimonialとは「お客様の声」と言う意味です。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

ユーザーの情報は、RANDOM USER GENERATORから取得しています。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

プログレスバーの進捗表示はCSSで制御しているため、この時点でバーが動きます。

infiniteを指定するとアニメーション(grow)を無限に繰り返すようです。linearは、アニメーションを開始から終了まで一定間隔で実行します。

「transform-origin: left」では、アニメーション開始点を左側に指定してます。

アニメーション(grow)では「transform: scaleX(0);」にて、プログレスバーを消します。そして、プログレスバーには「width: 100%;」を指定しているので、アニメーションでじわりじわりと表示されるようです。

JavaScriptの実装

要素を取得

最初に、画面操作に必要な要素を取得します。

お客様の声を定義

お客様の声を定数として定義します。

APIから動的に取得することもできそうですが、処理が複雑になるので定数で定義しています。

アップデート処理

最後に、一定間隔ごとにお客様の声をアップデートする処理を実装します。

setIntervalは、第一引数に指定した関数を、指定した間隔で実行してくれる便利メソッドです。

これで、完成です。

おわりに

個人的には、CSSのプログレスバーの実装が興味深かったですね。アニメーションを駆使すれば、JavaScriptを使わなくても動的な動きを実装できる。。奥が深いですね^^

スタイルを簡単に実装できるようになれば、アプリケーション開発も楽しくなると思うので、勉強していきたいです。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す