「midnight.js」を使用し背景に合わせて文字色等を変更する

se_ka05
se_ka05

「Midnight.js」は、スクロールに合わせて要素を変更するプラグインです。
文字の色やフォント等を背景に合わせて変更する事ができます。

[Midnight.js]からダウンロードしてください。

設定方法

headerでダウンロードした[Midnight.js]を読み込みます。

※</body>の直前に読み込むように設定をしてください。


<script src="jquery.min.js"></script>
<script src="midnight.jquery.min.js"></script>

HTML


<div id="fixed-text">
<p>Sampleさんぷるサンプル</p>
</div>
<section data-midnight="blue"></section>/*背景青 文字黒*/
<section data-midnight="black"></section>/*背景黒 文字白*/
<section data-midnight="white"></section>/*背景白 文字黒*/

CSS


* {
	margin: 0;
	padding: 0;
}
html, body, section {
	width: 100%;
	height: 100%;
}
#fixed-text,
.midnightInner {
	height: 100%;
}
.midnightInner {
	display: flex;
	justify-content: center;
	align-items: center;
}
/*スクロールした時に色、フォントが変わる start*/
.blue {
	color: #222;
	background: #79dae8;
}
.black {
	color: #fff;
	background: #222;
}
.white {
	color: #000;
	background: #fff;
	font-family: 'Lato','NotoSansB', sans-serif/*フォント変更*/
}
/*スクロールした時に色、フォントが変わる end*/

JS


$(function () {
	$('#fixed-text').midnight();
});

デモページを用意しましたので下記よりご確認ください。

デモページ

関連記事