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

fix: wave fully opaque (outside button), animation plays twice with pause

Browse Source
This commit is contained in:
juanatsap
2026-04-09 11:41:18 +01:00
parent 023c445a88
commit ddb2b843a4
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+33 -20
View File
@@ -43,36 +43,49 @@
} }
/* Wave greeting — pops up 3 times then stays hidden */ /* Wave greeting — pops up 3 times then stays hidden */
/* Wave greeting — independent of button opacity */
.chat-wave { .chat-wave {
position: absolute; position: fixed;
top: -8px; bottom: calc(6rem + 38px);
left: -8px; right: calc(2rem + 38px);
font-size: 1rem; z-index: 1001;
animation: chatWaveHello 3s ease-in-out 2s forwards; font-size: 1.1rem;
animation: chatWaveHello 5s ease-in-out 2s forwards;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
@keyframes chatWaveHello { @keyframes chatWaveHello {
/* Fade in */ /* === First wave === */
0% { opacity: 0; transform: rotate(0deg); } 0% { opacity: 0; transform: rotate(0deg); }
8% { opacity: 1; transform: rotate(0deg); } 4% { opacity: 1; transform: rotate(0deg); }
/* Wave: clockwise → counter-clockwise, 3 swings */ 7% { transform: rotate(20deg); }
14% { transform: rotate(20deg); } 10% { transform: rotate(-15deg); }
20% { transform: rotate(-15deg); } 13% { transform: rotate(18deg); }
26% { transform: rotate(18deg); } 16% { transform: rotate(-12deg); }
32% { transform: rotate(-12deg); } 19% { transform: rotate(15deg); }
38% { transform: rotate(15deg); } 22% { transform: rotate(-8deg); }
44% { transform: rotate(-8deg); } 25% { transform: rotate(0deg); }
50% { transform: rotate(0deg); } 30% { opacity: 1; }
/* Hold still briefly */ 35% { opacity: 0; }
65% { opacity: 1; transform: rotate(0deg); } /* === Pause === */
/* Fade out */ 45% { opacity: 0; transform: rotate(0deg); }
100% { opacity: 0; transform: rotate(0deg); } /* === Second wave === */
49% { opacity: 1; transform: rotate(0deg); }
52% { transform: rotate(20deg); }
55% { transform: rotate(-15deg); }
58% { transform: rotate(18deg); }
61% { transform: rotate(-12deg); }
64% { transform: rotate(15deg); }
67% { transform: rotate(-8deg); }
70% { transform: rotate(0deg); }
78% { opacity: 1; }
90% { opacity: 0; }
100% { opacity: 0; }
} }
/* Hide wave when chat is open */ /* Hide wave when chat is open */
.chat-toggle-btn.mascot-active .chat-wave { .chat-wave.chat-wave-hidden {
display: none; display: none;
} }
templates/partials/widgets/chat-widget.html
+3 -1
View File
@@ -9,8 +9,8 @@
onclick="toggleChatPanel()"> onclick="toggleChatPanel()">
<iconify-icon icon="mdi:robot-happy-outline" class="chat-icon-open"></iconify-icon> <iconify-icon icon="mdi:robot-happy-outline" class="chat-icon-open"></iconify-icon>
<iconify-icon icon="mdi:close" class="chat-icon-close"></iconify-icon> <iconify-icon icon="mdi:close" class="chat-icon-close"></iconify-icon>
<span class="chat-wave">👋</span>
</button> </button>
<span id="chat-wave" class="chat-wave no-print">👋</span>
<div id="chat-panel" class="chat-panel no-print"> <div id="chat-panel" class="chat-panel no-print">
<div class="chat-header"> <div class="chat-header">
@@ -126,8 +126,10 @@ function pollChatStatus() {
function toggleChatPanel() { function toggleChatPanel() {
var panel = document.getElementById('chat-panel'); var panel = document.getElementById('chat-panel');
var btn = document.getElementById('chat-toggle-btn'); var btn = document.getElementById('chat-toggle-btn');
var wave = document.getElementById('chat-wave');
panel.classList.toggle('chat-open'); panel.classList.toggle('chat-open');
btn.classList.toggle('mascot-active'); btn.classList.toggle('mascot-active');
if (wave) wave.classList.add('chat-wave-hidden');
if (panel.classList.contains('chat-open')) { if (panel.classList.contains('chat-open')) {
document.getElementById('chat-input').focus(); document.getElementById('chat-input').focus();
} }