如图所示,我在闲逛的时候发现了 这个插件: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 插件(注意,这个提交没有合并)。