Skip to content

Commit daa48f4

Browse files
Shreekant-04Shreekant-04
committed
Auto text effect added
1 parent 457d252 commit daa48f4

File tree

4 files changed

+236
-0
lines changed

4 files changed

+236
-0
lines changed

‎README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,5 +93,10 @@
9393
<td><a href="clock">Clock And Stopwatch</a></td>
9494
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/clock/">Link</a></td>
9595
</tr>
96+
<tr>
97+
<td>17</td>
98+
<td><a href="autoTextEffect">auto Text Effect</a></td>
99+
<td><a href="https://glistening-cajeta-a6b4ef.netlify.app/autoTextEffect/">Link</a></td>
100+
</tr>
96101
</tbody>
97102
</table>

‎autoTextEffect/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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>Auto Text Effect</title>
7+
<link rel="stylesheet" href="style.css" />
8+
<link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
9+
</head>
10+
<body>
11+
<section class="transition1">
12+
<div class="text1">Shreekant</div>
13+
</section>
14+
<section class="transition2">
15+
<p class="text2">Annimation</p>
16+
</section>
17+
<section class="transition3">
18+
Hello
19+
<ul class="text3">
20+
<li>Slide 1</li>
21+
<li>Slide 2</li>
22+
<li>Slide 3</li>
23+
<li>Slide 4</li>
24+
<li>Slide 5</li>
25+
</ul>
26+
</section>
27+
<section class="hover-effect">
28+
<div class="effect">ANIMATION</div>
29+
</section>
30+
</body>
31+
</html>

‎autoTextEffect/style.css

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-size: calc(10px + 2vw);
5+
6+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif, serif;
7+
overflow: hidden;
8+
9+
}
10+
body {
11+
height: 100vh;
12+
width: 100vw;
13+
display: flex;
14+
justify-content: flex-start;
15+
align-items: center;
16+
flex-direction: column;
17+
background-color: black;
18+
color: #fff;
19+
20+
21+
}
22+
.transition1 {
23+
border: 2px solid black;
24+
height: 12vmin;
25+
width: max-content;
26+
display: flex;
27+
align-items: center;
28+
justify-content: flex-start;
29+
margin-left: 20px;
30+
margin-top: 20px;
31+
}
32+
.text1 {
33+
border: 2px solid black;
34+
border-right: 2px solid orange;
35+
width: 2px;
36+
overflow: hidden;
37+
animation: effect 5s steps(9) infinite forwards, blink 0.5s linear infinite;
38+
}
39+
@keyframes blink {
40+
from,
41+
to {
42+
border-right: 1px solid transparent;
43+
}
44+
50% {
45+
border-right: 1px solid orange;
46+
}
47+
}
48+
@keyframes effect {
49+
from,
50+
to {
51+
width: 0;
52+
}
53+
50% {
54+
width: 100%;
55+
}
56+
}
57+
58+
.transition2 {
59+
border: 2px solid black;
60+
height: 10vmin;
61+
width: 35vmin;
62+
margin: 10px;
63+
position: relative;
64+
}
65+
.text2 {
66+
position: absolute;
67+
transform: translate(-150px, -40px);
68+
animation: trans 4s ease-in infinite;
69+
}
70+
71+
@keyframes trans {
72+
0% {
73+
transform: translate(-150px, -20px);
74+
opacity: 0;
75+
}
76+
40% {
77+
transform: translate(0px, 0px);
78+
opacity: 1;
79+
}
80+
80% {
81+
transform: translate(0px, 0px);
82+
}
83+
100% {
84+
transform: translate(-200px, 0px);
85+
}
86+
}
87+
88+
.transition3 {
89+
border: 2px solid black;
90+
height: min-content;
91+
width: 40vmin;
92+
display: flex;
93+
padding: 10px;
94+
justify-content: space-evenly;
95+
position: relative;
96+
}
97+
.text3 {
98+
border: 2px solid black;
99+
list-style: none;
100+
height: 6vmin;
101+
width: max-content;
102+
}
103+
.text3 li {
104+
animation: dtrans 20s ease infinite forwards;
105+
}
106+
.text3 li:first-child {
107+
transition-delay: 2s;
108+
}
109+
110+
@keyframes dtrans {
111+
0% {
112+
animation-play-state: paused;
113+
}
114+
2% {
115+
transform: translate3d(0, 0, 0);
116+
}
117+
7.14% {
118+
transform: translate3d(0px, -45px, 0px);
119+
}
120+
14.28% {
121+
animation-play-state: paused;
122+
}
123+
21.42% {
124+
transform: translate3d(0px, -90px, 0px);
125+
}
126+
28.56% {
127+
animation-play-state: paused;
128+
}
129+
35.7% {
130+
transform: translate3d(0px, -135px, 0px);
131+
}
132+
42.84% {
133+
animation-play-state: paused;
134+
}
135+
49.98% {
136+
transform: translate3d(0px, -180px, 0px);
137+
}
138+
57.12% {
139+
animation-play-state: paused;
140+
}
141+
64.26% {
142+
transform: translate3d(0px, -135px, 0px);
143+
}
144+
71.4% {
145+
animation-play-state: paused;
146+
}
147+
78.54% {
148+
transform: translate3d(0px, -90px, 0px);
149+
}
150+
85.68% {
151+
animation-play-state: paused;
152+
}
153+
92.82% {
154+
transform: translate3d(0px, -45px, 0px);
155+
}
156+
100% {
157+
transform: translate3d(0, 0, 0);
158+
}
159+
}
160+
161+
.hover-effect {
162+
border: 2px solid black;
163+
margin-top: 10px;
164+
height: 10vh;
165+
width: 60vmin;
166+
background-clip: text;
167+
padding: 10px;
168+
display: flex;
169+
justify-content: center;
170+
align-items: center;
171+
}
172+
.effect {
173+
font-size: calc(10px + 3vw);
174+
padding: 12px 48px;
175+
color: #ffffff;
176+
background: linear-gradient(to right, #4d4d4d 0, white 10%, #4d4d4d 20%);
177+
background-position: 0;
178+
background-clip: text;
179+
-webkit-text-fill-color: transparent;
180+
animation: shine 3s infinite linear forwards;
181+
font-weight: 600;
182+
}
183+
@keyframes shine {
184+
0% {
185+
background-position: 0;
186+
}
187+
60% {
188+
background-position: 200px;
189+
}
190+
100% {
191+
background-position: 280px;
192+
}
193+
}

‎index.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,13 @@
132132
<a href="/clock/index.html" target="_blank">Link</a>
133133
</td>
134134
</tr>
135+
<tr>
136+
<td>17</td>
137+
<td>Auto Text Effect</td>
138+
<td>
139+
<a href="/autoTextEffect/index.html" target="_blank">Link</a>
140+
</td>
141+
</tr>
135142
</tbody>
136143
</table>
137144
</body>

0 commit comments

Comments
 (0)