Last active
May 21, 2024 00:35
-
-
Save AmmarYasserAllaithy/a249f19c9597f69826ba208300eadc8c to your computer and use it in GitHub Desktop.
Pure CSS3 Water Wave Text Animation Effects Using CSS Clip-path
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #000015; | |
| } | |
| h2 { | |
| position: absolute; | |
| top: 50%; | |
| transform: translate(calc(50vw - 50%), -55%); | |
| text-transform: uppercase; | |
| font-size: 9em; | |
| font-family: arial; | |
| } | |
| h2:nth-child(1) { | |
| color: transparent; | |
| text-shadow: 1px 1px 1px #fff1; | |
| } | |
| h2:nth-child(2) { | |
| color: yellow; | |
| animation: water 6s ease-in-out infinite; | |
| } | |
| @keyframes water { | |
| 0%, | |
| 100% { | |
| clip-path: polygon(100% 100%, 0% 100%, 0.00% 80.00%, 2.00% 79.65%, 4.00% 78.60%, 6.00% 76.89%, 8.00% 74.58%, 10.00% 71.76%, 12.00% 68.52%, 14.00% 64.97%, 16.00% 61.26%, 18.00% 57.49%, 20.00% 53.82%, 22.00% 50.36%, 24.00% 47.25%, 26.00% 44.59%, 28.00% 42.47%, 30.00% 40.98%, 32.00% 40.16%, 34.00% 40.04%, 36.00% 40.63%, 38.00% 41.90%, 40.00% 43.82%, 42.00% 46.31%, 44.00% 49.28%, 46.00% 52.64%, 48.00% 56.25%, 50.00% 60.00%, 52.00% 63.75%, 54.00% 67.36%, 56.00% 70.72%, 58.00% 73.69%, 60.00% 76.18%, 62.00% 78.10%, 64.00% 79.37%, 66.00% 79.96%, 68.00% 79.84%, 70.00% 79.02%, 72.00% 77.53%, 74.00% 75.41%, 76.00% 72.75%, 78.00% 69.64%, 80.00% 66.18%, 82.00% 62.51%, 84.00% 58.74%, 86.00% 55.03%, 88.00% 51.48%, 90.00% 48.24%, 92.00% 45.42%, 94.00% 43.11%, 96.00% 41.40%, 98.00% 40.35%, 100.00% 40.00%); | |
| } | |
| 50% { | |
| clip-path: polygon(100% 100%, 0% 100%, 0% 20.0%, 2% 20.3%, 4% 21.4%, 6% 23.1%, 8% 25.4%, 10% 28.2%, 12% 31.5%, 14% 35.0%, 16% 38.7%, 18% 42.5%, 20% 46.2%, 22% 49.6%, 24% 52.8%, 26% 55.4%, 28% 57.5%, 30% 59.0%, 32% 59.8%, 34% 60.0%, 36% 59.4%, 38% 58.1%, 40% 56.2%, 42% 53.7%, 44% 50.7%, 46% 47.4%, 48% 43.8%, 50% 40.0%, 52% 36.3%, 54% 32.6%, 56% 29.3%, 58% 26.3%, 60% 23.8%, 62% 21.9%, 64% 20.6%, 66% 20.0%, 68% 20.2%, 70% 21.0%, 72% 22.5%, 74% 24.6%, 76% 27.3%, 78% 30.4%, 80% 33.8%, 82% 37.5%, 84% 41.3%, 86% 45.0%, 88% 48.5%, 90% 51.8%, 92% 54.6%, 94% 56.9%, 96% 58.6%, 98% 59.6%, 100% 60.0%); | |
| } | |
| } | |
| footer { | |
| color: rgb(135, 206, 235, 0.35); | |
| position: absolute; | |
| bottom: 0; | |
| } | |
| footer a { | |
| text-decoration: none; | |
| color: rgb(135, 206, 235, 0.35); | |
| } | |
| footer a:hover { | |
| color: rgb(135, 206, 235); | |
| } | |
| @media screen and (max-width: 700px) { | |
| h2 { | |
| font-size: 5em; | |
| } | |
| } | |
| @media screen and (max-width: 600px) { | |
| h2 { | |
| font-size: 3em; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Water Wave Text Animation</title> | |
| <link rel="stylesheet" href="water.css"> | |
| </head> | |
| <body> | |
| <h2>water effect</h2> | |
| <h2>water effect</h2> | |
| <footer>Inspired from <a href="https://youtu.be/Tf6qm5JMUXQ" target="blank">this tutorial</a></footer> | |
| <!-- Use this script ONLY when you have one-way wave to flip it --> | |
| <!-- <script src="wave-flipper.js"></script> --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const flipWaveOnYAxis = waveCoords => | |
| waveCoords.replace(/%/g, '').split(/\s?,\s?/) | |
| .map(pt => { | |
| let [x, y] = pt.split(' ').map(n => parseFloat(n)) | |
| y = Math.abs(y - 100).toFixed(1) | |
| return [x, y] | |
| }) | |
| .map(([x, y]) => `${x}% ${y}%`) | |
| .join(', ') | |
| // From wave generator: https://wave.novoselski.net | |
| const waveCoords = "100% 100%, 0% 100% , 0.00% 80.00%, 2.00% 79.65%, 4.00% 78.60%, 6.00% 76.89%, 8.00% 74.58%, 10.00% 71.76%, 12.00% 68.52%, 14.00% 64.97%, 16.00% 61.26%, 18.00% 57.49%, 20.00% 53.82%, 22.00% 50.36%, 24.00% 47.25%, 26.00% 44.59%, 28.00% 42.47%, 30.00% 40.98%, 32.00% 40.16%, 34.00% 40.04%, 36.00% 40.63%, 38.00% 41.90%, 40.00% 43.82%, 42.00% 46.31%, 44.00% 49.28%, 46.00% 52.64%, 48.00% 56.25%, 50.00% 60.00%, 52.00% 63.75%, 54.00% 67.36%, 56.00% 70.72%, 58.00% 73.69%, 60.00% 76.18%, 62.00% 78.10%, 64.00% 79.37%, 66.00% 79.96%, 68.00% 79.84%, 70.00% 79.02%, 72.00% 77.53%, 74.00% 75.41%, 76.00% 72.75%, 78.00% 69.64%, 80.00% 66.18%, 82.00% 62.51%, 84.00% 58.74%, 86.00% 55.03%, 88.00% 51.48%, 90.00% 48.24%, 92.00% 45.42%, 94.00% 43.11%, 96.00% 41.40%, 98.00% 40.35%, 100.00% 40.00%" | |
| //! This line for debugging purpose | |
| //! when the wave coords adjusted, Copy them to css @keyframes rule | |
| document.querySelector('h2:nth-child(2)').style.clipPath = | |
| `polygon(${flipWaveOnYaxis(waveCoords)})` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment