美化_自定义循环滚动文本栏_小部件_简单

常规
1

开始

  • 实现这个样式需要什么？
    1. 需要你已经安装dataview插件。
    2. 你自己创建的一个文章。(用来放你想要显示的文本。)
    3. 一个我提供的CSS
    4. 一个我提供的dataviewjs

创建存储文本的文章

  • 在你自己的库中新建一个文章。
  • 把你想要在小部件中显示的文本，以无序列表的格式输入其中。
- 这是第一条提醒
- 这是第二条
  • 小部件只会显示无序列表格式的内容，所以你可以自由编辑内容。
    • 比如用大标题为无序列表内容分类
    • 或是把无序列表内容前的- 删掉，这样就不会显示对应的内容了。

CSS

  • CSS如下
    • 把以下 css 内容作为后缀为.css的文件，放入obsidian的css文件夹中，然后在外观设置中开启即可
/*
2025年4月4日 15点31分
deepseek
*/

/* 核心容器 */
.scroll-loop-master {
  --scroll-speed: 40s;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
  margin: 15px 0;
  padding: 12px 0;
  border-radius: 8px;
  background: var(--background-secondary);
  border: 1px solid var(--background-modifier-border);
}

/* 滚动内容 */
.scroll-loop-content {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-loop var(--scroll-speed) linear infinite;
  padding-right: 100px;
  transform: translateZ(0); /* GPU加速 */
  will-change: transform;
}

/* 悬停暂停 */
.scroll-loop-master:hover .scroll-loop-content {
  animation-play-state: paused;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 智能动画关键帧 */
@keyframes scroll-loop {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - 200px)); }
}

/* 渐变遮罩 */
.scroll-loop-master::before,
.scroll-loop-master::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.scroll-loop-master::before {
  left: 0;
  background: linear-gradient(90deg, var(--background-secondary) 30%, transparent);
}

.scroll-loop-master::after {
  right: 0;
  background: linear-gradient(270deg, var(--background-secondary) 30%, transparent);
}

dataviewjs

  • dataviewjs 代码如下
    • 直接复制，然后放到你想要放的位置，然后在配置项第一行中填写你创建的存储文本的文章的路径。
    • 其他的一般不需要修改。
```dataviewjs
// 配置项 ========================
const TIPS_FILE = "在这里填写你创建的存储文本的文章的路径，如：文件夹1/存储文本的文章.md";
const MIN_LOOP_TIMES = 1;      // 最小循环次数
const SPACER = ' '.repeat(10); // 全角空格
const DECORATOR = '✦ ';        // 装饰符号，都可自定义
// =============================

const container = dv.el('div', '', { cls: 'scroll-loop-master' });
const contentEl = container.createEl('div', { cls: 'scroll-loop-content' });

try {
  // 精准内容提取
  const fileContent = await dv.io.load(TIPS_FILE);
  const rawTips = fileContent.split('\n')
    .filter(line => {
      const trimmed = line.trim();
      return trimmed.startsWith('- ') && 
             !trimmed.includes('##') && 
             !trimmed.match(/[✅📧🔍]/);
    })
    .map(line => DECORATOR + line.slice(2).trim());

  if (rawTips.length === 0) {
    contentEl.textContent = "🎉 当前无待办事项";
    return;
  }

  // 动态构建循环内容
  let loopContent = rawTips.join(SPACER);
  let finalContent = '';
  let loopCount = 0;
  
  // 确保内容足够长
  do {
    finalContent += loopContent + SPACER;
    loopCount++;
    contentEl.textContent = finalContent; // 实时更新
    await new Promise(r => setTimeout(r, 50)); // 等待渲染
  } while (
    contentEl.scrollWidth < container.offsetWidth * 2 && 
    loopCount < MIN_LOOP_TIMES * 2
  );

  // 最终内容设置
  contentEl.textContent = finalContent.repeat(2); // 双倍保证无缝

  // 动态速度调整
  const baseSpeed = 150; // 基准速度（秒）
  const speedRatio = Math.max(contentEl.scrollWidth / 3000, 0.8);
  contentEl.style.animationDuration = `${baseSpeed / speedRatio}s`;

} catch (error) {
  console.error('滚动提示加载失败:', error);
  contentEl.textContent = "⚠️ 提示加载异常，请检查控制台";
}
```

结束

  • 2025 年 7 月 6 日 17 点 00 分

  • 呜呜呜教程好难写

2 个赞