ランディング ページは、 ウェブサイトのレイアウト. これは自分のビジネスや販売する製品を紹介する最初の本当の機会であるため、そのデザインが重要です。 ランディング ページは、CTA (Call To Action) として知られる単一の目的に焦点を当てて設計されています。 色と画像を使用して行動喚起を補完し、 ユーザー体験 は必須です。

• このチュートリアルの動作する CodePen を参照してください。

このチュートリアルでは、架空のファッション ブランドの魅力的なランディング ページを作成する方法を説明します。 大きな画像とホバー時に起こるアニメーションのトランジションを備えた分割画面デザインが中心となります。 このページには 2 つの明確な行動喚起ボタンがあり、HTML を使用します。 サス スタイル設定と、ES6 構文を使用するバニラ JavaScript のタッチのために (必ず ウェブホスティング ウェブサイトのニーズに適しています）。 複雑すぎますか？ コードを必要とせずに Web サイトを作成します。簡単な方法を試してください。 ウェブサイトビルダー.

01. セットアップする

CodePen を使用している場合は、ペン設定で CSS が「SCSS」に設定されていることを確認してください。 この変更を行うには、設定タブをクリックし、「CSS」を選択し、ドロップダウン オプションで CSS プリプロセッサを SCSS に変更します。

次に、HTML への追加を開始できます。 「left」というセクションと「right」というセクションをコンテナ クラス内でラップし、両方のセクションに「screen」クラスを与えます。

02. HTMLを完成させる

HTML を完成させるには、 h1 鬼ごっこ。 その下にボタンを追加する必要があります。これが現実世界のプロジェクトの場合、別のページにリンクします。 これに次のクラスを与えます ボタン 物事を素晴らしくシンプルに保つために。

Mens Fashion
Learn More
Womens Fashion
Learn More

03. Sass 変数を調べる

Sass で私たち皆が気に入っている点の 1 つは、変数の使用です。 ネイティブ CSS 変数のサポートが増えていますが、私たちは Sass を使用することで安全を保ちます。 これらをトップに置きます .scss、好きな色を選択できますが、 rgba 値を使用すると、より柔軟性が得られます。

/** Variables **/ $container-BgColor: #444; $left-bgColor: rgba(136, 226, 247, 0.7); $left-button-hover: rgba(94, 226, 247, 0.7); $right-bgColor: rgba(227, 140, 219, 0.8); $right-button-hover: rgba(255, 140, 219, 0.7); $hover-width: 75%; $small-width: 25%; $animateSpeed: 1000ms;

04. ボディスタイルを調整する

まず、本文のデフォルトのパディングとマージンをすべてクリアし、フォント ファミリを Open Sans に設定します。 これはボタンにのみ影響するため、使用するフォントはそれほど重要ではありません。 次に、幅と高さを次のように設定します 100% そして、X 軸上でオーバーフローするものはすべて非表示になるようにしてください。

html, body { padding: 0; margin: 0; font-family: 'Open Sans', sans-serif; width: 100%; height: 100%; overflow-x: hidden; }

05. セクションタイトルのスタイルを設定する

セクションのタイトルに Google フォントを選択します。ここでは Playfair Display を選択しました。 次に、使用 翻訳X セクションのタイトルが常に X 軸の中心にあることを確認できます。

h1 { font-size: 5rem; color: #fff; position: absolute; left: 50%; top: 20%; transform: translateX(-50%); white-space: nowrap; font-family: 'Playfair Display', serif; }

06. CTAを目立たせる

ボタンは行動喚起として機能するため、大きく、大胆で、クリックしやすい場所に配置する必要があります。 どちらのボタンにも白い境界線と興味深いトランジション効果が表示されます。 両方のボタンのデフォルトのスタイルは同じですが、ホバーすると色が変わります。

.button { display: block; position: absolute; left: 50%; top: 50%; height: 2.6rem; padding-top: 1.2rem; width: 15rem; text-align: center; color: white; border: 3px solid #fff; border-radius: 4px; font-weight: 600; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); transition: all .2s;

メインボタンにはシンプルなホバー効果があり、色には指定した Sass 変数を使用します。これはページの背景と同じ色になります。

.screen.left .button: hover { background-color: $left-button-hover; border-color: $left-button-hover; } .screen.right .button: hover { background-color: $right-button-hover; border-color: $right-button-hover;

07. コンテナの背景と画面を設定する

コンテナ クラスはページ ラッパーとして機能し、画面を絶対位置に配置したいため、このコンテナ クラスの位置を相対位置に設定します。 コンテナにデフォルトの背景色を与えますが、両方の画面の背景に異なる色を設定するため、もちろんこれは表示されません。

.container { position: relative; width: 100%; height: 100%; background: $container-BgColor; .screen { position: absolute; width: 50%; height: 100%; overflow: hidden; }
}

08. 背景画像を追加する

左側と右側のセクションの両方に画像が表示され、次のような Web サイトからロイヤリティフリーのストック画像を見つけることができます。 アンスプラッシュ, ピクサベイ または ペクセル (このチュートリアルで使用しました)。 作業を簡単にするために、CSS でリンクできる imgbb という無料の画像ホスティングおよび共有サービスを使用しました。

.screen.left { left: 0; background: url('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.jpg') center center no-repeat; background-size: cover; &:before { position: absolute; content: ""; width: 100%; height: 100%; background: $left-bgColor; }
}

ページの右側にも、imgbb を使用して背景画像が表示され、背景色をピンクに設定します。 もう一度、背景サイズを次のように設定します。 カバー. これにより、含まれる要素全体をカバーできるようになります。この場合、それは 。画面 クラス。

.screen.right { right: 0; background: url('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.jpg') center center no-repeat; background-size: cover; &:before { position: absolute; content: ""; width: 100%; height: 100%; background: $right-bgColor; }
}

09. トランジションとホバー効果を追加する

両方の画面のホバー効果のアニメーション速度は、変数の値を保持するトランジションによって制御されます。 $animateSpeed、これは 1000ms (1 秒) です。 次に、アニメーションにイージングを加えて終了します。これは、よりスムーズなアニメーションを実現するのに役立つイージングです。

.screen.left, .screen.right, .screen.right: before, .screen.left: before { transition: $animateSpeed all ease-in-out; }

ここで実現したいのは、左側の画面にマウスを移動すると、JavaScript を使用してそのセクションにクラスが追加されることです (これについては後の手順で記述します)。 このクラスが追加されると、その画面は指定した変数の幅 (75%) まで拡大され、右側は小さい幅の変数 (25%) に設定されます。

.hover-left .left { width: $hover-width; } .hover-left .right { width: $small-width; }
.hover-left .right: before { z-index: 2; }

これは左側とまったく同じように機能します。JavaScript を使用してマウスを置くと新しいクラスが追加され、それに応じて右側の画面が拡大されます。 また、 Zインデックス に設定されています 2 そのため、CTA ボタンがより目立つようになります。

.hover-right .right { width: $hover-width; } .hover-right .left { width: $small-width; } .hover-right .left: before { z-index: 2; }

10. JavaScript への移行

CSS クラスの追加と削除に役立つバニラ JavaScript を少し使用します。また、新しい ES6 機能の一部も使用します。 最初に行う必要があるのは、いくつかの定数変数を宣言することです。

使用するので 書類 複数回、定数変数を設定します。 博士 その中にドキュメントを保存することで、「ドキュメント」という単語をわかりやすく短くすることができます。

const doc = document;

ここで、さらに 3 つの定数を設定する必要があります。 。右, 。左 そして 。容器 セレクター。 定数を使用する理由は、定数の値を変更したくないことがわかっているためであり、定数を使用することは理にかなっています。 これらを設定したら、マウス イベントを追加してみましょう。

const right = doc.querySelector(".right"); const left = doc.querySelector(".left"); const container = doc.querySelector(".container");

の使用 左 最後のステップで宣言した定数変数にイベント リスナーを追加できるようになりました。 今回のイベントは、 マウスエンター イベントを呼び出し、コールバック関数を使用する代わりに、と呼ばれる別の ES6 機能を使用します。 アロー関数 ( () => ).

// adds a class to the container element on hover. left.addEventListener("mouseenter", () => { container.classList.add("hover-left"); });

11. クラスの追加と削除

最後のステップで、イベント リスナーは マウスエンター メイン コンテナ クラスをターゲットにし、という新しいクラスを追加するイベント 左にホバー 左側のセクション要素に。 この呼び出しが追加されたので、ホバー時にそれを削除する必要があります。 これを行うには、 マウスを離れる イベントと 。取り除く（） 方法。

// removes the class that was added on hover. left.addEventListener("mouseleave", () => { container.classList.remove("hover-left"); });

ここまでは左側の画面ですべてを行ってきました。 ここで JavaScript を終了し、適切なセクション要素のクラスを追加および削除します。 ここでもアロー関数構文を使用して、すべてを美しく整然とした状態に保ちます。

right.addEventListener("mouseenter", () => { container.classList.add("hover-right"); }); right.addEventListener("mouseleave", () => { container.classList.remove("hover-right"); });

12. レスポンシブにする

プロジェクトの大小を問わず、レスポンシブ化を避けるべきです。 したがって、このステップでは、いくつかのメディア クエリを CSS に追加し、この小さなプロジェクトをモバイル デバイスにできる限り適応できるようにします。 チェックしてみる価値はあります オリジナルコードペン これがどのように機能するかを確認してください。

@media(max-width: 800px) { h1 { font-size: 2rem; } .button { width: 12rem; } 

ページの幅が 800 ピクセルまで下がると、フォントとボタンのサイズが小さくなるようにしました。 そこで、最後に高さもターゲットにし、ページの高さが 700px を下回ったときにボタンがページの下に移動するようにしたいと思います。

@media(max-height: 700px) { .button { top: 70%; } }

ページを保存したいですか? PDF としてエクスポートし、安全な場所に保存します クラウドストレージ.

Webデザインイベント ジェネレート・ロンドン 2018 年 9 月 19 ～ 21 日に再び開催され、業界をリードする講演者によるぎっしり詰まったスケジュール、丸 1 日のワークショップ、貴重なネットワーキングの機会が提供されます。お見逃しなく。 今すぐ生成チケットを入手してください.

この記事はネットマガジンに掲載されたものです 305号. 今すぐ購読する.

続きを読む：

• インスピレーションを受ける 5 つのセンセーショナルな新しい Web サイト
• アニメーション 3D テキスト効果を作成する
• 優れた視差スクロール Web サイト 19 選