JavaScriptでかっこいいスライド画面を作ろう!

こんにちは。KOUKIです。

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

実装するもの

今回は、かっこいいスライド画面を作成します。
※CSSの力もかなり借りてますが、本記事はJavaScriptを中心に解説しています

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

環境構築

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

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

CSS版

ページ(HTML)の作成

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

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

画像は、「imgix」というサービスで取得していますが、現在は見えていません。また、矢印ボタンには「Font Awesome」を使っています。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

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

画像が表示されましたね。slideクラスが付与されているHTML要素に「active」クラスを付与することで画像が表示されるようになります。JavaScriptでこのクラスを操作するわけですね。

JavaScriptの実装

準備が完了したので、JavaScriptを実装していきましょう。

スライドは、HTMLのBodyタグに画像を差し込むことによって実現します。

要素を取得する

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

document.body」はHTMLのBodyタグの情報を取得しています。

Bodyに画像をセットする

次にBodyタグに画像をセットする処理を書きます。

これで、activeSlideが変更されたらバックグラウンドが切り替わるようになりました(CSS実装時の画像だと背景が黒だったのが画像表示される)。

アクティブスライドをセットする

次は、アクティブにするスライドを設定する処理を書きます。

クリックイベントを登録する

最後にクリックイベントを登録しましょう。

これで完成です。

おわりに

めちゃくちゃかっこいいスライドができましたね。実務で使う機会がないことが残念です。。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す