跳至主要内容
CSS-Tricks
  • 文章
  • 笔记
  • 链接
  • 指南
  • 年鉴
  • 随机
搜索

文章标签
scrolling

35 篇文章
{
,

}
文章“滚动阴影?纯 CSS视差?游戏继续。”的直接链接。
background-attachment 跨浏览器 Safari 滚动

滚动阴影?纯 CSS视差?游戏继续。

Chris 称滚动阴影是他最喜欢的 CSS-Tricks 之一。Lea Verou 推广了使用四个分层背景渐变和一些巧妙的background-attachment魔术的纯 CSS 方法。结果是一个流畅的滚动交互,为用户提供了一个暗示……

Avatar of Geoff Graham
Geoff Graham 于 2022 年 7 月 29 日 发布
文章“如何在 CSS 中制作“拉开窗帘”效果”的直接链接
mix-blend-mode 滚动 粘性

如何在 CSS 中制作“拉开窗帘”效果

“拉开窗帘”是我对背景在滚动时从暗到亮,而顶部内容在粘性位置时也从亮到暗的效果的称呼。……

Avatar of Silvestar Bistrović
Silvestar Bistrović 于 2022 年 3 月 2 日 发布
文章“使用 JavaScript 实现滚动阴影”的直接链接
滚动 阴影

使用 JavaScript 实现滚动阴影

滚动阴影是指当且仅当您可以在该方向上滚动时,您才能在元素上看到一个小的内阴影。这是一个好的 UX 设计。您实际上可以在 CSS 中实现它,我认为这……

Avatar of Chris Coyier
Chris Coyier 于 2022 年 7 月 28 日 发布
文章“2021 年滚动调查报告”的直接链接
scroll-snap 滚动

2021 年滚动调查报告

这是一个常见的想法和问题:浏览器如何优先处理它们的工作?我们有时会瞥见它。我们被告知在错误跟踪器中“标注问题”以表示兴趣。我们被告知要参与 GitHub 线程……

Avatar of Chris Coyier
Chris Coyier 于 2021 年 9 月 15 日 发布
文章“固定背景附件技巧”的直接链接
background-attachment 固定定位 滚动

固定背景附件技巧

如果您希望主体背景处于固定位置,使其在滚动时保持不动,您有哪些选择?在 CSS 中,background-attachment: fixed 充其量在移动浏览器中效果不好,最糟糕的是甚至不……

Avatar of Murtuzaali Surti
Murtuzaali Surti 于 2021 年 8 月 27 日 发布
文章“走向“元 GSAP”:追求“完美”的无限滚动”的直接链接
GreenSock GSAP 无限滚动 scroll-snap 滚动 ScrollTrigger

走向“元 GSAP”:追求“完美”的无限滚动

我不确定这篇文章是如何产生的。但是,这是一个故事。这篇文章更多地是关于理解一个概念,一个会帮助您以不同的方式思考动画的概念。碰巧的是,这个特定的……

Avatar of Jhey Tompkins
Jhey Tompkins 于 2021 年 4 月 14 日 发布
文章“如何在不使用 JavaScript 的情况下创建滚动时收缩的页眉”的直接链接
导航 滚动 粘性

如何在不使用 JavaScript 的情况下创建滚动时收缩的页眉

想象一个网站的页眉,它又大又厚,在内容的顶部和底部都有足够的填充。当您向下滚动时,它会缩小,减少一些填充,使屏幕的实际……

Avatar of Håvard Brynjulfsen
Håvard Brynjulfsen 于 2021 年 6 月 7 日 发布
文章“可取消的”平滑滚动”的直接链接
scroll-behavior 滚动

“可取消的”平滑滚动

以下是情况:您的网站提供一个“滚动回顶部”按钮,并且您已实现了平滑滚动。当页面滚动回顶部时,用户会看到一些吸引他们注意的东西,他们想停止滚动,所以……

Avatar of Chris Coyier
Chris Coyier 于 2021 年 2 月 1 日 发布
文章“如何使用 Locomotive Scroll 实现各种滚动效果”的直接链接
滚动

如何使用 Locomotive Scroll 实现各种滚动效果

我最近在寻找一种在项目中执行滚动效果的方法,我偶然发现了Locomotive Scroll 库。它允许您执行各种滚动效果,例如视差和在滚动时触发/控制动画……

Avatar of King Nelson
King Nelson 于 2020 年 12 月 16 日 发布
  • 1
  • 2
  • 3
  • ...
  • 4
  • 较旧的

CSS-Tricks 由 DigitalOcean 提供支持。

关注 web 开发的最新动态

通过我们精心制作的时事通讯

DigitalOcean
  • 关于 DO
  • Cloudways
  • 法律事项
  • 获取免费信用额度!
CSS-Tricks
  • 为我们撰稿!
  • 与我们合作广告!
  • 联系我们
社交
  • RSS 订阅
  • CodePen
  • Mastodon
  • X
返回顶部

© 2024 . All rights reserved.