开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

纯CSS视差-滚动后隐藏在视差图片下的文本

纯CSS视差效果是一种通过CSS技术实现的网页滚动效果，它可以使页面中的元素在滚动过程中以不同的速度移动，从而产生出立体的视觉效果。其中，滚动后隐藏在视差图片下的文本是指在滚动页面时，文本内容会被视差图片遮挡，只有当滚动到特定位置时，文本才会逐渐显示出来。

这种效果可以通过CSS的position属性和z-index属性来实现。具体步骤如下：

首先，需要创建一个包含视差图片和文本的容器元素，可以使用div元素来实现。
设置容器元素的position属性为relative，这样可以使得容器内的元素相对于容器进行定位。
将视差图片作为容器的背景图片，并设置background-size属性为cover，使得图片能够铺满整个容器。
在容器内部创建文本元素，可以使用p或者span等元素来包裹文本内容。
设置文本元素的position属性为absolute，这样可以使得文本元素脱离文档流，并相对于容器进行定位。
使用z-index属性来控制文本元素的层级，将其设置为较小的值，使得文本元素位于视差图片下方。
最后，使用CSS的动画或者过渡效果，通过改变文本元素的透明度或者位置，使得文本在滚动过程中逐渐显示出来。

纯CSS视差效果可以为网页增加一些动态和立体感，常见的应用场景包括产品展示页面、个人简历页面、创意宣传页面等。

腾讯云相关产品中，可以使用云服务器（CVM）来部署和托管网页，使用对象存储（COS）来存储和管理图片资源，使用内容分发网络（CDN）来加速图片的加载和传输。具体产品介绍和链接如下：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。了解更多：https://cloud.tencent.com/product/cvm
对象存储（COS）：提供安全、稳定、低成本的云端存储服务，适用于各种数据存储需求。了解更多：https://cloud.tencent.com/product/cos
内容分发网络（CDN）：通过在全球部署节点，加速内容传输，提高用户访问网页的速度和体验。了解更多：https://cloud.tencent.com/product/cdn

以上是关于纯CSS视差-滚动后隐藏在视差图片下的文本的完善且全面的答案，希望能对您有所帮助。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

巧用 CSS 视差实现酷炫交互动效

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。...关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。...这里，会运用上这样一种纯 CSS 的视差技巧：使用 transform: translate3d 实现滚动视差这里利用的是 CSS 3D，实现滚动视差效果。...先来看第一个效果：效果是一种文本交替在不同高度的层展示，并且在滚动的过程中，会有明显的 3D 视差效果。...： CodePen Demo -- Pure CSS Scroll Animation 2（Chrome Only && Support ScrollTimeline）总结一下当然，本文后一个效果中

8224 0

滚动视差？CSS 不在话下

[parallax] 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。...可以感受下 3 种不同取值的不同效果： CodePen Demo -- bg-attachment Demo 使用 background-attachment: fixed 实现滚动视差首先，我们使用...而滚动视差效果，正是不按常理出牌的一个效果，重点来了：当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，...使用 transform: translate3d 实现滚动视差言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。...transform: translateZ，滚动滚动条，效果如下： [css3dparallax] 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

1.9K8 0

滚动视差？CSS 不在话下

通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。...可以感受下 3 种不同取值的不同效果： CodePen Demo -- bg-attachment Demo 使用 background-attachment: fixed 实现滚动视差首先，我们使用...而滚动视差效果，正是不按常理出牌的一个效果，重点来了：当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，...使用 transform: translate3d 实现滚动视差言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。...CodePen Demo -- CSS 3D parallax 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

1.7K3 0

滚动视差？CSS不在话下

作为网页设计的热点趋势，越来越多的网站应用了这项技术。 ? 通常而言，滚动视差在前端需要辅助 Javascript才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。...可以感受下 3 种不同取值的不同效果： CodePen Demo — bg-attachment Demo 使用 background-attachment: fixed 实现滚动视差首先，我们使用...而滚动视差效果，正是不按常理出牌的一个效果，重点来了：当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，...使用 transform: translate3d 实现滚动视差言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。...CodePen Demo — CSS 3D parallax 很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

1.3K2 0

前端-滚动视差？CSS 不在话下

