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

feat: wave greeting animation on chat button to attract clicks

Browse Source 
Emoji 👋 pops up 3 times with a waving motion (3s delay after page load),
then disappears. Hidden when chat is open.
This commit is contained in:
juanatsap
2026-04-09 11:35:21 +01:00
parent 21c33d2833
commit 84d69fa8db
2 changed files with 42 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/04-interactive/_chat.css
+41
View File
@@ -42,6 +42,47 @@
display: none;
}
/* Wave greeting — pops up 3 times then stays hidden */
.chat-wave {
position: absolute;
top: -8px;
right: -8px;
font-size: 0.85rem;
animation: chatWaveHello 6s ease-in-out 3s forwards;
opacity: 0;
pointer-events: none;
}
@keyframes chatWaveHello {
0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
5% { opacity: 1; transform: scale(1) rotate(0deg); }
8% { transform: scale(1) rotate(15deg); }
11% { transform: scale(1) rotate(-10deg); }
14% { transform: scale(1) rotate(15deg); }
17% { transform: scale(1) rotate(0deg); }
25% { opacity: 0; transform: scale(0.5); }
35% { opacity: 0; transform: scale(0.5) rotate(0deg); }
40% { opacity: 1; transform: scale(1) rotate(0deg); }
43% { transform: scale(1) rotate(15deg); }
46% { transform: scale(1) rotate(-10deg); }
49% { transform: scale(1) rotate(15deg); }
52% { transform: scale(1) rotate(0deg); }
60% { opacity: 0; transform: scale(0.5); }
70% { opacity: 0; transform: scale(0.5) rotate(0deg); }
75% { opacity: 1; transform: scale(1) rotate(0deg); }
78% { transform: scale(1) rotate(15deg); }
81% { transform: scale(1) rotate(-10deg); }
84% { transform: scale(1) rotate(15deg); }
87% { transform: scale(1) rotate(0deg); }
95% { opacity: 0; transform: scale(0.5); }
100% { opacity: 0; }
}
/* Hide wave when chat is open */
.chat-toggle-btn.mascot-active .chat-wave {
display: none;
}
.chat-toggle-btn.mascot-active {
opacity: 1;
background: var(--accent-green, #27ae60);