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

こんにちは。KOUKIです。

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

<目次>

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css
└── ps.jpg
└── xbox.jpg

$ tree

├── index.html

├── script.js

└── style.css

└── ps.jpg

└── xbox.jpg

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

CSS版

CSSでかっこいいランディングページをスタリングしよう!

開発

ページの作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Split Landing Page
    </title>
  </head>
  <body>
    <div class="container">
      <div class="split left">
        <h1>Playstation 5</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
      <div class="split right">
        <h1>XBox Series X</h1>
        <a href="#" class="btn">Buy Now</a>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Split Landing Page

</title>

</head>

<body>

<h1>Playstation 5</h1>

</div>

<h1>XBox Series X</h1>

</div>

</body>

</html>

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

スタイルの追加

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

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
  --left-bg-color: rgba(87, 84, 236, 0.7);
  --right-bg-color: rgba(43, 43, 43, 0.8);
  --left-btn-hover-color: rgba(87, 84, 236, 1);
  --right-btn-hover-color: rgba(28, 122, 28, 1);
  --hover-width: 75%;
  --other-width: 25%;
  --speed: 1000ms;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

h1 {
  font-size: 4rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  text-decoration: none;
  color: #fff;
  border: #fff solid 0.2rem;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  width: 15rem;
  padding: 1.5rem;
}

.split.left .btn:hover {
  background-color: var(--left-btn-hover-color);
  border-color: var(--left-btn-hover-color);
}

.split.right .btn:hover {
  background-color: var(--right-btn-hover-color);
  border-color: var(--right-btn-hover-color);
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #333;
}

.split {
  position: absolute;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.split.left {
  left: 0;
  background: url('ps.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.split.left::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--left-bg-color);
}

.split.right {
  right: 0;
  background: url('xbox.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.split.right::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--right-bg-color);
}

.split.right,
.split.left,
.split.right::before,
.split.left::before {
  transition: all var(--speed) ease-in-out;
}

.hover-left .left {
  width: var(--hover-width);
}

.hover-left .right {
  width: var(--other-width);
}

.hover-right .right {
  width: var(--hover-width);
}

.hover-right .left {
  width: var(--other-width);
}

@media (max-width: 800px) {
  h1 {
    font-size: 2rem;
    top: 30%;
  }

  .btn {
    padding: 1.2rem;
    width: 12rem;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {

--left-bg-color: rgba(87, 84, 236, 0.7);

--right-bg-color: rgba(43, 43, 43, 0.8);

--left-btn-hover-color: rgba(87, 84, 236, 1);

--right-btn-hover-color: rgba(28, 122, 28, 1);

--hover-width: 75%;

--other-width: 25%;

--speed: 1000ms;

}

* {

box-sizing: border-box;

}

body {

font-family: 'Roboto', sans-serif;

height: 100vh;

overflow: hidden;

margin: 0;

}

h1 {

font-size: 4rem;

color: #fff;

position: absolute;

left: 50%;

top: 20%;

transform: translateX(-50%);

white-space: nowrap;

}

.btn {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

left: 50%;

top: 40%;

transform: translateX(-50%);

text-decoration: none;

color: #fff;

border: #fff solid 0.2rem;

font-size: 1rem;

font-weight: bold;

text-transform: uppercase;

width: 15rem;

padding: 1.5rem;

}

.split.left .btn:hover {

background-color: var(--left-btn-hover-color);

border-color: var(--left-btn-hover-color);

}

.split.right .btn:hover {

background-color: var(--right-btn-hover-color);

border-color: var(--right-btn-hover-color);

}

.container {

position: relative;

width: 100%;

height: 100%;

background: #333;

}

.split {

position: absolute;

width: 50%;

height: 100%;

overflow: hidden;

}

.split.left {

left: 0;

background: url('ps.jpg');

background-repeat: no-repeat;

background-size: cover;

}

.split.left::before {

content: '';

position: absolute;

width: 100%;

height: 100%;

background-color: var(--left-bg-color);

}

.split.right {

right: 0;

background: url('xbox.jpg');

background-repeat: no-repeat;

background-size: cover;

}

.split.right::before {

content: '';

position: absolute;

width: 100%;

height: 100%;

background-color: var(--right-bg-color);

}

.split.right,

.split.left,

.split.right::before,

.split.left::before {

transition: all var(--speed) ease-in-out;

}

.hover-left .left {

width: var(--hover-width);

}

.hover-left .right {

width: var(--other-width);

}

.hover-right .right {

width: var(--hover-width);

}

.hover-right .left {

width: var(--other-width);

}

@media (max-width: 800px) {

h1 {

font-size: 2rem;

top: 30%;

}

.btn {

padding: 1.2rem;

width: 12rem;

}

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

JavaScriptの実装

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

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

  <body>
    <div class="container hover-left"> <<< こんな感じで

1 2	<body> <div class="container hover-left"> <<< こんな感じで

要素を取得する

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

// 要素を取得する
const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

// 要素を取得する

const left = document.querySelector('.left')

const right = document.querySelector('.right')

const container = document.querySelector('.container')

mouseenterイベントの登録

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

// mouseenterイベントを登録する
left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
right.addEventListener('mouseenter', () => container.classList.add('hover-right'))

// mouseenterイベントを登録する

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))

right.addEventListener('mouseenter', () => container.classList.add('hover-right'))

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

mouseleaveイベントの登録

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

// mouseleaveイベントを登録する
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

// mouseleaveイベントを登録する

left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

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

おわりに

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

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

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const left = document.querySelector('.left')
const right = document.querySelector('.right')
const container = document.querySelector('.container')

// mouseenterイベントを登録する
left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
right.addEventListener('mouseenter', () => container.classList.add('hover-right'))

// mouseleaveイベントを登録する
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))
right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

// 要素を取得する

const left = document.querySelector('.left')

const right = document.querySelector('.right')

const container = document.querySelector('.container')

// mouseenterイベントを登録する

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))

right.addEventListener('mouseenter', () => container.classList.add('hover-right'))

// mouseleaveイベントを登録する

left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

right.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

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

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

mouseenterイベントの登録

mouseleaveイベントの登録

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年1月
月	火	水	木	金	土	日
				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

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

mouseenterイベントの登録

mouseleaveイベントの登録

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

JavaScriptで通知機能を実装しよう!

[CSS]setTimoutカウンターアプリのUIを実装する

React ~基礎編~ コンポーネント

[小技/初心者向け]GolangでClosureを実装しよう~Sampleあ…

Kubernetes(k8s)を学ぼう! ArgoCD編〜最高のデプロイ方法…

Go言語 ~ 記事まとめ ~

CSSでユーザー検索アプリをスタイリングしよう！

Django REST Frameworkでアプリケーション開発 ～ Blo…

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

Django REST Frameworkでアプリケーション開発～ Blo…