css 灰度_如何在滚动上建立灰度到色彩效果(CSS和JavaScript)
css 灰度
在这个新教程中,我们将从一些灰度图像开始,并学习如何在滚动条上平滑地显示其彩色变体。 为了达到理想的效果,我们将利用CSS Grid, clip-path
属性和Intersection Observer API等现代的前端功能。
我们的灰度到彩色效果
在不做进一步介绍的情况下,让我们检查一下要构建的内容:
浏览器支持
尽管此效果具有不错的浏览器支持,但请注意,它在某些浏览器(如早期版本的Microsoft Edge)中将无法使用。 对于此示例,我将集中精力于效果背后的技术,而不会为其他浏览器提供后备。
1.从HTML标记开始
我们将从四个部分开始:
<section class="section">...</section>
<section class="section">...</section>
<section class="section">...</section>
<section class="section">...</section>
在每个部分的内部,我们将放置标题和全屏div
包装器。 包装器将包含两个空div
。 这两个元素将共享相同的背景图像。 第一个将显示其灰度版本,而最后一个将显示其原始彩色版本:
<h2>...</h2>
<div class="vh-100 img-wrapper">
<div class="grayscale cover" style="background-image: url(IMG_SRC);"></div>
<div class="colored cover" style="background-image: url(IMG_SRC);"></div>
</div>
彩色图像将以从左到右的幻灯片动画形式出现。 幸运的是,我们可以通过data-animation
属性自定义动画的方向。 它所需要的是增加该属性对应的.colored
元件与值to-left
, to-top
,或to-bottom
。
2.定义样式
准备好标记后,我们将继续主要样式。
实用程序类
对于此演示,我们将首先定义两个实用程序类,将它们附加到目标元素:
.cover {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.vh-100 {
height: 100vh;
}
堆叠元素
默认情况下,保存图像的div
将堆叠在另一个之上。 只有带有灰度图像的div
是可见的。
以下是必需的样式:
/*CUSTOM VARIABLES HERE*/
.img-wrapper {
display: grid;
}
.img-wrapper div {
grid-column: 1;
grid-row: 1;
}
灰度图像
要创建灰度图像,我们将使用grayscale()
CSS函数并将1
或100%
的值作为参数传递。 另外,我们将为所有灰度图像提供背景色作为后备,直到加载这些图像中的每一个:
/*CUSTOM VARIABLES HERE*/
.grayscale {
filter: grayscale(1);
background-color: var(--gray);
}
彩色图像
如上所述,彩色图像将首先被隐藏。 一旦它们的一部分在页面上可见,它们就会通过幻灯片动画变得可见。
在此处查看最终效果的GIF版本 。
为了在视觉上隐藏它们,我们将不使用任何传统CSS方式,例如display: none
, opacity: 0
和transform: translateX(-100%)
。 实际上,我们将尝试使用clip-path
,这是一个现代CSS属性,可以帮助我们构建有趣的效果。
快速clip-path
属性说明
clip-path
属性使我们能够切除元素的一部分并仅显示元素的特定部分。 可见区域可以用不同的形状(圆形,椭圆形,多边形,矩形)表示。
在我们的示例中,我们将使用inset()函数来构建所需的矩形。
以最简单的形式,它可以沿顺时针方向接收多达四个值,这些值指定生成所选区域的侧面偏移量(顶部,右侧,底部,左侧)。 为简单起见,我们可以使用margin速记,它使我们能够将所有四个inset设置为一个,两个,三个或四个值。 (可选)我们可以向此函数传递一些额外的值,以指定矩形的圆度。
因此,为了练习,让我们假设下面的Pixel图片为200px x 300px。
如果我们给它clip-path: inset(10px 20px 30px 40px)
,则结果图像将为140px x 260px:
更进一步,具有clip-path: inset(0)
的元素意味着将出现整个元素。
另一方面,将四个值之一设置为100%的元素表示将被挤压和隐藏。 请记住,该值在函数中的顺序很重要,并且可能会产生不同的动画。
回到我们的示例,这是我们最初隐藏彩色图像的方式:
.colored {
clip-path: inset(0 100% 0 0);
transition: all 1.5s ease-in-out;
}
.colored[data-animation="to-left"] {
clip-path: inset(0 0 0 100%);
}
.colored[data-animation="to-top"] {
clip-path: inset(0 0 100% 0);
}
.colored[data-animation="to-bottom"] {
clip-path: inset(100% 0 0 0);
}
3.滚动动画
彩色图像将被激活并滚动滚动。
为了完成此任务,我们将利用Intersection Observer API。
当每个目标元素的至少50%进入视口时,它将收到is-animated
类。 否则,它将失去此类并变为隐藏。
无需赘述,这是实现此功能JavaScript代码:
const targets = document.querySelectorAll(".colored");
const isAnimated = "is-animated";
const threshold = 0.5;
function callback(entries, observer) {
entries.forEach((entry) => {
const elem = entry.target;
if (entry.intersectionRatio >= threshold) {
elem.classList.add(isAnimated);
//observer.unobserve(elem);
} else {
elem.classList.remove(isAnimated);
}
});
}
const observer = new IntersectionObserver(callback, { threshold });
for (const target of targets) {
observer.observe(target);
}
注意1:要查看此API的工作方式以及滚动时返回的内容,请在浏览器控制台中打印entry
。
注意2:最初,我尝试了isIntersecting
一个而不是intersectionRatio
isIntersecting
属性。 但是,我注意到它在Firefox中存在问题。
提示:如果您希望动画只运行一次,则必须调用unobserve()
方法,如下所示:
...
if (entry.isIntersecting) {
elem.classList.add(isAnimated);
observer.unobserve(elem);
} else {
elem.classList.remove(isAnimated);
}
...
和相关CSS类:
.colored.is-animated {
clip-path: inset(0);
}
结论
就是这样,伙计们! 今天,我们通过利用令人兴奋CSS和JavaScript新功能来构建有趣的滚动效果。
显然,与任何现代工具一样,此效果在浏览器支持方面也有一些限制,特别是如果您针对较旧的浏览器。 例如,作为后备,如果浏览器不支持 clip-path
属性,则可以默认显示彩色图像。
不过,希望该练习可以帮助您学习新知识并给您一些创意。 这提醒我们建立了什么:
与往常一样,非常感谢您的阅读!
翻译自: https://webdesign.tutsplus.com/tutorials/grayscale-to-color-effect-on-scroll--cms-35094
css 灰度
css 灰度_如何在滚动上建立灰度到色彩效果(CSS和JavaScript)相关推荐
- 地址池命令 思科理由_在Cisco路由器上建立一个名为zw100的DHCP地址池,地址池的IP地址..._考试资料网...
单项选择题在Cisco路由器上建立一个名为zw100的DHCP地址池,地址池的IP地址是176.115.100.0/24,其中不用于动态分配的地址有176.115.100.2-176.115.100. ...
- tftp c++ 上传_如何在 Fedora 上建立一个 TFTP 服务器
TFTP 即简单文本传输协议,允许用户通过 UDP 协议在系统之间传输文件. -- Curt Warfield(作者) TFTP 即 简单文本传输协议(Trivial File Transfer Pr ...
- 电脑端京东的我的订单html+css页面_给静态页面上使用JS实现动态页面
首先我们做的京东购物车的案例 首先使用css和html创建静态页面代码如下 <!DOCTYPE html> <html><head><meta charset ...
- css 示例_灵感:CodePen上纯CSS动画的10个示例
css 示例 我们的移动浏览器在向我们展示令人惊叹,精美的动画方面不断变得越来越强大,越来越出色. 当与CSS的布局功能结合使用时,就可以完全不使用任何图像来创建一些精美的作品. 结果是可伸缩的,快速 ...
- vue动态切换css文件_如何在vue组件中动态的引入css文件?
问题描述 如标签描述的不准确,请见新直能分支调二浏页器朋代说谅 我的需求是开的接都上的和,近很触是没他电同近很触是没发多套皮肤,打包的时候只加载其中某一种的皮肤(不需要动态换肤),因为css文件过大, ...
- css设置div从下到上显示,科技常识:css制作从下往上逐渐显示的div
今天小编跟大家讲解下有关css制作从下往上逐渐显示的div ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css制作从下往上逐渐显示的div 的相关资料,希望小伙伴们看了有所帮助. htm ...
- css 缩放_【开发小技巧】06—如何使用CSS在鼠标悬停时缩放图像?
英文 | https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/?ref=rp翻译 | web前端开发 ...
- 页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像
页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...
- 为什么request的页面与原页面不同_如何在不同页面上使用不同的Joomla CSS
简介: 我们的一位用户希望其网站首页具有不同的背景. Joomla确实提供了几种自定义单个页面的方法.本教程将向您介绍两个Joomla选项.让我们开始吧 ... 我们的一位用户希望其网站首页具有不同的 ...
最新文章
- python xlrd_python模块之xlrd
- mysql表数据以本地文件方式导入Hive
- OpenCV实现图像对齐ECC算法(附完整代码)
- Dp问题:奶牛的聚会
- 存储过程里调用另一个存储过程的值
- jmeter压力测试_用Jmeter实现对接口的压力测试
- java.lang.NoSuchFieldError: No instance field
- Ising模型(伊辛模型)
- [转贴]Unix-Center.Net需要您的帮助
- 《天下3》幻化:剧情任务
- 大转盘抽奖小程序源码
- 金融产业数据治理实践及方法论
- 21 个令程序员泪流满面的瞬间
- 做一名合格的网络管理员
- HEVC学习笔记 第1章 编码结构
- Bessie Goes Moo(暴力)
- 腾讯全资子公司 CODING 2021 届春季校招补录全面启动!
- Linux下的光盘刻录
- opencv标定实现总结(圆点,棋盘格和非对称圆点)
- MagicaVoxel打不开,双击没反应
热门文章
- telerik grid ajax,Telerik.Web.Mvc网格。在.DetailView中没有调用Ajax方法
- 比较好的Android开发帖子
- 列主元法解线性方程组
- 为什么说程序员是一个极度劳累的工作?
- LeCun再度回应卸任:我没有被取代,Jérôme 的朋友爆料趣事
- android 蓝牙串口连接不上,安卓手机搜索不到蓝牙模块HC-06,是怎么回事?
- 瘟疫模拟相关知识总结(传染病模型+马尔可夫链)
- python编程语言创始人-人工智能“网红”编程语言Python进入山东小学课本
- 解决Android7.0以上读取不到本地文件的问题
- Android 12壁纸,Android12壁纸下载-Android12壁纸高清壁纸大全 v1.0-友情手机站