Skip to content

Commit a0fc057

Browse files
al3shan33al3shan33
authored
adding my animation to the project (#2894)
* adding my animation to the project * removed the picture
1 parent 4de5470 commit a0fc057

File tree

3 files changed

+130
-0
lines changed

3 files changed

+130
-0
lines changed

‎Art/al3shan33-animatedText/index.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Animated Text</title>
7+
<link href="./styles.css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="text_wrapper">
12+
<ul class="text_list">
13+
<li>
14+
<p>Website <span>Developer</span></p>
15+
</li>
16+
<li>
17+
<p>A <span>Multi-Disciplinary </span>Designer</p>
18+
</li>
19+
<li>
20+
<p>Database <span>Analyst</span></p>
21+
</li>
22+
</ul>
23+
</div>
24+
</div>
25+
</body>
26+
</html>

‎Art/al3shan33-animatedText/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Animated Text",
3+
"githubHandle": "al3shan33"
4+
}

‎Art/al3shan33-animatedText/styles.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Carrois+Gothic&family=Oswald:wght@300;400&family=Raleway:wght@300;400;500;700&display=swap");
2+
* {
3+
padding: 0;
4+
margin: 0;
5+
}
6+
body {
7+
font-size: 16px;
8+
font-weight: 400;
9+
color: #333;
10+
font-family: "Raleway", sans-serif;
11+
}
12+
.container {
13+
position: relative;
14+
width: 100dvw;
15+
height: 100dvh;
16+
background-color: #00000098;
17+
}
18+
.text_wrapper {
19+
position: fixed;
20+
width: 100vw;
21+
top: 47vh;
22+
overflow: hidden;
23+
}
24+
.text_list {
25+
list-style-type: none;
26+
position: relative;
27+
height: 60px;
28+
overflow: hidden;
29+
}
30+
.text_list li {
31+
position: absolute;
32+
top: 0;
33+
left: 0;
34+
opacity: 0;
35+
animation: slideFromBottom 9s linear infinite;
36+
animation-fill-mode: forwards;
37+
width: 100%;
38+
text-align: center;
39+
}
40+
41+
.text_list li:nth-child(1) {
42+
animation-delay: 0s;
43+
}
44+
.text_list li:nth-child(2) {
45+
animation-delay: 3s;
46+
}
47+
.text_list li:nth-child(3) {
48+
animation-delay: 6s;
49+
}
50+
.text_list p {
51+
color: #fff;
52+
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
53+
font-size: 36px;
54+
margin: 10px 0 0 10px;
55+
white-space: nowrap;
56+
width: 100%;
57+
text-align: center;
58+
margin: 0;
59+
}
60+
.text_list p span {
61+
color: #d72e22;
62+
font-weight: 500;
63+
}
64+
@keyframes slideFromBottom {
65+
0% {
66+
opacity: 0;
67+
transform: translateY(100%);
68+
}
69+
10% {
70+
opacity: 1;
71+
transform: translateY(0);
72+
}
73+
30% {
74+
opacity: 1;
75+
transform: translateY(0);
76+
}
77+
40% {
78+
opacity: 0;
79+
transform: translateY(-100%);
80+
}
81+
100% {
82+
opacity: 0;
83+
transform: translateY(-100%);
84+
}
85+
}
86+
@media screen and (max-width: 992px) {
87+
.text_wrapper {
88+
top: 20dvh;
89+
padding: 0;
90+
}
91+
.text_list p {
92+
font-size: 48px;
93+
}
94+
}
95+
96+
@media screen and (max-width: 767px) {
97+
.text_list p {
98+
font-size: 24px;
99+
}
100+
}

0 commit comments

Comments
 (0)