一分钟实现纯CSS全屏滚动特效

一分钟实现纯CSS全屏滚动特效

Hello World

【你好世界】－Hello World－“无论世界多么崩坏，我都只想再见到她的笑颜”

端午节快乐！

会用到的CSS属性

• background-blend-mode

  可以使背景颜色与背景图片一起使用！

• scroll-snap-type

  属性定义在滚动容器中的一个临时点（snap point）如何被严格的执行

  这是全屏滚动的核心！

快乐编码

使用 html 架构了页面的基本元素

<div class="container">
    <section><span>你好</span></section>
    <section><span>欢迎</span></section>
    <section><span>光临</span></section>
    <section><span>码小余の博客</span></section>
    <section><span>端午节快乐！</span></section>
</div>

使用 css 定义了页面的基本样式，同时也是在此实现的全屏滚动

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 10px; /*滚动条宽度*/
    height: 16px; /*滚动条高度*/
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /*滚动条的背景区域的圆角*/
    background-color: #fdf6e3; /*滚动条的背景颜色*/
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px; /*滚动条的圆角*/
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #8fa4bd; /*滚动条的背景颜色*/
}

* {
    padding: 0;
    margin: 0;
}
body {
    height: 100vh;
    width: 100vw;
}
.container {
    height: 100vh;
    width: 100vw;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
}
section {
    scroll-snap-align: start;
    height: 100vh;
    width: 100vw;
    background-blend-mode: multiply;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 10em;
}
section span {
    border-right: 10px solid #000;
    /* 字体效果 */
    text-align: center;
    color: #000;
    letter-spacing: 20px;
    text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777,
        0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333,
        0px 8px 7px #001135;

    animation: cursorBlink 1s infinite;
}
.container section:nth-child(1) {
    background-color: teal;
    background-image: url(./images/1.jpg);
    background-size: cover;
}

.container section:nth-child(2) {
    background-color: pink;
    background-image: url(./images/2.jpg);
    background-size: cover;
}

.container section:nth-child(3) {
    background-color: burlywood;
    background-image: url(./images/3.jpg);
    background-size: cover;
}

.container section:nth-child(4) {
    background-color: palegoldenrod;
    background-image: url(./images/4.jpg);
    background-size: cover;
}

.container section:nth-child(5) {
    background-color: #2ecc71;
    background-image: url(./images/5.jpg);
    background-size: cover;
}

/* 光标闪烁动画 */
@keyframes cursorBlink {
    0%,
    100% {
        border-right: 10px solid #000;
    }
    50% {
        border-right: 10px solid transparent;
    }
}

实现效果

欢迎关注我的博客，会不定时分享一些好玩有趣的东西
项目地址 https://github.com/extheor/full-screen-scroll