話不多，先看效果：
這是我在網上看到的一外國博主的創意，感覺不錯，馬上自己也敲了一個，果然不錯~
實現：
1.先定義一段文字，多點，起碼能超過瀏覽器的可視區：
<section>
<p>
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
<div id="shang"></div>
</p>
</section>
2.主要讓section標籤跟可視區一樣高，就是佔滿
section{
height: 100vh;
overflow: hidden;
background-color: rgb(5, 5, 5);
cursor: pointer;
}
3.設置文本屬性：
p{
position: fixed;
top: 0;
left: 0;
font-size: 20px;
letter-spacing: -1px;
line-height: 12px;
background: url(2.jpg);
background-size: 100%;
-webkit-background-clip: text;
background-clip: text;
text-align: justify;
color: transparent;
}
letter-spacing: -1px; 這屬性能增加或減少字符間的空白，我減少；
-webkit-background-clip: text;
background-clip: text; 背景圖在文本里顯示；
text-align: justify;實現兩端對齊文本效果。
4.寫一個div標籤，第一步已給出，
div{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(2.jpg);
background-size: 100%;
background-attachment: fixed;
filter: contrast(2);
}
background-attachment: fixed;當頁面的其餘部分滾動時，背景圖像不會移動。
filter: contrast(2);調整圖像的對比度，能讓顏色更有深色。
5.js部分，實現鼠標距離窗口右邊距離爲div寬度，因爲我div是右定位~
<script type="text/javascript">
let shang =document.getElementById("shang");
window.onmousemove = function(e){
shang.style.width= e.clientX+'px';
}
</script>
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
height: 100vh;
overflow: hidden;
background-color: rgb(5, 5, 5);
cursor: pointer;
}
p{
position: fixed;
top: 0;
left: 0;
font-size: 20px;
letter-spacing: -1px;
line-height: 12px;
background: url(2.jpg);
background-size: 100%;
-webkit-background-clip: text;
background-clip: text;
text-align: justify;
color: transparent;
}
div{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: url(2.jpg);
background-size: 100%;
background-attachment: fixed;
filter: contrast(2);
}
</style>
</head>
<body>
<section>
<p>
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
The only survivor couldn't tell us why the zimtrum sank. It seems that the speed of the ship's sinking is very fast. This theory can be supported by a lot of debris. However, the specific cause of the cracking could not be determined. No drastic weather changes were reported in the radio navigation signal area that day. Survivors' estimates of the weather based on their impressions are unreliable. Weather was at best one of the factors that led to the sinking of the ship. The reason may be inside the ship. The explosion of the boiler may be serious, but the survivors believe that there is a mechanical explosion. The ship has lived for 29 years (made in 1948 at erlanson and skank shipyards in Malmo) and was renovated in 1970. Bad weather and fatigue of the ship's structure may have contributed to the accident, but this is only speculation. There were no reports of accidents with other vessels in that area that day, so there was no possibility of collision with other vessels. There is a possibility of collision with the wreckage, but this cannot be confirmed.
</p>
<div id="shang"></div>
</section>
<script type="text/javascript">
let shang =document.getElementById("shang");
window.onmousemove = function(e){
shang.style.width= e.clientX+'px';
}
</script>
</body>
</html>
總結：
原理和實現是比較簡單的~還有我試了許多圖，發現還是黑白顏色的圖效果最好。