midnight.js
というライブラリを使うことで、質問者さんが想像するような動作を実現できると思いますが、いかがでしょうか?サンプルとしてコードを載せておきますが、midnight.js
の詳しい使い方はこちらを参考にしてください。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>タイトル</title>
6 <style>
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 html, body, section {
13 width: 100%;
14 height: 100%;
15 }
16
17 #fixed-text, .midnightInner {
18 height: 100%;
19 }
20
21 .midnightInner {
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 }
26
27 #fixed-text span {
28 font-size: 5em;
29 }
30
31 .image1 {
32 color: #000;
33 background: url('http://placehold.jp/ffffff/000000/500x500.png?text=this is image') center/cover;
34 }
35
36 .image2 {
37 color: #fff;
38 background: url('http://placehold.jp/000000/ffffff/500x500.png?text=this is image') center/cover;
39 }
40
41 .white {
42 color: #000;
43 background: #fff;
44 }
45
46 .black {
47 color: #fff;
48 background: #000;
49 }
50 </style>
51</head>
52<body>
53<div id="fixed-text">
54 <span>FIXED TEXT EXAMPLE</span>
55</div>
56<section data-midnight="image1"></section>
57<section data-midnight="black"></section>
58<section data-midnight="white"></section>
59<section data-midnight="image2"></section>
60<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
61<script src="https://cdn.jsdelivr.net/gh/Aerolab/midnight.js@1.1.2/midnight.jquery.min.js"></script>
62<script>
63 $(function () {
64 $('#fixed-text').midnight();
65 });
66</script>
67</body>
68</html>