I customized my navbar on a personal website, with my name appearing on the left side. I'm experimenting with creating a "wave effect" where hovering over each character triggers an animation. Any suggestions for improving this approach?
Current state of my navbar: https://i.sstatic.net/YZ2Sb.png Picture every letter lifting and descending as you hover across my name.
Snippet from React file:
<Navlink to="/" exact={true} className={styles['title-link']}>
<div className={styles.title}>
<span className={styles.animate1}>L</span>
<span className={styles.animate2}>e</span>
<span className={styles.animate3}>e</span>
<span> </span>
<span className={styles.animate4}>R</span>
<span className={styles.animate5}>e</span>
<span className={styles.animate6}>n</span>
<span> </span>
<span className={styles.animate7}>J</span>
<span className={styles.animate8}>i</span>
<span className={styles.animate9}>e</span>
</div>
</Navlink>
Snippet from SCSS file:
.title-link {
position: relative;
right: 275px;
text-decoration: none;
}
.title {
color: white;
font-family: 'Cedarville Cursive', cursive;
text-decoration: none;
font-size: 30px;
}
.title:hover {
span:first-child {
animation-delay: 0.11s;
}
span:nth-child(2) {
animation-delay: 0.22s;
}
span:nth-child(3) {
animation-delay: 0.33s;
}
span:nth-child(5) {
animation-delay: 0.44s;
}
span:nth-child(6) {
animation-delay: 0.55s;
}
span:nth-child(7) {
animation-delay: 0.66s;
}
span:nth-child(9) {
animation-delay: 0.77s;
}
span:nth-child(10) {
animation-delay: 0.88s;
}
span:nth-child(11) {
animation-delay: 0.99s;
}
}
.animate1, .animate2, .animate3, .animate4, .animate5, .animate6, .animate7, .animate8, .animate9{
animation-name: bounce;
animation-duration: 1s;
}
@keyframes bounce {
0% {
bottom: 0;
}
50% {
bottom: 5px;
}
100% {
bottom: 0;
}
}