シンプルかつインパクトのある商品ページの作成

こんにちは、フローです。

商品ページは、ビジネスのウェブサイトにとって最も重要な部分の一つです。

前回の記事はこちらです。

ここでは、

CSSとjQueryを用いてフェードイン効果があるシンプルでインパクトのある商品ページを作成する方法を紹介します。

まずは基本的なHTML構造を確認しましょう。

商品情報は、.productというクラス名が付いたsectionタグで区切ります。

商品ごとにproduct-imageとproduct-contentの2つのdiv要素が含まれています。

1 HTML
- 1.1 CSS
- 1.2 jQuery
2 まとめ

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商品ページ</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!-- ヘッダーのコード -->
    </header>
    <main>
        <section class="product product-right">
            <div class="product-image"></div>
            <div class="product-content">
                <h2>商品名1</h2>
                <p>商品1の説明...</p>
            </div>
        </section>
        <section class="product product-left">
            <div class="product-image"></div>
            <div class="product-content">
                <h2>商品名2</h2>
                <p>商品2の説明...</p>
            </div>
        </section>
        <section class="product product-right">
            <div class="product-image"></div>
            <div class="product-content">
                <h2>商品名3</h2>
                <p>商品3の説明...</p>
            </div>
        </section>
    </main>
    <footer>
        <!-- フッターのコード -->
    </footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>

product-rightとproduct-leftのクラスを交互に使用して商品の配置を変えます。

これにより、ビジュアルのバラエティと興味深さを持たせることができます。

CSS

次にCSSを用いて、これらの要素にスタイルを適用します。

基本的にはFlexboxを使用してレイアウトを制御し、

商品画像と商品説明が横に並ぶようにします。

また、初期状態では商品セクションの透明度を0（完全に透明）に設定し、

スクロールに合わせて透明度を1（完全に不透明）に変更することでフェードイン効果を実現します。

.product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.product.product-right {
    flex-direction: row;
}

.product.product-left {
    flex-direction: row-reverse;
}

.product-image {
    width: 300px;
    height: 300px;
    background-color: #f3f3f3;
}

.product-content {
    width: 50%;
}

.product.fadeIn {
    opacity: 1;
}

jQuery

最後に、jQueryを使ってスクロール位置に応じた動作を制御します。

ウィンドウのスクロールイベントをトリガーにして、

各商品セクションの位置をチェックします。

画面内に商品が入ったらフェードイン（fadeInクラスを追加）、

画面外に出たらフェードアウト（fadeInクラスを削除）します。

$(window).on('scroll', function() {
    $('.product').each(function() {
        var top_of_element = $(this).offset().top;
        var bottom_of_element = $(this).offset().top + $(this).outerHeight();
        var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
        var top_of_screen = $(window).scrollTop();

        if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
            $(this).addClass('fadeIn');
        } else {
            $(this).removeClass('fadeIn');
        }
    });
});

上記のコードは、

スクロールイベントを監視し、

各.productエレメントがビューポート（画面内）に入った時にフェードインさせ、

ビューポートから外れたときにフェードアウトさせるものです。

$(window).on('scroll', function() {...})で

スクロールイベントを監視し、スクロールが発生する度に内部の関数が実行されます。

$('.product').each(function() {...})は

各.productエレメントに対して関数を実行します。

この関数内で、各商品エレメントの位置と現在のスクロール位置を比較し、

ビューポート内にあるかどうかを判断します。

この判断は

if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element))

の部分で行われます。

この条件が真であれば、そのエレメントはビューポート内に存在するため、

フェードインクラスを追加します。

そうでなければ、フェードインクラスを削除し、エレメントをフェードアウトさせます。

このようにして、

スクロールに応じて商品がフェードイン/アウトする動的な商品ページを作成することができます。

スクロールイベントとjQueryを使うことで、

ページに動的な要素を追加し、ユーザー体験を向上させることが可能です。

まとめ

以上で、フェードイン効果を活用した商品ページの作成について解説しました。まとめると以下の通りです：

HTML: 商品を表示するセクションを作成し、各商品は画像と説明文で構成されています。商品セクションは.productクラスをもち、このクラスは後のCSSとJavaScriptで使用します。
CSS: まず、各商品セクションのレイアウトをCSSフレックスボックスを使用して定義します。デスクトップ画面では商品画像と説明文が横並びに、モバイル画面では縦並びになるようにレスポンシブデザインを採用しています。また、フェードイン効果を実現するために、.fadeInクラスを定義します。
JavaScript(jQuery): スクロールイベントを監視し、各商品セクションがビューポート（画面内）に入った時に.fadeInクラスを追加、ビューポートから外れた時に.fadeInクラスを削除します。これにより、スクロールに応じて商品がフェードイン・アウトする動きを実現します。

このガイドを参考に、

自身のウェブサイトにインタラクティブな要素を追加する際のヒントやアイデアを得ることができれば幸いです。

ウェブデザインとコーディングはクリエイティブなプロセスであり、

基本的な知識を身につけたら、それをベースに自分だけのオリジナルなページを作ることができます。

最後に、良いウェブデザインはユーザーエクスペリエンスを第一に考えることが大切です。

ユーザーがどのようにサイトを使うのかを常に考え、

その経験をより良いものにするためのデザインとコードを追求しましょう。

レッツチャレンジ！