Today, let's talk about the slide of vision difference. First, let's look at the effect picture. It's caused by different moving speed through 3d space. In fact, the parallax effect here is not so strong. But the contrast between you and the following is better;
1, Preparation code
<!DOCTYPE html> <html lang="zh-CN"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ margin:0; padding:0; } body{ height: 100vh; width: 100%; background-color:cadetblue; } div:first-of-type{ position:relative; width: 100%; height: 100vh; background: url(banner.jpg) no-repeat left top / cover; } div:first-of-type::after{ content:"Parallax glide"; display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); color: white; padding:35px 10px; background: rgba(0,0,0,0.9); font-size: 3em; letter-spacing: 10px; } div:last-of-type{ width: 70vw; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: auto; font-size: 18px; text-indent: 2em; line-height: 28px; } p{ color: white; padding-top: 10px; } </style> </head> <body> <header> <div></div> <div> <p> <Luoshen Fu is a famous poem written by Cao Zhi, a writer of the Wei Dynasty in the Three Kingdoms period of China. This Fu makes up the author's encounter with the God of Luo and their love and yearning for each other. The image of the God of Luo is extremely beautiful, and the love between the God and the human is vague and confused. However, due to the different ways of the people and the gods, it can not be combined, and finally expresses the infinite feelings of sadness and loss. The whole article can be roughly divided into six sections: the first section is about the author's return to the fiefdom of Luoyang, when he saw the God of Luo standing on the cliff in a trance; the second section is about the beauty of the costume of the God of Luo; the third section is about the author ' The sixth paragraph describes the author's deep love for Gu Wang after he left. The poem is full of gorgeous, delicate description, rich imagination, tender feelings, if there is any sustenance. </p> <p> //In the third year of Huang Chu's reign, the capital of the Yu Dynasty returned to Luochuan. As the ancients said, the God of water is called Mi Fei. Feeling Song Yu's affair with the goddess of the king of Chu, he wrote Si Fu. His words said: I came from the capital region and said that I would return to the East clan. Back Yi que, Yue Yuan, through the valley, Ling Jingshan. The sun is on the west, and the car is in danger. You are a tax driver, a tax driver, a tax driver, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a. So he moved his mind and his mind. When I look down, I look up and see the beautiful people by the side of the rock. It was told by those who helped the emperor, "do you have someone like that? Who is it? If it's gorgeous! " The emperor said to him, "I heard about the God of Heluo, who is called Mi Fei. But is it not the sun that kings see? What is its appearance? I would like to hear that. " Yu told him: "its shape is also like a startling goose and a gentle dragon. Obsidian autumn chrysanthemum, luxuriant spring pine. It seems like the moon is covered by light clouds, and the wind is drifting back to snow. Looking from afar, it looks like the sun rising in the morning, and observing it forcefully, it burns like the sun rising in the morning. It's easy to use and short to fit. If the shoulders are cut, the waist is as simple as a covenant. The neck is lengthened, and the quality is revealed. Fangze no add, lead Hua Fu Yu. Cloud ji'e, Xiumei lianjuan. Red lips are bright outside, white teeth are fresh inside, bright eyes are fond of admiring, dimple is auxiliary to inherit power. Magnificent and elegant, elegant and quiet. Soft, charming in language. Strange clothing, bone image should map. The resplendence of wearing Luoyi, the beauty of eryao and bizhihua. Wear the jewelry of jincui, and decorate the Pearl to show off your body. Walking on a long journey, wearing the light train of mist and gauze. The fragrance of the delicate orchid is so kind that it lingers in the corner of the mountain. Then suddenly Yan longitudinal, to roam to play. He leans on the left to pick the dragon and the right to shade the GUI flag. Loam and white wrists are in the spirit of Huxi. They pick the Xuan Zhi of turbulent Laise. I like the beauty of its beauty, but my heart is not happy. The bad media talk with joy and microwave. Willing to be honest and wise, and understand the jade plate to ask for it. He believed in the cultivation of beauties, learned the rites of Qiang and wrote poems of Ming Dynasty. Anti Qiong (Wang Di) lasted for a long time by giving peace and referring to the abyss. I'm afraid of being deceived by spirit. I feel the words of Jiaofu's abandonment, hesitating and doubting. When you are calm and determined, you should apply for a gift to prevent self-reliance. Therefore, Luo was inspired, moved and lost, and the light of God separated, and the sun rose. If you will fly but not fly, you will stand tall. Practice pepper Tu of the depression, step thin and fragrant. The long chant is always adored, and its voice is sad and sharp. You are a mess of spirits, a couple, or play Qingliu, or hang Shenzhu, or pick up Pearl, or pick up Cuiyu. From the second concubine of southern Hunan, with the daughter of Hanbin tour. I sigh that there is no match between gourd and gourd, and chant the solitude of Petunia. Yang qingfan's hand is sweeping, Yi Xiu sleeves to wait. Hugh Xun flies to the Fu. He is like a God. Lingbo steps slightly. Luo Sox generates dust. If you are fickle, you will be safe if you are in danger. If you return to the past, you will be in trouble. Turn the ogle to flow the essence, smooth the jade face. With words not spit, Qi like orchid. It's so gorgeous and graceful that I forget to eat. So the screen catches the wind and the waves behind the river are still. Feng Yi sings drums and Nv Wa sings songs. Teng Wenyu rides with the police, Ming yuluan dies with him. The six dragons are like the same head, carrying the cloud car. The whale and the salamander are eager to hold the hub, while the waterfowl are flying for the guard. So I went north. After passing Nangang, Yu Su led, returned to Qingyang, moved his lips to speak slowly, and Chen handed over the outline. The way of hating people and gods is different, and the way of hating prime time is not right. Resist luomei to cover the tears, the waves of tears. The memorial service will never be over. A sad death and a strange land. I love you with no emotion, and offer you the south of the Yangtze River. Though it is in the sun, it is always in the king's heart. Suddenly, I don't know what I'm giving up. I'm afraid that I'll stay up late and cover the light. So he carried his back to linggao and left it to God. He left his imagination and thought about it. The complex shape of the spirit body of Hebei is to resist the light boat and go up. Floating in the long river and forgetting to return, I think of you. Night and sleepless, stained with frost to dawn. I will return to the East Road. Take the bridle and bridle to resist the strategy, and linger in dismay. </p> </div> </header> </body> </html>
You will see such an effect. How is it different from my picture above!
What kind of effect are we going to achieve? See the figure below
See the difference? I didn't modify the sliding speed through js. This is the visual difference caused by turning on 3d space and backward offset, so we need to make the beginning picture have a visual difference. The advantage is: it will feel 3d and bring better vision to your web page.
2, Core code
html{ overflow:auto; } body{ overflow-x: hidden; /*x Axis overflow hide*/ overflow-y: auto; /*y Self adaptation of axis overflow*/ height: 100vh; width: 100%; transform-style: preserve-3d; /*Open 3d space*/ perspective: 1px; /*Where do you look at 3d space? This value will only offset to use without writing*/ } header{ transform-style: preserve-3d; /*Write a note in the parent container of the 3d space you want to offset*/ } div{ transform:translateZ(-1px) scale(2); /*Double back, then double up*/ }
transform:translateZ(-1px) scale(2); this sentence is z-axis backward, you walk backward as a person, so you can see that this person is not also smaller, here is the same, so double the magnification, it looks like there is no backward,
2, problems
See if there is a bit of background color on the left, which should be caused by the deviation of z's back position, so we just need to enlarge transform:translate(-1px) scale(2.1) to enlarge a little more, and soon we can cover the white edge, of course, there are many ways. Just look for it yourself.
3, Full code
<!DOCTYPE html> <html lang="zh-CN"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> *{ margin:0; padding:0; } html{ overflow: hidden; } body{ overflow-x: hidden; overflow-y: auto; height: 100vh; width: 100%; background: blue; transform-style: preserve-3d; /*Open 3d space*/ perspective: 1px; /*Where do you look at 3d space? This value will only offset to use without writing*/ } header{ transform-style: preserve-3d; /*Open 3d space*/ } div:first-of-type{ position:relative; width: 100%; height: 100vh; background: url(banner.jpg) no-repeat left top / cover; transform:translateZ(-1px) scale(2.1); z-index: -1; } div:first-of-type::after{ content:"Parallax glide"; display:block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); color: white; padding:35px 10px; background: rgba(0,0,0,0.9); font-size: 3em; letter-spacing: 10px; } div:last-of-type{ width: 100%; font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin: auto; height: 100vh; font-size: 18px; text-indent: 2em; line-height: 28px; background: #000; } p{ margin:auto; width: 70vw; color: white; padding-top: 10px; } </style> </head> <body> <header> <div></div> <div> <p> <Luoshen Fu is a famous poem written by Cao Zhi, a writer of the Wei Dynasty in the Three Kingdoms period of China. This Fu makes up the author's encounter with the God of Luo and their love and yearning for each other. The image of the God of Luo is extremely beautiful, and the love between the God and the human is vague and confused. However, due to the different ways of the people and the gods, it can not be combined, and finally expresses the infinite feelings of sadness and loss. The whole article can be roughly divided into six sections: the first section is about the author's return to the fiefdom of Luoyang, when he saw the God of Luo standing on the cliff in a trance; the second section is about the beauty of the costume of the God of Luo; the third section is about the author ' The sixth paragraph describes the author's deep love for Gu Wang after he left. The poem is full of gorgeous, delicate description, rich imagination, tender feelings, if there is any sustenance. </p> <p> //In the third year of Huang Chu's reign, the capital of the Yu Dynasty returned to Luochuan. As the ancients said, the God of water is called Mi Fei. Feeling Song Yu's affair with the goddess of the king of Chu, he wrote Si Fu. His words said: I came from the capital region and said that I would return to the East clan. Back Yi que, Yue Yuan, through the valley, Ling Jingshan. The sun is on the west, and the car is in danger. You are a tax driver, a tax driver, a tax driver, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a tax collector, a. So he moved his mind and his mind. When I look down, I look up and see the beautiful people by the side of the rock. It was told by those who helped the emperor, "do you have someone like that? Who is it? If it's gorgeous! " The emperor said to him, "I heard about the God of Heluo, who is called Mi Fei. But is it not the sun that kings see? What is its appearance? I would like to hear that. " Yu told him: "its shape is also like a startling goose and a gentle dragon. Obsidian autumn chrysanthemum, luxuriant spring pine. It seems like the moon is covered by light clouds, and the wind is drifting back to snow. Looking from afar, it looks like the sun rising in the morning, and observing it forcefully, it burns like the sun rising in the morning. It's easy to use and short to fit. If the shoulders are cut, the waist is as simple as a covenant. The neck is lengthened, and the quality is revealed. Fangze no add, lead Hua Fu Yu. Cloud ji'e, Xiumei lianjuan. Red lips are bright outside, white teeth are fresh inside, bright eyes are fond of admiring, dimple is auxiliary to inherit power. Magnificent and elegant, elegant and quiet. Soft, charming in language. Strange clothing, bone image should map. The resplendence of wearing Luoyi, the beauty of eryao and bizhihua. Wear the jewelry of jincui, and decorate the Pearl to show off your body. Walking on a long journey, wearing the light train of mist and gauze. The fragrance of the delicate orchid is so kind that it lingers in the corner of the mountain. Then suddenly Yan longitudinal, to roam to play. He leans on the left to pick the dragon and the right to shade the GUI flag. Loam and white wrists are in the spirit of Huxi. They pick the Xuan Zhi of turbulent Laise. I like the beauty of its beauty, but my heart is not happy. The bad media talk with joy and microwave. Willing to be honest and wise, and understand the jade plate to ask for it. He believed in the cultivation of beauties, learned the rites of Qiang and wrote poems of Ming Dynasty. Anti Qiong (Wang Di) lasted for a long time by giving peace and referring to the abyss. I'm afraid of being deceived by spirit. I feel the words of Jiaofu's abandonment, hesitating and doubting. When you are calm and determined, you should apply for a gift to prevent self-reliance. Therefore, Luo was inspired, moved and lost, and the light of God separated, and the sun rose. If you will fly but not fly, you will stand tall. Practice pepper Tu of the depression, step thin and fragrant. The long chant is always adored, and its voice is sad and sharp. You are a mess of spirits, a couple, or play Qingliu, or hang Shenzhu, or pick up Pearl, or pick up Cuiyu. From the second concubine of southern Hunan, with the daughter of Hanbin tour. I sigh that there is no match between gourd and gourd, and chant the solitude of Petunia. Yang qingfan's hand is sweeping, Yi Xiu sleeves to wait. Hugh Xun flies to the Fu. He is like a God. Lingbo steps slightly. Luo Sox generates dust. If you are fickle, you will be safe if you are in danger. If you return to the past, you will be in trouble. Turn the ogle to flow the essence, smooth the jade face. With words not spit, Qi like orchid. It's so gorgeous and graceful that I forget to eat. So the screen catches the wind and the waves behind the river are still. Feng Yi sings drums and Nv Wa sings songs. Teng Wenyu rides with the police, Ming yuluan dies with him. The six dragons are like the same head, carrying the cloud car. The whale and the salamander are eager to hold the hub, while the waterfowl are flying for the guard. So I went north. After passing Nangang, Yu Su led, returned to Qingyang, moved his lips to speak slowly, and Chen handed over the outline. The way of hating people and gods is different, and the way of hating prime time is not right. Resist luomei to cover the tears, the waves of tears. The memorial service will never be over. A sad death and a strange land. I love you with no emotion, and offer you the south of the Yangtze River. Though it is in the sun, it is always in the king's heart. Suddenly, I don't know what I'm giving up. I'm afraid that I'll stay up late and cover the light. So he carried his back to linggao and left it to God. He left his imagination and thought about it. The complex shape of the spirit body of Hebei is to resist the light boat and go up. Floating in the long river and forgetting to return, I think of you. Night and sleepless, stained with frost to dawn. I will return to the East Road. Take the bridle and bridle to resist the strategy, and linger in dismay. </p> </div> </header> </body> </html>
Four, summary
There is nothing to say. In fact, it can be written through js, but it is more convenient. Many websites have this kind of parallax. Of course, you can see a playback box on the surface. It's amazing that you can use the parallax effect after playing the internal loop.
If the name is long, it's Xiao Lin Published 11 original articles, won praise 5, visited 3942 Private letter follow