https://github.com/lana-20/form-input-wave
https://github.com/lana-20/form-input-wave
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lana-20/form-input-wave
- Owner: lana-20
- Created: 2021-07-18T16:34:19.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-07-18T16:40:40.000Z (about 4 years ago)
- Last Synced: 2025-05-29T21:39:32.613Z (4 months ago)
- Language: CSS
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
| [Form Input Wave](https://github.com/lana-20/50_Projects_in_50_Days/tree/main/FormInputWave) | [Live Demo]( https://lana-20.github.io/form-input-wave/) |
|----|----|
In this project, I built a simple login form with a wave effect on the labels.
When clicking on the input, the label waves up.
It's a cool little animation, when clicking in or out.
I wrapped a span around each one of the labels using JavaScript.
And I added a transition so that the label moves up when focusing on the input.
I also added a dynamic transition delay, so it gives it that wave effect.
So, each letter goes up or down at a different time.