【CSS 分享】：递进 “禅” / 专注模式

寒Orz · 2024 年4 月 19 日 10:36

涟漪模式.gif

如图所示，我在闲逛的时候发现了这个插件：Ghost fade focus，感觉比一般的专注模式要舒服，而且用 css 就能达到一样的效果，如下。

css 片段代码

/*  当前行相邻的元素，多是空行 */
.cm-line:has(+.cm-active) {
    opacity: 0.8;
    transition: all 1s;
}

.cm-active +.cm-line {
    opacity: 0.8;
    transition: all 1s;
}

/* 当前行相隔一行的元素，多是内容块 */
.cm-line:has(+.cm-line +.cm-active) {
    opacity: 0.6;
    transition: all 1s;
}

.cm-active +.cm-line +.cm-line {
    opacity: 0.6;
    transition: all 1s;
}

/* 当前行相隔两行的元素，多是空行 */
.cm-line:has(+.cm-line +.cm-line +.cm-active) {
    opacity: 0.4;
    transition: all 1s;
}

.cm-active +.cm-line +.cm-line +.cm-line {
    opacity: 0.4;
    transition: all 1s;
}

/* 当前行相隔三行的元素，多是内容块 */
.cm-line:has(+.cm-line +.cm-line +.cm-line +.cm-active) {
    opacity: 0.2;
    transition: all 1s;
}

.cm-active +.cm-line +.cm-line +.cm-line +.cm-line {
    opacity: 0.2;
    transition: all 1s;
}

/* 当前行相隔四行的元素，多是空行 */
.cm-line:has(+.cm-line +.cm-line +.cm-line +.cm-line +.cm-active) {
    opacity: 0.1;
    transition: all 1s;
}

.cm-active +.cm-line +.cm-line +.cm-line +.cm-line +.cm-line {
    opacity: 0.1;
    transition: all 1s;
}

/* 不再聚焦的元素 */
.cm-line:has(~.cm-line +.cm-line +.cm-line +.cm-line +.cm-line +.cm-active) {
    opacity: 0.05;
    transition: all 1s;
}

.cm-active +.cm-line +.cm-line +.cm-line +.cm-line +.cm-line ~.cm-line {
    opacity: 0.05;
    transition: all 1s;
}

/* 当前行 */
.cm-active .cm-line {
    opacity: 1;
    transition: all 1s;
}

效果看着挺不错的，不过试了两天也发现了几个问题。

~~滚动时内容块的透明度也不会恢复（那个插件也是这样）。~~
~~没有设置图片，所以突然来一张色彩艳丽的照片可能会瞎~~

第一个问题，可以通过用自建插件解决，如下。

js 监听滚动事件，添加 .unzen 类

function debounce(func, delay) {
	let timerId;

	return function() {

		const context = this;
		const args = arguments;
		clearTimeout(timerId);
		timerId = setTimeout(function() {
		func.apply(context, args);
		}, delay);
	};
		}
	
// 假设这是您要执行的函数
function handleWheelEvent() {
	var paras = Array.from(document.querySelectorAll('.cm-line')); // 使用querySelectorAll获取所有匹配的元素
	paras.forEach(para => {
		para.classList.add('unzen'); // 给每个元素添加'unzen'类
});
	new Notice("在动了"); // 显示通知
}

	// 创建防抖动版本的函数
const debouncedHandleWheelEvent = debounce(handleWheelEvent, 100); // 设置防抖动时间为300毫秒

// 注册防抖动事件处理程序
this.registerDomEvent(activeDocument, 'wheel', debouncedHandleWheelEvent);

由于我完全不会编程，代码都是东拼西凑然后问 AI ，所以相当的简陋。

总之，这样的页面有点像“涟漪”，用来写点什么的时候很有些赏心悦目，大家也来试试吧。

如果有大佬喜欢这样的页面，写个插件完善一下就太好了。

更新一下

找到一个插件 Focus active sentence 可以很好地解决滚动后内容块的透明度也不会恢复的问题。

这个插件的功能是实现类似 IA Writer 聚焦于当前句子，淡化其他元素。可以通过修改其 style.css 文件达到上面的涟漪模式效果，甚至结合原css，实现当前编辑的句子与当前内容块的梯度聚焦。

其效果如下：

请注意，为了让效果更明显，我将当前内容块除聚焦句之外的透明度设为0.6，代码很简单，大家可以自己调节。

style.css 按如下调整

/* Only apply styling when the focus-active-sentence class is present */

/* .focus-active-sentence .cm-line {
opacity: 0.5;
} */

.focus-active-sentence .cm-active.cm-line {
opacity: 1;
transition: all 1s;
}

.focus-active-sentence .cm-active.cm-line .active-paragraph {
opacity: 0.6;
transition: all 1s;
}

