JavaScriptでかっこいいランディングページを作ろう!

こんにちは。KOUKIです。

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

実装するもの

今回は、かっこいいランディングページの作り方について学習しました。※CSSは難しいので、JavaScriptにのみ注力しましょう!

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

環境構築

最初に、簡単な環境構築をお願いします。

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

ps.jpgは、「こちら」、xbox.jpgは、「こちら」です。

CSS版

開発

ページの作成

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

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

スタイルの追加

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

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

JavaScriptの実装

このアプリケーションの鍵は、先ほど設定したCSSの「hover-left, hover-right」です。

このクラスを「container」クラスが付与された要素に追加するとエフェクトをつけることができます。

要素を取得する

JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。

mouseenterイベントの登録

次にmouseenterイベントを登録しましょう。

これで、カーソルを当てた時に要素が広がります。

mouseleaveイベントの登録

次にmouseleaveイベントを登録しましょう。マウスを要素から離した時のイベントです。

これでOKです。CSSができればJavaScriptでエフェクトをつけることはさほど難しくありません。

おわりに

JavaScriptのmouseenter/mouseleaveイベントを使うとクラスの付け替えがとても簡単に実装できましたね。

あとは、CSSができればかっこいいWebページが作り放題です^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す