【コピペOK！】モバイルファーストのwebコーディングアイディア

2022年12月19日2024年3月6日

最近、下記のようなモバイル表示に特化したwebサイトをよく見かけます。

【参考】らんま1/2 | フェリシモ
https://www.felissimo.co.jp/ranma/

基本モバイルのデザインのみで、PCで表示してもモバイルのレイアウトがはめ込まれ、
余ったスペースはシンプルなデザインやメニューなどの要素で構成されているwebサイトです。

今回は、このモバイルファーストのPC表示時のアイディアとして使えるデモサイトを作成してみました！

デモサイト↓
http://mtrad-web.com/takemura/mtrad-blog02/index.html

デモサイトの特徴

今回はPCで見た時にも楽しめるように、

・コンテンツによって背景が切り替わる
・カレント付きサイドメニューの設置

をポイントとして作成してみました。

デモサイト↓
http://mtrad-web.com/takemura/mtrad-blog02/index.html

HTML

今回はgsapというjsプラグインを使用しているので、cdnを読み込んでおきます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mtradブログ</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <main>
        <div class="nav_wrapper">
            <ul class="nav_list">
                <li class="nav_item"><a href="#sec01">Section1</a></li>
                <li class="nav_item"><a href="#sec02">Section2</a></li>
                <li class="nav_item"><a href="#sec03">Section3</a></li>
                <li class="nav_item"><a href="#sec04">Section4</a></li>
            </ul>
        </div>

        <div class="article">
            <div class="section" id="sec01">
                <h2>Section1</h2>
                <p>ここは1番目のコンテンツです。</p>
            </div>
            <div class="section" id="sec02">
                <h2>Section2</h2>
                <p>ここは2番目のコンテンツです。</p>
            </div>
            <div class="section" id="sec03">
                <h2>Section3</h2>
                <p>ここは3番目のコンテンツです。</p>
            </div>
            <div class="section" id="sec04">
                <h2>Section4</h2>
                <p>ここは4番目のコンテンツです。</p>
            </div>
        </div>
    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
    <script src="./js/script.js"></script>
</body>
</html>

CSS(scss)

背景固定はbackground-attachment: fixed;で指定します。
コンテンツ幅は450pxで設定していますが、好みで変えてください。
大体700~450pxが多いかなと思います！


 @charset "UTF-8";

// 背景設定
// ---------------------------------------------

body{
    background-image: url(../img/orange.jpg);
    color: #333333;
    background-attachment: fixed;
    z-index: 1;
    font-family: 'Noto Sans JP', sans-serif;
    transition: .7s;
}

.bg01{
    background-image: url(../img/orange.jpg);
}
.bg02{
    background-image: url(../img/asupara.jpg);
}
.bg03{
    background-image: url(../img/tamago.jpg);
}
.bg04{
    background-image: url(../img/kabotya.jpg);
}

// ナビ
// ---------------------------------------------

.nav_wrapper{
    position: fixed;
    z-index: 5;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    .nav_list{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: calc((100% - 450px) / 4);
        z-index: 5;
        li{
            margin-bottom: 10px;
            background-color: #fff;
            border-radius: 10px;
            border: solid 5px #fa8072;
            a{
                display: inline-block;
                padding: 20px 40px;
                font-weight: 700;
                color: #000;
            }
        }
    }
    @media screen and (max-width:1200px){
        display: none;
    }
}

.current{
    background-color: #fa8072 !important;
    a{
        color: #fff !important;
    }
}


// コンテンツ
// ---------------------------------------------

.article{
    max-width: 450px;
    margin: 0 auto;
    position: relative;
    @media screen and (max-width:768px){
        max-width: none;
        width: 100%;
    }
    .section{
        padding: 20px;
        height: 1000px;
    }
}

#sec01{
    background-color: #FEDF48;
    color: #fff;
}
#sec02{
    background-color: #3cb371;
    color: #fff;
}
#sec03{
    background-color: #f0e68c;
    color: #fff;
}
#sec04{
    background-color: #006400;
    color: #fff;
}

JS

今回は背景切り替わりのアニメーションをGSAPのScrollTriggerを使って設定しました。
onToggleで変化の内容、triggerで何をきっかけに変化が起こるか指定してます。



// 背景切り替わり
// ---------------------------------------------

ScrollTrigger.batch("#sec01",{
    onToggle:(batch) => {
        $('body').toggleClass("bg01");
        $('.nav_item').eq(0).toggleClass("current");
    },
    trigger: '#sec01',
    start: "top center",
    end: "bottom center",
    toggleActions: 'none none play reset',
});

ScrollTrigger.batch("#sec02",{
    onToggle:(batch) => {
        $('body').toggleClass("bg02");
        $('.nav_item').eq(1).toggleClass("current");
    },
    trigger: '#sec02',
    start: "top center",
    end: "bottom center",
    toggleActions: 'play none play reset',
});

ScrollTrigger.batch("#sec03",{
    onToggle:(batch) => {
        $('body').toggleClass("bg03");
        $('.nav_item').eq(2).toggleClass("current");
    },
    trigger: '#sec03',
    start: "top center",
    end: "bottom center",
    toggleActions: 'play none play reset',
});

ScrollTrigger.batch("#sec04",{
    onToggle:(batch) => {
        $('body').toggleClass("bg04");
        $('.nav_item').eq(3).toggleClass("current");
    },
    trigger: '#sec04',
    start: "top center",
    end: "bottom center",
    toggleActions: 'play none play reset',
});


// スムーススクロール
// ---------------------------------------------

$(function () {
    $('a[href^="#"]').click(function () {
        var adjust = 0;
        var speed = 600; 
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top + adjust;
        $('body,html').animate({
            scrollTop: position
        }, speed, 'swing');
        return false;
    });
});