.focus-active-sentence .cm-active.cm-line .active-sentence {
opacity: 1;
transition: all 1s;
}

/* 当前行相邻的元素，多是空行 */
.focus-active-sentence .cm-line:has(+.cm-active) {
opacity: 0.4;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line {
opacity: 0.4;
transition: all 1s;
}

/* 当前行相隔一行的元素，多是内容块 */
.focus-active-sentence .cm-line:has(+.cm-line +.cm-active) {
opacity: 0.4;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line +.cm-line {
opacity: 0.4;
transition: all 1s;
}

/* 当前行相隔两行的元素，多是空行 */
.focus-active-sentence .cm-line:has(+.cm-line +.cm-line +.cm-active) {
opacity: 0.25;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line +.cm-line +.cm-line {
opacity: 0.25;
transition: all 1s;
}

/* 当前行相隔三行的元素，多是内容块 */
.focus-active-sentence .cm-line:has(+.cm-line +.cm-line +.cm-line +.cm-active) {
opacity: 0.2;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line +.cm-line +.cm-line +.cm-line {
opacity: 0.2;
transition: all 1s;
}

/* 当前行相隔四行的元素，多是空行 */
.focus-active-sentence .cm-line:has(+.cm-line +.cm-line +.cm-line +.cm-line +.cm-active) {
opacity: 0.1;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line +.cm-line +.cm-line +.cm-line +.cm-line {
opacity: 0.1;
transition: all 1s;
}

/* 不再聚焦的元素 */
.focus-active-sentence .cm-line:has(~.cm-line +.cm-line +.cm-line +.cm-line +.cm-line +.cm-active) {
opacity: 0.05;
transition: all 1s;
}

.focus-active-sentence .cm-active +.cm-line +.cm-line +.cm-line +.cm-line +.cm-line ~.cm-line {
opacity: 0.05;
transition: all 1s;
}

/* 当前行 */
.focus-active-sentence .cm-active .cm-line {
opacity: 1;
transition: all 1s;
}

至于图片问题，可以用下面的css样式来达到非聚焦内容块即透明效果，只贴一行好了，其他的参考上面更改就行。

/* 处理图片 */
/*  当前行相邻的元素，多是空行 */
.focus-active-sentence img:has(+.cm-active) {
    opacity: 0.6;
    transition: all 1s;
}
  
.focus-active-sentence .cm-active +img {
    opacity: 0.6;
    transition: all 1s;
}

以上的代码直接放在自己的 css 片段里也可以生效，可以通过 QuickAdd 设置一个快捷键，当需要长期大量浏览内容时关闭涟漪模式。

此外，在 css 片断里添加如下内容，以便退出涟漪模式时不至于突兀。

/* 退出聚焦模式 */
.cm-line {
  opacity: 1;
  transition: all 1s !important;
}

img {
  opacity: 1;
  transition: all 1s !important;
}

至此就差不多了，还有一些想要但凭我的能力肯定是没法了的效果，附在下面，如果有大佬肯实现那真是再好不过。

打字机模式的动画效果，现有的打字机插件在把当前行移动至中心位置时也比较突兀，希望也能有一个平滑的过渡动画。
这个插件直接监听页面滚动事件，比较担心性能，希望能优化。

另外，以上图片中的效果除了魔改的专注模式外，还使用了 Typewriter mode 的打字机及聚焦当前行模式，Ninja cursor 的输入光标，添加了 Fake Fullsreen 模式的 Prozen 插件（注意，这个提交没有合并）。

yaozhuwa · 2024 年4 月 19 日 14:14

看起来效果不错，稍微优化下就是个好插件了~

liux · 2024 年4 月 20 日 03:06

我之前也改过这个插件，改成了自动按照空行来设定透明度，而不是固定的5行，其实相当于只专注于当前块

关于图片的问题我也没找到解决办法，希望有大佬能解决这个问题，这个我已经提issue了，但感觉作者已经很久没维护了

20240420_173021Edit

寒Orz · 2024 年4 月 20 日 15:29

只专注于当前内容块的话，我觉得 Typewriter Mode 已经做得很好了，而且作者更新的也算比较勤。

liux · 2024 年4 月 20 日 17:55

不是，我的一个块内是有换行的，以空行分隔的称之为块
typewriter mode还是高亮一个行

寒Orz · 2024 年4 月 21 日 01:37

哦哦，图片也可以改透明度，我昨天试了一下，写在上面了，你可以试试看能用不

我的效果是这样：
图片透明

（受限于允许上传的图片大小，质量就这样了，反正是这个意思）

liux · 2024 年4 月 21 日 08:48

感谢，提供了思路，我又改了下css代码，现在基本可以实现我的需求了（还有些bug，不管了）

【CSS 分享】：递进 “禅” / 专注 模式

更新一下

【CSS 分享】：递进 “禅” / 专注模式