用纯CSS3实现的垂直视差滚动效果

CSS3 Parallax Cover Section

css3, parallax

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3483
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    font-family: "Open Sans";
    line-height: 1.618em;
    background: #dcf3ff;
    margin: 0;
}
.parallax {
    -webkit-perspective: 1px;
    perspective: 1px;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    margin: auto;
}
.waveone {
    -webkit-transform: translateZ(0px) scale(1);
    transform: translateZ(0px) scale(1);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/waveone.svg");
    margin-top: 85vh;
    background-size: 101%;
    position: absolute;
}
.wavetwo {
    -webkit-transform: translateZ(-1px) scale(2);
    transform: translateZ(-1px) scale(2);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/wavetwo.svg");
    margin-top: 150vh;
    width: 100vw;
}
.wavethree {
    -webkit-transform: translateZ(-2px) scale(3);
    transform: translateZ(-2px) scale(3);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/wavethree.svg");
    margin-top: 200vh;
    width: 100vw;
}
.acme {
    -webkit-transform: translateZ(-3px) scale(4);
    transform: translateZ(-3px) scale(4);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/acme.svg");
    width: 75vw;
    margin-top: 60vh;
}
.clouds {
    -webkit-transform: translateZ(-7px) scale(8);
    transform: translateZ(-7px) scale(8);
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/clouds.svg");
    background-size: 150vh;
    background-repeat: repeat-x;
}
.content-outer {
    margin-top: 8%;
    background: #fff;
    border-top: 50px solid #46b5ed;
    width: 100%;
}
.content {
    max-width: 50rem;
    margin: 0 auto;
    padding: 4rem 2rem;
}

HTML

<div class="layer waveone">
        <div class="content-outer">
            <div class="content">
                <h1>CSS3 Parallax Cover Section</h1>
                <p>This is a cool vertical parallax scrolling effect that can be created in pure CSS.</p>
                <p>Note that the purpose of this pen is to act as a learning exercise, demonstrating the effects of CSS3 properties such as 3D transforms, SVG backgrounds, viewport units and so on.</p>
                <p>At the moment mobile compatibility with this technique is a little scratchy and it works best in landscape orientation, so it's not ideal for production use.</p>
                <hr>
                <p>The author of these Travels, Mr. Lemuel Gulliver, is my ancient and intimate friend; there is likewise some relation between us on the mother’s side. About three years ago, Mr. Gulliver growing weary of the concourse of curious people
                    coming to him at his house in Redriff, made a small purchase of land, with a convenient house, near Newark, in Nottinghamshire, his native country; where he now lives retired, yet in good esteem among his neighbours.</p>
                <p> Although Mr. Gulliver was born in Nottinghamshire, where his father dwelt, yet I have heard him say his family came from Oxfordshire; to confirm which, I have observed in the churchyard at Banbury in that county, several tombs and monuments
                    of the Gullivers.</p>
                <p> Before he quitted Redriff, he left the custody of the following papers in my hands, with the liberty to dispose of them as I should think fit. I have carefully perused them three times. The style is very plain and simple; and the only
                    fault I find is, that the author, after the manner of travellers, is a little too circumstantial. There is an air of truth apparent through the whole; and indeed the author was so distinguished for his veracity, that it became a sort
                    of proverb among his neighbours at Redriff, when any one affirmed a thing, to say, it was as true as if Mr. Gulliver had spoken it.</p>
                <p>The author of these Travels, Mr. Lemuel Gulliver, is my ancient and intimate friend; there is likewise some relation between us on the mother’s side. About three years ago, Mr. Gulliver growing weary of the concourse of curious people
                    coming to him at his house in Redriff, made a small purchase of land, with a convenient house, near Newark, in Nottinghamshire, his native country; where he now lives retired, yet in good esteem among his neighbours.</p>
                <p> Although Mr. Gulliver was born in Nottinghamshire, where his father dwelt, yet I have heard him say his family came from Oxfordshire; to confirm which, I have observed in the churchyard at Banbury in that county, several tombs and monuments
                    of the Gullivers.</p>
                <p> Before he quitted Redriff, he left the custody of the following papers in my hands, with the liberty to dispose of them as I should think fit. I have carefully perused them three times. The style is very plain and simple; and the only
                    fault I find is, that the author, after the manner of travellers, is a little too circumstantial. There is an air of truth apparent through the whole; and indeed the author was so distinguished for his veracity, that it became a sort
                    of proverb among his neighbours at Redriff, when any one affirmed a thing, to say, it was as true as if Mr. Gulliver had spoken it.</p>
                <p> Although Mr. Gulliver was born in Nottinghamshire, where his father dwelt, yet I have heard him say his family came from Oxfordshire; to confirm which, I have observed in the churchyard at Banbury in that county, several tombs and monuments
                    of the Gullivers.</p>
            </div>
        </div>
    </div>

</div>

CSS3 Parallax Cover Section

css3, parallax

编辑器支持Emmet

快捷键

CSS3 Parallax Cover Section

css3, parallax

使用CSS mix-blend-mode实现的山脉背景和平行视差动效

纯CSS实现的3D球体穿过平面空洞动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：