mirror of
https://github.com/dergigi/boris.git
synced 2026-02-18 21:44:57 +01:00
feat: add pulsing animation when scrolling to highlight
- Replace brightness change with subtle pulse animation - Pulse twice over 1.5 seconds with scale and glow effects - Scale slightly (1.02x) and increase shadow glow - More elegant visual feedback than color change - Easier to spot without being jarring The highlight now pulses twice when clicked from the sidebar, making it easy to see where you've jumped to.
This commit is contained in:
@@ -44,12 +44,12 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
|
||||
console.log('📍 Scrolling to highlight in article:', selectedHighlightId.slice(0, 8))
|
||||
markElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
|
||||
|
||||
// Temporarily enhance the highlight to show it's selected
|
||||
const originalBackground = (markElement as HTMLElement).style.background
|
||||
;(markElement as HTMLElement).style.background = 'rgba(255, 255, 0, 0.7)'
|
||||
// Add pulsing animation to show it's selected
|
||||
const htmlElement = markElement as HTMLElement
|
||||
htmlElement.classList.add('highlight-pulse')
|
||||
|
||||
setTimeout(() => {
|
||||
(markElement as HTMLElement).style.background = originalBackground
|
||||
htmlElement.classList.remove('highlight-pulse')
|
||||
}, 1500)
|
||||
} else {
|
||||
console.log('⚠️ Could not find mark element for highlight:', selectedHighlightId.slice(0, 8))
|
||||
|
||||
@@ -1374,6 +1374,29 @@ body {
|
||||
box-shadow: 0 0 12px rgba(255, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.content-highlight.highlight-pulse {
|
||||
animation: highlight-pulse-animation 1.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes highlight-pulse-animation {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 8px rgba(255, 255, 0, 0.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
25% {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 0, 0.6);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 8px rgba(255, 255, 0, 0.2);
|
||||
transform: scale(1);
|
||||
}
|
||||
75% {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 0, 0.6);
|
||||
transform: scale(1.02);
|
||||
}
|
||||
}
|
||||
|
||||
.reader-html .content-highlight,
|
||||
.reader-markdown .content-highlight {
|
||||
color: inherit;
|
||||
|
||||
Reference in New Issue
Block a user