txeo/cv-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: smooth analog zoom with solid blue hover

Browse Source 
UX improvements for more responsive, fluid zoom experience:

1. Smooth analog response:
   - Removed 50ms debounce - applies zoom immediately
   - Changed step from 5 to 1 for ultra-smooth increments
   - Updated transition: 0.08s linear (was 0.3s cubic-bezier)
   - Real-time transform updates for analog feel vs digital jumps

2. Solid blue hover (no gradient):
   - Changed from multi-color gradient to solid #3b82f6 blue
   - Maintains gray when not hovering
   - Clean, simple visual feedback matching reference design

3. Visual enhancement:
   - Keyboard shortcuts now use step 10 for faster adjustments
   - Instant response eliminates "digital" feeling
   - Smooth, continuous zoom matching analog controls

Technical changes:
- HTML: step="1" instead of step="5"
- CSS: solid color hover, 0.08s linear transition
- JS: removed debounce timeout, immediate applyZoom()
This commit is contained in:
juanatsap
2025-11-12 11:46:19 +00:00
parent b6aeb697fe
commit c1506a4d1e
3 changed files with 11 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/main.css
+5 -15
View File
@@ -552,7 +552,7 @@ iconify-icon {
/* Zoom transform properties */
transform-origin: top center; /* Scale from top-center to maintain header alignment */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth material-design easing */
transition: transform 0.08s linear; /* Immediate, smooth analog response */
will-change: transform; /* Hint browser to optimize for transforms */
}
@@ -3521,15 +3521,10 @@ html {
transition: all 0.3s ease;
}
/* Colorful gradient on hover */
/* Solid blue color on hover - no gradient */
.zoom-control:hover .zoom-slider,
.zoom-slider:hover {
background: linear-gradient(to right,
#ef4444 0%, /* red */
#f97316 25%, /* orange */
#3b82f6 50%, /* blue */
#22c55e 100% /* green */
);
background: #3b82f6; /* solid blue */
}
.zoom-slider:focus {
@@ -3591,15 +3586,10 @@ html {
transition: all 0.3s ease;
}
/* Firefox Range Track - Colorful on hover */
/* Firefox Range Track - Solid blue on hover */
.zoom-control:hover .zoom-slider::-moz-range-track,
.zoom-slider:hover::-moz-range-track {
background: linear-gradient(to right,
#ef4444 0%, /* red */
#f97316 25%, /* orange */
#3b82f6 50%, /* blue */
#22c55e 100% /* green */
);
background: #3b82f6; /* solid blue */
}
/* Reset Button - Circular with dynamic value inside */