作为网页设计的热点趋势，越来越多的网站应用了这项技术。 ? 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗的能力。...而滚动视差效果，正是不按常理出牌的一个效果，重点来了：当页面滚动到图片应该出现的位置，被设置了 background-attachment: fixed 的图片并不会继续跟随页面的滚动而跟随上下移动，...综上，就是 CSS 使用 background-attachment: fixed 实现滚动视差的一种方式，也是相对而言比较容易的一种。...: fixed 实现图片点击水纹效果利用图片相对视口固定，可以有很多有趣的效果，譬如下面这个，来源于这篇文章CSS Water Wave (水波效果)： ?...使用 transform: translate3d 实现滚动视差言归正传，下面介绍另外一种使用 CSS 实现的滚动视差效果，利用的是 CSS 3D。

1.6K3 0

CSS | 视差滚动 | 笔记

引言视差滚动（Parallax Scrolling）是一种效果，能够使不同层次的元素以不同的速度进行滚动，从而产生了视觉上的深度感和动态效果。...滚动一般指 background-attachment 容器滚动，而背景图不滚动（固定）视差一般指 transform: translate3D 引起的视差效果，但有些时候也仅仅用 background-attachment...形成的效果称之为视差滚动 background-attachment 固定背景的位置是使用CSS创建视差效果的最早方法。...，会发现就图片移动速度而言，图1 > 图2 > 图3，这是因为这些图片离你的距离：图1 < 图2 < 图3, 图1 离你最近，因此随着你的滚动看起来最快，（注意：这里图片看起来没有近大远小，是因为手动放大了图片尺寸...CSS 雪碧图位置雪碧图是根据 CSS sprite 音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。

8222 1

视差滚动效果实现

视差滚动是一种在网页设计和视频游戏中常见的视觉效果技术，它通过在不同速度上移动页面或屏幕上的多层图像，创造出深度感和动感。...在官网中适当的使用视差效果，可以增加视觉吸引力，提高用户的参与度，从而提升网站和品牌的形象。本文通过JavaScript、CSS多种方式并在React框架下进行了视差效果的实现，供你参考指正。...3、ReactScrollParallax 想得到更炫酷的滚动视差效果，纯 CSS 的实现方式就会有些吃力。...如下是在 React 中实现示例，通过监听滚动事件，封装统一的视差组件，来达到多样的动画效果。...scrolling with CSS 视差滚动实践原地址文

2142 0

动效案例：纯手工写一个滚动视差效果

在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。一、什么是滚动视差？...视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。...我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。...，这是我们制作滚动视差的关键。...小节到此，我们一起完成了这个案例，通过本案例，我们学会了如何纯手工实现一个简单的滚动视差效果。

2.1K3 0

9个独特的 CSS 背景视觉效果

利用它和鼠标的滚动可以实现一些非常酷的颜色滚动效果。比如下面这个例子就使用CSS的混合模型(Blend Mode)和背景图片实现的一个效果： ?...视差滚动动画视差滚动的应用在web中已经应用的很广泛了，也又很多种表现形式，这里说的这种是两个不同的图片在水平方向上往不同的方向运动： ?...只需要借助一点点JavaScript来改变图片的background-size属性就可以实现这样的效果： ? 视差滚动Hero Image图片效果下面这个效果应用的也非常多。...首先，是一张大的图片在文章的顶部并且图片上面还覆盖了一个遮罩图层用来营造一种不同的颜色视觉效果。然后用渐隐渐显的动画效果来引入图片，最后在滚动的时候，使用了视差的效果来隐藏图片。...滚动改变颜色视觉效果有时候仅仅是简简单单的改变一下背景的颜色就可以起到四两拨千斤的效果。比如下面这个效果，就是通过监听网页滚动的位置来改变背景颜色，简简单单就可以营造一种别样的视觉效果。 ?

2.5K5 0

【转】动效案例：纯手工写一个滚动视差效果

以下文章来源于前端达人，作者前端达人大家好，今天我们一起来实践一个滚动视差的动画效果。...虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车的画面。在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。...一、什么是滚动视差？视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。...我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。...，这是我们制作滚动视差的关键。

1.3K1 1

动效案例：纯手工写一个滚动视差效果

大家好，今天我们一起来实践一个滚动视差的动画效果。虽然我们不是设计师，不擅长PS、AE，但是我们完全可以通过前端技术设计一幅漂亮的画面，今天我们要设计一幅月下山间小道开车的画面。...在介绍之前，我们首先了解下什么是滚动视差，有助于我们实现这个案例。一、什么是滚动视差？...视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。...我看到多家产品商用视差滚动效果来展示产品，从不同的空间角度和用户体验，起到了非常不错的效果。...2、window属性：scrollY 在这里我们使用JS脚本动态更新相关图片在界面的位置，这是我们制作滚动视差的关键。

