CSS面试题-视差滚动 | “朝闻道”知识分享大赛

小年华°Moon 2023-11-17 07:31:38

这是我参加朝闻道知识分享大赛的第10篇文章。

注:CSS面试题分享板块的内容均为常见的前端面试中会涉及的知识点。
       具体的问题内容大同小异,大家遇到时具体问题具体分析即可。

前言:本文将会给大家介绍如何实现多层背景以不同速度移动达到想要的网页效果的方法。

目录

1. 相关概念

2. 实现步骤


1. 相关概念

视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验

我们可以把网页解刨成:背景层、内容层、悬浮层

 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果

2. 实现步骤

相关概念:

使用background-attachment属性固定背景,可以设置背景图是否固定或随页面其余部分滚动 值为:scroll(滚动,默认)、fixed(不滚动)、inherit(继承)

实现方法:background-attachment属性设置为fixed,让背景相当于页面固定,不随盒子滚动

示例代码:

注:请修改背景图的路径或在images文件夹中放3张图片来查看效果。

<style>
  /* 基础样式 */
  * {
    margin: 0;
    padding: 0;
  }
  div {
    color: #fff;
    font-size: 20vh;
    text-align: center;
    line-height: 100vh;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
  }
​
  .a-img {
    background-size: cover;
    background-position: center center;
  }
  .a-img1 {
    background-image: url(./images/10-1.jpg);
  }
  .a-img2 {
    background-image: url(./images/10-2.jpg);
  }
  .a-img3 {
    background-image: url(./images/10-3.jpg);
  }
  /* 关键样式 */
  .a-img {
    background-attachment: fixed;
  }
  /* 隐藏滚动条 */
  html::-webkit-scrollbar {
    display: none;
  }
</style>
<div class="a-text">1</div>
<div class="a-img a-img1">2</div>
<div class="a-text">3</div>
<div class="a-img a-img2">4</div>
<div class="a-text">5</div>
<div class="a-img a-img3">6</div>
<div class="a-text">7</div>
...全文
38 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

857

社区成员

发帖
与我相关
我的任务
社区描述
中南民族大学CSDN高校俱乐部聚焦校内IT技术爱好者,通过构建系统化的内容和运营体系,旨在将中南民族大学CSDN社区变成校内最大的技术交流沟通平台。
经验分享 高校 湖北省·武汉市
社区管理员
  • c_university_1575
  • WhiteGlint666
  • wzh_scuec
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

欢迎各位加入中南民族大学&&CSDN高校俱乐部社区(官方QQ群:908527260),成为CSDN高校俱乐部的成员具体步骤(必填),填写如下表单,表单链接如下:
人才储备数据库及线上礼品发放表单邀请人吴钟昊:https://ddz.red/CSDN
CSDN高校俱乐部是给大家提供技术分享交流的平台,会不定期的给大家分享CSDN方面的相关比赛以及活动或实习报名链接,希望大家一起努力加油!共同建设中南民族大学良好的技术知识分享社区。

注意:

1.社区成员不得在社区发布违反社会主义核心价值观的言论。

2.社区成员不得在社区内谈及政治敏感话题。

3.该社区为知识分享的平台,可以相互探讨、交流学习经验,尽量不在社区谈论其他无关话题。

试试用AI创作助手写篇文章吧