HTML5 页面滚动时文本滑入动画

单页（single-page）网站模板，由多个section组成，每个section是滚动系列中的一个虚拟页面。

模板

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body{margin: 0;}
section {
    background: #eee;
    padding: 40vh 10%;
    overflow: hidden;
}
section p {
    color: rgba(0, 0, 0, 0.5) !important;
    font-weight: 100;
    font-size: 36pt;
}
section.one {
    background-color: #ffe62b;
}
section.two {
    background-color: #ffcf00;
}
section.three {
    background-color: #ffb700;
}
section.four {
    background-color: #ff9e00;
}
section.five {
    background-color: #ff7a00;
}
.module {
    position: relative;
    float: left;
    margin: 5%;
    opacity: 0;
}
.module:nth-child(even) {
    margin-right: 0;
}
.come-in {
    transform: translateX(-150px);
    animation: come-in 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards;
}
.come-in:nth-child(odd) {
    animation-delay: 0.1s;
    animation-duration: 0.75s;
}
.leave {
    transform: translateX(150px);
    animation: leave 0.5s cubic-bezier(0, -0.01, 0, 0.99) forwards;
}
.leave:nth-child(odd) {
    animation-delay: 0.1s;
    animation-duration: 0.75s;
}
.already-visible {
    transform: translateY(0);
    animation: none;
    opacity: 1;
}
@keyframes come-in {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes leave {
    to {
        transform: translateX(-150);
        opacity: 0;
    }
}

HTML

单页（single-page）网站模板，由多个section组成，每个section是滚动系列中的一个虚拟页面。

模板

编辑器支持Emmet

快捷键

单页（single-page）网站模板，由多个section组成，每个section是滚动系列中的一个虚拟页面。

模板

HTML5 SVG画布外菜单动效 - 左侧弹性弧线滑入

HTML5 很棒的移动个人中心页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：