Not many words, first look at the effect:

This is the idea of a foreign blogger I saw on the Internet, I felt good, and immediately knocked a good ~

Implementation:

1. Define a paragraph of text that is at least as large as the browser’s viewable area:

<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>
Copy the code

2. Make the section tag as high as the viewable area

 section{
            height: 100vh;
            overflow: hidden;
            background-color: rgb(5.5.5);
            cursor: pointer;
        }
Copy the code

3. Set text properties:

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;
           
        }
Copy the code

letter-spacing: -1px; This property can increase or decrease the white space between characters, I reduce; -webkit-background-clip: text; background-clip: text; The background image is displayed in the text; text-align: justify; Achieve the effect of text alignment at both ends.

4. Write a div tag, as shown in step 1.

  div{
             position: absolute;
             top: 0;
             right: 0;
             width: 100%;
             height: 100%;
             background: url(2.jpg);
             background-size: 100%;
             background-attachment: fixed;
             filter: contrast(2);
         }
Copy the code

background-attachment: fixed; When the rest of the page scrolls, the background image does not move. filter: contrast(2); Adjust the contrast of the image to make the color darker. 5. Js part, to achieve the mouse distance to the right of the window div width, because my div is right positioning ~

  <script type="text/javascript"> 
        let shang =document.getElementById("shang");
        window.onmousemove = function(e){
            shang.style.width= e.clientX+'px';
        }
    </script>
Copy the code

Complete code:

<! DOCTYPEhtml>
<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>
Copy the code

Conclusion:

The principle and implementation is relatively simple ~ and I have tried many pictures, found that black and white color is the best effect.