话不多，先看效果：
这是我在网上看到的一外国博主的创意，感觉不错，马上自己也敲了一个，果然不错~
实现：
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>
总结：
原理和实现是比较简单的~还有我试了许多图，发现还是黑白颜色的图效果最好。
