Skip to content

Commit 487d0d0

Browse files
lenadgitlenadgit
committed
add a new project Animated Header
1 parent e1a1fb0 commit 487d0d0

File tree

5 files changed

+183
-0
lines changed

5 files changed

+183
-0
lines changed

‎animatedheader/bg.jpg‎

591 KB
Loading

‎animatedheader/downarrow.png‎

5.04 KB
Loading

‎animatedheader/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7+
<link href="style.css" rel="stylesheet">
8+
</head>
9+
<body>
10+
<header>
11+
<section class="header-content">
12+
<img src="rocky-dashed.svg" class="rocky-dashed animate-pop-in">
13+
<h1 class="header-title animate-pop-in">Your awesome landing page</h1>
14+
<h3 class="header-subtitle animate-pop-in">A useful start for your projects</h3>
15+
<p class="header-button animate-pop-in"><a href="http://lenadgit.github.io" class="button">Get started today</a></p>
16+
</section>
17+
<section class="header-down-arrow">
18+
<img src="downarrow.png" width="120">
19+
</section>
20+
</header>
21+
</body>
22+
</html>

‎animatedheader/rocky-dashed.svg‎

Lines changed: 14 additions & 0 deletions
Loading

‎animatedheader/style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
header {
2+
align-items: center;
3+
display: flex;
4+
font-size: 28px;
5+
height: 100vh;
6+
justify-content: center;
7+
overflow: hidden;
8+
position: relative;
9+
text-align: center;
10+
transform-style: preserve-3d;
11+
perspective: 100px;
12+
}
13+
14+
header:before {
15+
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
16+
url(bg.jpg) no-repeat bottom;
17+
background-size: cover;
18+
content: "";
19+
position: absolute;
20+
top: 0;
21+
right: 0;
22+
bottom: 0;
23+
left: 0;
24+
z-index: -1;
25+
}
26+
27+
header:after {
28+
animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
29+
background: #F9FCFF;
30+
content: "";
31+
height: 40rem;
32+
left: -5%;
33+
position: absolute;
34+
right: -5%;
35+
top: 90%;
36+
transform-origin: 0 0;
37+
z-index: 0;
38+
}
39+
40+
.header-title, .header-subtitle {
41+
color: #fff;
42+
}
43+
44+
.header-subtitle {
45+
text-transform: uppercase;
46+
margin-bottom: 5rem;
47+
}
48+
49+
.header-button {
50+
transform: translateZ(.1px);
51+
position: relative;
52+
z-index: 10;
53+
background-color: cornflowerblue;
54+
padding: 6px 0;
55+
border-radius: 5px;
56+
border: none;
57+
}
58+
59+
.header-button > a {
60+
text-decoration: none;
61+
color: #F9FCFF;
62+
}
63+
64+
.header-down-arrow {
65+
animation: pulse 2s 3s ease-out infinite;
66+
position: absolute;
67+
bottom: 0;
68+
left: 0;
69+
right: 0;
70+
text-align: center;
71+
z-index: 10;
72+
}
73+
74+
.header-down-arrow img {
75+
animation: fade-slide-up 1s 1s ease-out forwards;
76+
opacity: 0;
77+
}
78+
79+
.header-down-arrow img {
80+
animation: fade-slide-up 1s 1s ease-out forwards,
81+
pulse 2s 3s ease-out infinite;
82+
opacity: 0;
83+
}
84+
85+
@keyframes pop-in {
86+
0% {
87+
opacity: 0;
88+
transform: translateY(-4rem) scale(.8);
89+
}
90+
100% {
91+
opacity: 1;
92+
transform: none;
93+
}
94+
}
95+
96+
@keyframes rotate-up {
97+
100% {
98+
transform: rotateZ(-4deg);
99+
}
100+
}
101+
102+
@keyframes fade-slide-up {
103+
0% {
104+
opacity: 0;
105+
transform: translateY(4rem);
106+
}
107+
100% {
108+
opacity: 1;
109+
transform: none;
110+
}
111+
}
112+
113+
@keyframes pulse {
114+
0% {
115+
opacity: 1;
116+
transform: none;
117+
}
118+
50% {
119+
opacity: .8;
120+
transform: scale(.8);
121+
}
122+
100% {
123+
opacity: 1;
124+
transform: none;
125+
}
126+
}
127+
128+
.animate-pop-in {
129+
animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
130+
opacity: 0;
131+
}
132+
133+
.rocky-dashed {
134+
animation-delay: .6s;
135+
}
136+
137+
.header-title {
138+
animation-delay: .8s;
139+
}
140+
141+
.header-subtitle {
142+
animation-delay: 1.4s;
143+
}
144+
145+
.header-button {
146+
animation-delay: 1.6s;
147+
}

0 commit comments

Comments
 (0)