css 右上角 翻开动画_【第1503期】不可思议的纯 CSS 滚动进度条效果

前言

解法优秀。今日早读文章由腾讯@chokcoco授权分享。

正文从这开始~~

结论先行,如何使用 CSS 实现下述滚动条效果?

e73eb9064c14588abc302ac1c6fe5456.gif

就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短。

在继续阅读下文之前,你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果。

OK,继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ,我的第一反应也是,感觉很麻烦啊。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?

c979c36308a432b700b72eb0ef6f508c.png
分析需求

第一眼看到这个效果,感觉这个跟随滚动动画,仅靠 CSS 是不可能完成的,因为这里涉及了页面滚动距离的计算。

如果想只用 CSS 实现,只能另辟蹊径,使用一些讨巧的方法。

好,下面就借助一些奇技淫巧,使用 CSS 一步一步完成这个效果。分析一下难点:

如何得知用户当前滚动页面的距离并且通知顶部进度条?

正常分析应该是这样的,但是这就陷入了传统的思维。进度条就只是进度条,接收页面滚动距离,改变宽度。如果页面滚动和进度条是一个整体呢?

实现需求

不卖关子了,下面我们运用线性渐变来实现这个功能。

假设我们的页面被包裹在

中,可以滚动的是整个 body,给它添加这样一个从左下到到右上角的线性渐变:
body {
   background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
   background-repeat: no-repeat;}

那么,我们可以得到一个这样的效果:

b500edd7e2439b6209b4792185a6a409.gif

Wow,黄色块的颜色变化其实已经很能表达整体的进度了。其实到这里,聪明的同学应该已经知道下面该怎么做了。

我们运用一个伪元素,把多出来的部分遮住:

body::after {
   content: "";
   position: fixed;
   top: 5px;
   left: 0;
   bottom: 0;
   right: 0;
   background: #fff;
   z-index: -1;}

为了方便演示,我把上面白色底改成了黑色透明底,:

dfb8fcd2a7e925397f70e76925877119.gif

实际效果达成了这样:

b1f33c5d88ea453f6699fd3d2447ce2e.gif

眼尖的同学可能会发现,这样之后,滑到底的时候,进度条并没有到底:

821c9de1cdd3ade59c06dd563b00c04d.png

究其原因,是因为 body 的线性渐变高度设置了整个 body 的大小,我们调整一下渐变的高度:

body {
   background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
   background-size: 100% calc(100% - 100vh + 5px);
   background-repeat: no-repeat;}

这里使用了 calc 进行了运算,减去了 100vh,也就是减去一个屏幕的高度,这样渐变刚好在滑动到底部的时候与右上角贴合。

而 + 5px 则是滚动进度条的高度,预留出 5px 的高度。再看看效果,完美:

e73eb9064c14588abc302ac1c6fe5456.gif

至此,这个需求就完美实现拉,算是一个不错的小技巧,完整的 Demo:
https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100

2481e198901400fe7bc0d2cd29f7b7f3.png

别人写过的东西通常我都不会再写,这个技巧很早以前就有看到,中午在业务中刚好用到这个技巧就写下了本文,没有去考证最先发明这个技巧的是谁。不知道已经有过类似的文章,所以各位也可以看看下面这篇:
https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html

最后

其实这只是非常牛逼的渐变非常小的一个技巧。更多你想都想不到的有趣的 CSS 你可以来这里瞧瞧:

https://github.com/chokcoco/CSS-Inspiration

关于本文
作者:@chokcoco原文:https://www.cnblogs.com/coco1s/p/10244168.html

30cb8b18c5cfb03edd67182b42111b43.png

最后,为你推荐

第二届SEE Conf 2019 精彩回顾(附PPT及视频)

【第1501期】浏览器往返缓存(Back/Forward cache)问题的分析与解决

他曾分享过

【第1440期】你所不知道的CSS阴影技巧与细节

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值