Skip to content

Commit 5d5682a

Browse files
seungyeubseungyeub
committed
feat: Add new text Animation Effect "Stretch Motion Text"
1 parent c3e3a73 commit 5d5682a

File tree

6 files changed

+112
-0
lines changed

6 files changed

+112
-0
lines changed

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,10 @@ There will be continuous updates in the future. Thank you!
375375
<img src="static/image/html5.png" width="20px">
376376
<img src="static/image/css3.png" width="20px">
377377

378+
- [Stretch Motion Text](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/stretch-motion-text)
379+
<img src="static/image/html5.png" width="20px">
380+
<img src="static/image/css3.png" width="20px">
381+
378382
- [Text Filling with Water](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/text-filling-with-water)
379383
<img src="static/image/html5.png" width="20px">
380384
<img src="static/image/css3.png" width="20px">

‎gifs/text/stretch-motion-text.gif

343 KB
Loading

‎text/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@
1010

1111
- [Shining Text Animation Effects](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/shining-text-animation-effects)
1212

13+
- [Stretch Motion Text](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/stretch-motion-text)
14+
1315
- [Text Filling with Water](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/text-filling-with-water)
1416

1517
- [Text to Smoke Animation](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/text-to-smoke-animation)
@@ -25,6 +27,7 @@
2527
[<img src="../gifs/text/loading-text-animation-effects.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/loading-text-animation-effects)
2628
[<img src="../gifs/text/responsive-text-size.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/responsive-text-size)
2729
[<img src="../gifs/text/shining-text-animation-effects.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/shining-text-animation-effects)
30+
[<img src="../gifs/text/wave-motion-text.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/stretch-motion-text)
2831
[<img src="../gifs/text/text-filling-with-water.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/text-filling-with-water)
2932
[<img src="../gifs/text/text-to-smoke-animation.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/text-to-smoke-animation)
3033
[<img src="../gifs/text/wave-motion-text.gif" width="100px" height="100px">](https://github.com/Dev-JeromeBaek/awesome-web-styling/tree/master/text/wave-motion-text)

‎text/stretch-motion-text/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
## Stretch Motion Text
2+
3+
![Edit [Web] Stretch Motion Text](../../gifs/text/stretch-motion-text.gif)

‎text/stretch-motion-text/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Stretch Motion Text</title>
9+
<link rel="shortcut icon" href="../../favicon.ico">
10+
<link rel="stylesheet" type="text/css" href="style.css">
11+
</head>
12+
13+
<body>
14+
<div>
15+
<span>WROK</span>
16+
<span>WROK</span>
17+
<span>WROK</span>
18+
<span>WROK</span>
19+
<span>WROK</span>
20+
</div>
21+
</body>
22+
23+
</html>

‎text/stretch-motion-text/style.css

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Passion+One:wght@700&display=swap");
2+
3+
body {
4+
margin: 0;
5+
padding: 0;
6+
background: #ecd4d4;
7+
font-family: "Passion One", cursive;
8+
}
9+
10+
div {
11+
margin: 0;
12+
padding: 0;
13+
width: 100%;
14+
height: 100vh;
15+
position: relative;
16+
}
17+
18+
div span {
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
transform: translate(-50%, -50%);
23+
color: #fff;
24+
font-size: 7em;
25+
-webkit-text-stroke: 1px #000;
26+
animation: animate 2.5s cubic-bezier(0.39, 0.24, 0.49, 1) infinite;
27+
/* transform-origin: bottom left; */
28+
}
29+
30+
@keyframes animate {
31+
0% {
32+
transform: translate(-50%, -50%) scaleY(1);
33+
}
34+
35+
20% {
36+
transform: translate(-50%, -50%) scaleY(1);
37+
}
38+
39+
50% {
40+
transform: translate(-50%, -50%) scaleY(3);
41+
}
42+
43+
80% {
44+
transform: translate(-50%, -50%) scaleY(1);
45+
}
46+
47+
100% {
48+
transform: translate(-50%, -50%) scaleY(1);
49+
}
50+
}
51+
52+
div span:nth-child(1) {
53+
animation-delay: 0.1s;
54+
left: 48%;
55+
z-index: 5;
56+
}
57+
div span:nth-child(2) {
58+
animation-delay: 0.3s;
59+
color: #ffc400;
60+
left: 49%;
61+
z-index: 4;
62+
}
63+
div span:nth-child(3) {
64+
animation-delay: 0.5s;
65+
color: #ff9100;
66+
z-index: 3;
67+
}
68+
div span:nth-child(4) {
69+
animation-delay: 0.7s;
70+
color: #fd7373;
71+
left: 51%;
72+
z-index: 2;
73+
}
74+
div span:nth-child(5) {
75+
animation-delay: 0.9s;
76+
color: #ff3e3e;
77+
left: 52%;
78+
z-index: 1;
79+
}

0 commit comments

Comments
 (0)