システムデザイン Edit : 2020.07.31 Update : 2024.11.07

背景色に合わせて文字色や画像の色を変更したいときに使えるMidnight.js

ダウンロードはこちら「Midnight.js」から。今回作成したデモ以下、デモを参照しながらみるとわかりやすいです!

Contents

HTML
CSS
JS

HTML

headerでjqueryとMidnight.jsを読み込む

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type='text/javascript' src='./js/midnight.jquery.min.js?ver=5.4.1'></script>

1 2	<script type="text/javascript" src="js/jquery.min.js"></script> <script type='text/javascript' src='./js/midnight.jquery.min.js?ver=5.4.1'></script>

<div class="code">
<div class="inner">
<div class="ttl"><h1>Midnight</h1></div>
<div class="wrap1" data-midnight="default"></div>
<div class="wrap2" data-midnight="black"></div>
<div class="wrap3" data-midnight="default"></div>
</div>
</div>

<div class="ttl"><h1>Midnight</h1></div>

</div>

CSS

    .code {
    position: relative;
    overflow: hidden;
    }
    .ttl {
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
    font-size: 4rem;
    font-weight: bold;
    z-index:10;
    }
    .ttl h1 {
    overflow: hidden;
    }
    .wrap1 {
    height: 100vh;
    background:#000;
    }
    .wrap2 {
    height: 100vh;
    background:#fff;
    }
    .wrap3 {
    height: 100vh;
    background:#555;
    }
    .midnightHeader.default h1 {
    color: #fff;
    }

.code {

position: relative;

overflow: hidden;

}

.ttl {

position: fixed;

top: 50% !important;

left: 50% !important;

-ms-transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

transform: translate(-50%,-50%);

text-align: center;

font-size: 4rem;

font-weight: bold;

z-index:10;

}

.ttl h1 {

overflow: hidden;

}

.wrap1 {

height: 100vh;

background:#000;

}

.wrap2 {

height: 100vh;

background:#fff;

}

.wrap3 {

height: 100vh;

background:#555;

}

.midnightHeader.default h1 {

color: #fff;

}

JS

今回h1タグで囲まれた「Midnight」の箇所の色を変更したいので、h1タグをdivで囲み、そこにふったクラス.ttlを指定しました。すると、h1タグが.midnightHeaderというクラスが付いたdivで勝手に囲われるので、cssにて.defaultの時と、.darkの時で色などを設定します。

    $(function(){
      $('.ttl').midnight();
    });

$(function(){

$('.ttl').midnight();

});

文字でなくても、例えばロゴの色を変更したい場合は、ロゴをsvgで作成しfillの色を変更したり、背景画像として設置し、cssで.midnightHeader.defaultのときと.midnightHeader.darkのときでbackgroundを変更するなどでもうまく動作してくれます。

KOHIMOTO LABO

WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。

INDEX

PICK UP

【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。

2024.06.09 プロジェクト

Webサイトの保守メンテナンス・運用を使って、改善のプロセス化を図る

2023.05.15 プロジェクト

子供向けWebアプリケーション、UI・UXデザイン制作6つのポイント

2022.10.05 ユーザビリティ

KOHIMOTO

Category

背景色に合わせて文字色や画像の色を変更したいときに使えるMidnight.js

HTML

CSS

JS

Related article

Pick Up