1.4K2 0

这11个有趣的 CSS 和 JavaScript 库太实用了！

简单上手，可以尝试一下看效果会不会更好~ 地址：http://fitvidsjs.com/ 6. multi.js multi.js 是具有 multiple 属性的选择框的用户友好替代品。...Tent CSS 使用 gzip 时它只有 5kb。在创建响应式网站时，这个 CSS 框架非常有用，或者创建者喜欢称之为生存工具包，它满足所有基本的 CSS 需求。...Anchorme 小巧、快速、高效、功能丰富的 Javascript 库，用于检测文本中的链接/URL/电子邮件并将它们转换为可点击的 HTML 链接。...Moveto MoveTo 是一个 JavaScript 库，用于在单击按钮时创建滚动动画。有趣的是，这个库在使用 gzip 压缩时只有 1kg，并且不依赖于 jQuery 或其他任何东西。...Rellax 视差风尚可能正在消失，但具有精心制作的视差的网站仍然给任何访问者留下深刻印象。rellax.js 是一款轻量级的不需要任何依赖的纯JavaScript滚动视觉差特效插件。

1.5K4 0

聊聊苹果营销页中几个有趣的交互动画

滚动视差 background-attachment 什么是滚动视差，来看一下下面这个例子就明白了： ?...❝关于滚动视差的讲解，大家可以参考这篇文章滚动视差？CSS 不在话下[5]，写的很详细。...「它用了 120 张图片，根据滚动距离来画出对应的在这个滚动位置上该展示的图片」，对，你没有听错。我之前也以为应该是 css3 控制盖的角度从而实现翻盖效果的，是我想多了，哈哈哈。 ?...❞ 缩放图片缩放图片到屏幕这个动画我们可以用两个方式实现，一个是「滚动视差」实现，一个是 canvas 在滚动过程中实时渲染图片。开始之前我们来看一下没有放大的之前图，如下： ?...滚动视差实现前面我们也讲了滚动视差的原理，有了这个 background-attachment: fixed 属性，第二个动画基本上已经实现一半了。

1.9K6 0

滚动视差让你不相信“眼见为实”

本文主要是简单的介绍一下什么是视差滚动，实现方式以及如何在现有框架(vue/react)中使用视差滚动。什么是视差滚动？视差效果，最初是一个天文术语。...说的简单点就是，滚动屏幕时，网页中元素的位置会发生变化。但是不同的元素位置变化的速度不同，导致网页中产生分层元素的错觉。看完上面这段，相信你对视差滚动的概念已经有了一个初步的了解。...下面让我们先来看一下如何用 css 来实现视差滚动。...（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。...总结下来就是: 父容器设置transform-style: preserve-3d和perspective: xpx，子元素设置不同的transform: translateZ() 看完了用 css 实现滚动视差的两种方式

2.2K7 6

使用纯 CSS 实现滚动阴影效果

可以看到，在滚动的过程中，会出现一条阴影： ? 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 position: sticky 即可解决。...但是对于滚动过程中才出现的阴影（滚动容器内的内容没有贴边，则阴影出现，贴边，则阴影消失），之前的做法一直都是需要借助 JS 完成的。那么，有没有纯 CSS 能够实现的方案呢？嘿嘿嘿，有。...神奇的 background-attachment 要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是 background-attachment。...在较早的一篇文章里 -- CSS 实现视差效果，详细了介绍了 background-attachment，借助了 background-attachment: fixed 可以简单的实现网站的滚动视差或者是类似图片点击的水纹效果...我们调整一下两个渐变的颜色，遮罩层（background-attachment: local）为白色，再把固定不动的阴影层（background-attachment: scroll），利用径向渐变模拟为我们想要的阴影颜色

2.6K2 0

2015 Top10 最成功的网页设计趋势

