Skip to content

Instantly share code, notes, and snippets.

@AmmarYasserAllaithy
Last active May 21, 2024 00:35
Show Gist options
  • Save AmmarYasserAllaithy/a249f19c9597f69826ba208300eadc8c to your computer and use it in GitHub Desktop.
Save AmmarYasserAllaithy/a249f19c9597f69826ba208300eadc8c to your computer and use it in GitHub Desktop.
Pure CSS3 Water Wave Text Animation Effects Using CSS Clip-path
* {
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;
}
}
<!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>
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