行パーマリンクの強調表示を変更して遷移エフェクトをつける
UserCSS.icon
行パーマリンクの強調表示が発生するタイミング:
参照元ページへの遷移時(遷移エフェクト、文中リンクのある行にジャンプする) 全文検索も同様に、本文内の検索ワードまでスクロールする 行のテロメアがクリックされた時
このUserCSSが行うこと:
1. 行パーマリンクの背景色を初期値の黄色から薄い赤色に変更
2. 行パーマリンクが active になった直後に再生される視覚効果をつける
行全体を染める不透明な濃色から透明で薄い色へと、0.85秒間かけて「色を落とす」アニメーション
この animation-duration: 0.85s; に関しては、視覚効果自体の体感時間と、参照元ページ読み込み後に参照箇所に飛ばされるまでのタイムラグ(ページの重さと閲覧環境による)を勘案して微調整すること
エフェクトはテロメアクリック時のフィードバックとしても機能するため、再生時間をそれほど長くしないほうがよい
code:style.css
body {
--line-permalink-color: hsl(353 79% 60% / 10%);
--line-permalink-activated-init-bg: hsl(356 98% 45%);
--line-permalink-activated-animation-duration: 0.85s;
}
@keyframes line-permalink {
from {
background-color: var(--line-permalink-activated-init-bg, hsl(from var(--line-permalink-color, rgb(234 218 74)) h 98% 45% / 100%));
}
to {
background-color: var(--line-permalink-color, rgb(234 218 74 / 0.75));
}
}
.line.permalink {
animation-duration: var(--line-permalink-activated-animation-duration, 0.85s);
animation-name: line-permalink;
animation-timing-function: ease-out;
}