龙港 网站建设,实用又有创意的产品设计,品牌策划公司网站,广州番禺区好玩的景点效果展示 CSS 知识点
background 相关属性综合运用position 属性的 sticky 值运用scroll-behavior 属性运用scroll-snap-type 属性运用scroll-snap-align 属性运用
整体页面效果实现
div classcontainer!-- 第一屏 --div classsecdiv classcontainer!-- 第一屏 --div classsech2Scroll Down/h2/div!-- 第二屏 至 第七屏 --div classsec/divdiv classsec/divdiv classsec/divdiv classsec/divdiv classsec/divdiv classsec/div!-- 第二屏 至 第七屏 的文字 --div classcontenth2!-- 因为每屏都在上滑移动所以这里定义每屏字符的偏移量 --span style--i:1S/spanspan style--i:2t/spanspan style--i:3i/spanspan style--i:4c/spanspan style--i:5k/spanspan style--i:6y/span/h2/div!-- 第八屏 --div classsech2Thank For Watching :)/h2/div
/div使用 scroll 相关属性完成每屏滚动效果 scroll-snap-type属性说明 设置了在有滚动容器的情形下吸附至吸附点的程度。 scroll-snap-align属性说明 属性将盒子的吸附位置指定为其吸附区域作为对齐对象在其吸附容器的吸附口作为对齐容器中的对齐方式。这样我们在滚动每一屏的时候只有滑到一半多后释放鼠标滑动页面就会吸附到最近的容器上。 scroll-behavior属性说明 滚动的效果立即滚动到吸附点或者平稳的滚动到吸附点。
.container {position: relative;width: 100%;height: 100vh;overflow: auto;scroll-behavior: smooth;scroll-snap-type: y mandatory;
}.sec {position: relative;width: 100%;height: 100vh;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;scroll-snap-align: center;
}实现每屏的样式
/* 每屏的样式这里只是展示第一屏的 */
.sec:nth-child(1) {background: rgba(23, 143, 255, 0.685) url(./images/bg1.jpg);background-size: cover;background-attachment: fixed;background-position: center;background-blend-mode: multiply;
}实现第二屏开始的字符样式
.content {position: absolute;top: 0;width: 100%;text-align: center;
}.content h2 {position: relative;display: flex;justify-content: center;
}.content h2 span {position: sticky;top: 0;line-height: 100vh;height: 100vh;color: #fff;font-size: 14vw;/* 页面中已定义了对应的字母偏移量基础值获取对应的基础值就可以 */margin-top: calc(100vh * var(--i));
}完整代码下载
完整代码下载
