Skip to content

Commit 93911e2

Browse files
aayush105aayush105
authored
Merge pull request #887 from HayatZarine/animation
added glide to reveal
2 parents bd2671f + be43fbf commit 93911e2

3 files changed

Lines changed: 154 additions & 0 deletions

File tree

‎Glide-to-reveal/index.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<style>
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
min-height: 100vh;
8+
display: grid;
9+
place-items: center;
10+
font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue", Helvetica, Arial, sans-serif, system-ui;
11+
background: hsl(0 0% 0%);
12+
gap: 2rem;
13+
}
14+
15+
body::before {
16+
--line: hsl(0 0% 95% / 0.25);
17+
content: "";
18+
height: 100vh;
19+
width: 100vw;
20+
position: fixed;
21+
background:
22+
linear-gradient(90deg, var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin,
23+
linear-gradient(var(--line) 1px, transparent 1px 10vmin) 0 -5vmin / 10vmin 10vmin;
24+
mask: linear-gradient(-15deg, transparent 30%, white);
25+
top: 0;
26+
z-index: -1;
27+
}
28+
29+
section {
30+
display: grid;
31+
gap: 4rem;
32+
align-items: center;
33+
justify-content: center;
34+
}
35+
36+
section p {
37+
margin: 0;
38+
font-size: 2.25rem;
39+
color: hsl(0 0% 40%);
40+
text-align: center;
41+
background: linear-gradient(hsl(0 0% 80%), hsl(0 0% 50%));
42+
color: transparent;
43+
background-clip: text;
44+
}
45+
46+
.code {
47+
font-size: 3rem;
48+
display: flex;
49+
flex-wrap: nowrap;
50+
color: hsl(0 0% 100%);
51+
border-radius: 1rem;
52+
background: hsl(0 0% 6%);
53+
justify-content: center;
54+
box-shadow: 0 1px hsl(0 0% 100% / 0.25) inset;
55+
}
56+
57+
.code:hover {
58+
cursor: grab;
59+
}
60+
61+
.digit {
62+
display: flex;
63+
height: 100%;
64+
padding: 5.5rem 1rem;
65+
}
66+
67+
.digit:focus-visible {
68+
outline-color: hsl(0 0% 50% / 0.25);
69+
outline-offset: 1rem;
70+
}
71+
72+
.digit span {
73+
scale: calc(var(--active, 0) + 0.5);
74+
filter: blur(calc((1 - var(--active, 0)) * 1rem));
75+
transition: scale calc(((1 - var(--active, 0)) + 0.2) * 1s), filter calc(((1 - var(--active, 0)) + 0.2) * 1s);
76+
}
77+
78+
ul {
79+
padding: 0;
80+
margin: 0;
81+
}
82+
83+
.digit:first-of-type {
84+
padding-left: 5rem;
85+
}
86+
.digit:last-of-type {
87+
padding-right: 5rem;
88+
}
89+
90+
:root {
91+
--lerp-0: 1; /* === sin(90deg) */
92+
--lerp-1: calc(sin(50deg));
93+
--lerp-2: calc(sin(45deg));
94+
--lerp-3: calc(sin(35deg));
95+
--lerp-4: calc(sin(25deg));
96+
--lerp-5: calc(sin(15deg));
97+
}
98+
99+
.digit:is(:hover, :focus-visible) {
100+
--active: var(--lerp-0);
101+
}
102+
.digit:is(:hover, :focus-visible) + .digit,
103+
.digit:has(+ .digit:is(:hover, :focus-visible)) {
104+
--active: var(--lerp-1);
105+
}
106+
.digit:is(:hover, :focus-visible) + .digit + .digit,
107+
.digit:has(+ .digit + .digit:is(:hover, :focus-visible)) {
108+
--active: var(--lerp-2);
109+
}
110+
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit,
111+
.digit:has(+ .digit + .digit + .digit:is(:hover, :focus-visible)) {
112+
--active: var(--lerp-3);
113+
}
114+
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit,
115+
.digit:has(+ .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
116+
--active: var(--lerp-4);
117+
}
118+
.digit:is(:hover, :focus-visible) + .digit + .digit + .digit + .digit + .digit,
119+
.digit:has(+ .digit + .digit + .digit + .digit + .digit:is(:hover, :focus-visible)) {
120+
--active: var(--lerp-5);
121+
}
122+
</style>
123+
<section>
124+
<p>Glide To Reveal Secret Code</p>
125+
<ul class="code">
126+
<li tabindex="0" class="digit">
127+
<span>0</span>
128+
</li>
129+
<li tabindex="0" class="digit">
130+
<span>3</span>
131+
</li>
132+
<li tabindex="0" class="digit">
133+
<span>4</span>
134+
</li>
135+
<li tabindex="0" class="digit">
136+
<span>8</span>
137+
</li>
138+
<li tabindex="0" class="digit">
139+
<span>7</span>
140+
</li>
141+
<li tabindex="0" class="digit">
142+
<span>2</span>
143+
</li>
144+
</ul>
145+
</section>

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ Please be aware that the demos may exhibit significant accessibility issues, suc
129129
- [Progress Bar On Scroll](#ProgressOnScroll)
130130
- [Password Strength Checker](#password-strength-checker)
131131
- [Pricing Table](#pricing-table)
132+
- [Glide to Reveal](#glide-to-reveal)
132133
- **Contribution**
133134
- [Contributors](#contributors)
134135
- [Contributing](#contributing)
@@ -1304,6 +1305,14 @@ An interactive resume built entirely using **HTML and CSS** — featuring animat
13041305

13051306
---
13061307

1308+
## <a id="Glide to Reveal"></a>Glide to Reveal
1309+
1310+
[<img src="images/glidetoreveal.png" height="230" title="Glide-to-reveal">](Glide-to-reveal/index.html)
1311+
1312+
**[⬆ back to top](#quick-links)**
1313+
1314+
---
1315+
13071316
## <a id="rotating-text"></a>Rotating Text
13081317

13091318
[<img src="images/rotating_text.mp4" height="230" title="Demo">]()

‎images/glidetoreveal.png‎

18.9 KB
Loading

0 commit comments

Comments
 (0)