4.使用一个大背景图片　　最新的绝大多数网站，特别是那些依赖单页面滚动的网站，和拥有传统功能的网站有很大的不同。使用一个大图片作为背景，所有的元素都必须很好地平衡。...通过这种方式,背景仍保持相当突出，而所有页面上的按钮和文本也很容易发现。　5.视差图像　　视差滚动在2015年开始被使用,但并不普遍被采用。...这种方法的设计是基于创建一个视差错觉，来吸引用户来浏览访问整个网站。　　使用视差图形拥有以下优点：　　滚动是令人愉悦的。　　它们很容易被发现和吸引访客。　　用户被引导访问页面。...CSS3和HTML5可以提供几个解决选项，你能对元素的功能做很多不同的处理。你可以使用内容驱动悬停状态、扩展板来提升吸引力。...9.单页滚动效果　　单页滚动效果可以简化你的网站，并且可以免去用户浏览新页面每次都要加载。一个页面只需加载一次，然后就可以给用户展现所有的内容。

7102 0

--0312视差效果--课堂笔记

今天是3月12号，来学习一下视差滚动。严格来讲，它其实是一种网页效果，而不是一个前端组件，顶多是一个插件。插件，一般是用来实现网页上的一个或多个功能。...视差（量），视差角度; 它是一种比较优雅酷炫的页面展示的方式，今天咱们研究下视差滚动的原理和实现方式。视差的原理，视差就是从有一定距离的两个点上观察同一个目标所产生的方向差异。...--这不就是勾股定理嘛指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术。从上面几个例子可以看出，视差比较适合从上到下，形成故事性感觉。...不少是利用故事情节或者逻辑方式层层推进式，将视差滚动串联起来。这一点我个人觉得很适合我们的游戏产品，现在游戏中不少是讲求剧情的。 //========== 简单的视差效果，一般可以用css来实现。...//============== js视差效果的插件接下来讲了下，我是如何阅读源码的 Parallax-Scrolling-master.js //代码量有限，很可能只是为了实现某个具体网站的代码，，

9546 0

视差滚动技术的简介及运用

The Whispered World 中使用视差滚动图层的侧视图 ?...例如 Star Force ，NES上的一个俯视垂直滚动射击游戏，它的星空背景使用了视差滚动。...使用copper处理器的Amiga 电脑的sprites可以有任意高度并且可以设置水平，这对于实现视差滚动非常理想。...在这些系统上的更复杂的游戏通常将图层分为水平条，每个都有不同的位置和滚动的速度。通常情况下，在屏幕上越高的水平条表示离虚拟相机越远，或者被固定的水平条用来显示状态信息。...Animation (click to play) 网页设计中的视察滚动网页设计师在2011年开始使用Html5和CSS3制作视差滚动。拥护者认为这是迎接流动性网页的简单方式。

2.8K6 0

那些前端常用的网站插件

— CSS 实现动画过渡的 jQuery 插件 Barba.js — 流式页面过渡 TwentyTwenty — 一个对比图片的可视化 diff 工具 Vivus.js — 在 SVG 上绘制动画 Wow.js... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画...Handlebars.js — Javascript 模板 jInvertScroll — 视差滚动 One page scroll — 又一个页面滚动库 Parallax.js — 对智能设备方向变化做出响应的视差引擎...Typeahead.js — 搜索补全 Dragdealer.js — 炫酷拖拽 Bounce.js — 创建炫酷的 CSS3 动画 Pagepiling.js — 全屏滚动 Multiscroll.js...CSS 添加 function，动态化 CSS Magic animations — CSS3 实现动画特效 CSSpin — css spinners 合集 Feather icons — Icon

4.5K5 0

视差特效的原理和实现方法

---- theme: smartblue 前言本文的案例代码并非作者原创。本文主要讲解视差效果是如何实现的（原生三件套），本文并不涉及性能优化相关的知识点讲解（你就当我耍流氓吧）。...学废后帮我点个赞呗~ 本文的『推荐』部分也别错过喔~ 因为日常开发很少使用原生的方式去做视差效果。 ‍...在线演示 ‍本文代码仓库本文案例如图所示 image.png 原理 pc端的视差效果通常是根据鼠标、键盘、滚动条的变化和操作进行视觉上的差异化控制。...…… 我放几个例子让大家直观感受一下：【点击跳转在线预览：⭐⭐鼠标移动的视差效果⭐⭐】 image.png 【点击跳转在线预览：使用GSAP的视差层效果特效（滚动鼠标滚轮）】 image.png 【点击跳转在线预览...终极版上面的『进阶版』讲解了实现视差效果的秘密。平时见到更加复杂的效果，其实可以把元素逐一拆分，逐一控制。

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