システムデザイン 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

東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。

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