Skip to content

Commit 3e1def5

Browse files
lenadgitlenadgit
committed
add a new project Animated headings
1 parent 6a6852d commit 3e1def5

File tree

5 files changed

+213
-0
lines changed

5 files changed

+213
-0
lines changed

‎animatedheadings/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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+
<div class="starwars-demo">
12+
<img src="star.svg" alt="Star" class="star">
13+
<img src="wars.svg" alt="Wars" class="wars">
14+
<h2 class="byline" id="byline">The Force Awakens</h2>
15+
</div>
16+
</header>
17+
<script type = "text/javascript" src = "script.js"></script>
18+
</body>
19+
</html>

‎animatedheadings/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var byline = document.getElementById('byline'); // Find the H2
2+
bylineText = byline.innerHTML; // Get the content of the H2
3+
bylineArr = bylineText.split(''); // Split content into array
4+
byline.innerHTML = ''; // Empty current content
5+
6+
var span; // Create variables to create elements
7+
var letter;
8+
9+
for(i=0;i<bylineArr.length;i++){ // Loop for every letter
10+
span = document.createElement("span"); // Create a <span> element
11+
letter = document.createTextNode(bylineArr[i]); // Create the letter
12+
if(bylineArr[i] == ' ') { // If the letter is a space...
13+
byline.appendChild(letter); // ...Add the space without a span
14+
} else {
15+
span.appendChild(letter); // Add the letter to the span
16+
byline.appendChild(span); // Add the span to the h2
17+
}
18+
}

‎animatedheadings/star.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎animatedheadings/style.css‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
/* Animation properties */
2+
.star {
3+
animation: star 10s ease-out infinite;
4+
}
5+
.wars {
6+
animation: wars 10s ease-out infinite;
7+
}
8+
.byline span {
9+
animation: spin-letters 10s linear infinite;
10+
}
11+
.byline {
12+
animation: move-byline 10s linear infinite;
13+
}
14+
15+
/* Keyframes */
16+
@keyframes star {
17+
0% {
18+
opacity: 0;
19+
transform: scale(1.5) translateY(-0.75em);
20+
}
21+
20% {
22+
opacity: 1;
23+
}
24+
89% {
25+
opacity: 1;
26+
transform: scale(1);
27+
}
28+
100% {
29+
opacity: 0;
30+
transform: translateZ(-1000em);
31+
}
32+
}
33+
34+
@keyframes wars {
35+
0% {
36+
opacity: 0;
37+
transform: scale(1.5) translateY(0.5em);
38+
}
39+
20% {
40+
opacity: 1;
41+
}
42+
90% {
43+
opacity: 1;
44+
transform: scale(1);
45+
}
46+
100% {
47+
opacity: 0;
48+
transform: translateZ(-1000em);
49+
}
50+
}
51+
52+
@keyframes spin-letters {
53+
0%, 10% {
54+
opacity: 0;
55+
transform: rotateY(90deg);
56+
}
57+
30% {
58+
opacity: 1;
59+
}
60+
70%, 86% {
61+
transform: rotateY(0);
62+
opacity: 1;
63+
}
64+
95%, 100% {
65+
opacity: 0;
66+
}
67+
}
68+
69+
@keyframes move-byline {
70+
0% {
71+
transform: translateZ(5em);
72+
}
73+
100% {
74+
transform: translateZ(0);
75+
}
76+
}
77+
78+
/* Make the 3D work on the container */
79+
.starwars-demo {
80+
perspective: 800px;
81+
transform-style: preserve3d;
82+
}
83+
84+
/* General styles and layout */
85+
body {
86+
background: #000;
87+
}
88+
89+
.starwars-demo {
90+
height: 17em;
91+
left: 50%;
92+
position: absolute;
93+
top: 53%;
94+
transform: translate(-50%, -50%);
95+
width: 34em;
96+
}
97+
98+
.byline span {
99+
display: inline-block;
100+
}
101+
102+
img {
103+
width: 100%;
104+
}
105+
106+
.star, .wars, .byline {
107+
position: absolute;
108+
}
109+
110+
.star {
111+
top: -0.75em;
112+
}
113+
114+
.wars {
115+
bottom: -0.5em;
116+
}
117+
118+
.byline {
119+
color: #fff;
120+
font-family: "ITC Serif Gothic", Lato;
121+
font-size: 2.25em;
122+
left: -2em;
123+
letter-spacing: 0.4em;
124+
right: -2em;
125+
text-align: center;
126+
text-transform: uppercase;
127+
top: 29%;
128+
}
129+
130+
/*** Media queries for adjusting to different screen sizes ***/
131+
132+
@media only screen and (max-width: 600px) {
133+
.starwars-demo {
134+
font-size: 10px;
135+
}
136+
}
137+
138+
@media only screen and (max-width: 480px) {
139+
.starwars-demo {
140+
font-size: 7px;
141+
}
142+
}

‎animatedheadings/wars.svg‎

Lines changed: 17 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)