Skip to content

Commit dd408ea

Browse files
bennadelbennadel
committed
Add THIS IS US opening titles animation with CSS animation demo.
1 parent 0c18bcc commit dd408ea

2 files changed

Lines changed: 201 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [THIS IS US Opening Titles Animation Using CSS Animations](http://bennadel.github.io/JavaScript-Demos/demos/this-is-us-css-animation/)
1314
* [Sanity Check: Shared Style URLs And Emulated Encapsulation Attributes In Angular 6.1.10](http://bennadel.github.io/JavaScript-Demos/demos/shared-style-urls-angular6/)
1415
* [Emulated Encapsulation Host And Content Attributes Are Calculated Once Per Application Life-Cycle In Angular 6.1.10](http://bennadel.github.io/JavaScript-Demos/demos/emulated-encapsulation-attributes-angular6/)
1516
* [Playing With Recursive Components In Angular 6.1.10](http://bennadel.github.io/JavaScript-Demos/demos/recursive-components-angular6/)

‎demos/this-is-us-css-animation/index.htm‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>
6+
THIS IS US Opening Titles Animation Using CSS Animations
7+
</title>
8+
</head>
9+
<body>
10+
11+
<h1>
12+
THIS IS US Opening Titles Animation Using CSS Animations
13+
</h1>
14+
15+
<div class="titles">
16+
<div class="titles__anchor">
17+
<span class="titles__this">
18+
This
19+
</span>
20+
<span class="titles__is">
21+
Is
22+
</span>
23+
<span class="titles__us">
24+
Us
25+
</span>
26+
</div>
27+
</div>
28+
29+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
30+
<style type="text/css">
31+
32+
.titles {
33+
background-color: #000000 ;
34+
bottom: 0px ;
35+
color: #f3ca3e ;
36+
font-family: "Open Sans", verdana, arial, sans-serif ;
37+
font-size: 40px ;
38+
font-weight: 300 ;
39+
left: 0px ;
40+
line-height: 44px ;
41+
position: fixed ;
42+
right: 0px ;
43+
text-transform: uppercase ;
44+
top: 0px ;
45+
}
46+
47+
/**
48+
* At first, I tried to position each of the titles using percentages. However,
49+
* since the browser has flexible values in both the Vertical and Horizontal
50+
* dimensions, it was easier to create a positioned anchor from which the titles
51+
* could be positioned with explicit pixels. This won't scale with the browser;
52+
* but, it makes the animation easier to put together.
53+
*/
54+
.titles__anchor {
55+
left: 65% ;
56+
margin-top: -22px ;
57+
position: absolute ;
58+
top: 50% ;
59+
}
60+
61+
@keyframes titles-this-in {
62+
0% {
63+
left: -200px ;
64+
opacity: 0.0 ;
65+
top: -180px ;
66+
}
67+
20% {
68+
opacity: 1.0 ;
69+
}
70+
49% {
71+
left: -200px ;
72+
top: 0px ;
73+
}
74+
51% {
75+
left: -200px ;
76+
top: 0px ;
77+
}
78+
100% {
79+
left: 0px ;
80+
top: 0px ;
81+
}
82+
}
83+
84+
@keyframes titles-is-in {
85+
0% {
86+
left: -100px ;
87+
opacity: 0.0 ;
88+
top: 50px ;
89+
}
90+
20% {
91+
opacity: 1.0 ;
92+
}
93+
24% {
94+
left: -30px ;
95+
top: 50px ;
96+
}
97+
26% {
98+
left: -30px ;
99+
top: 50px ;
100+
}
101+
49% {
102+
left: -30px ;
103+
top: 0px ;
104+
}
105+
51% {
106+
left: -30px ;
107+
top: 0px ;
108+
}
109+
100% {
110+
left: 112px ;
111+
top: 0px ;
112+
}
113+
}
114+
115+
@keyframes titles-us-in {
116+
0% {
117+
left: 175px ;
118+
opacity: 0.0 ;
119+
top: 130px ;
120+
}
121+
55% {
122+
opacity: 0.0 ;
123+
top: 130px ;
124+
}
125+
80% {
126+
opacity: 1.0 ;
127+
}
128+
100% {
129+
left: 170px ;
130+
top: 0px ;
131+
}
132+
}
133+
134+
.titles__this,
135+
.titles__is,
136+
.titles__us {
137+
animation-duration: 5s ;
138+
animation-fill-mode: both ;
139+
animation-timing-function: ease-in-out ;
140+
position: absolute ;
141+
}
142+
143+
.titles__this {
144+
animation-name: titles-this-in ;
145+
}
146+
147+
.titles__is {
148+
animation-name: titles-is-in ;
149+
}
150+
151+
.titles__us {
152+
animation-name: titles-us-in ;
153+
}
154+
155+
</style>
156+
157+
<script type="text/javascript">
158+
(function() {
159+
160+
var titles = document.querySelector( ".titles" );
161+
var titlesAnchor = titles.querySelector( ".titles__anchor" );
162+
163+
setupAnimationHandlers();
164+
165+
// ----------------------------------------------------------------------- //
166+
// ----------------------------------------------------------------------- //
167+
168+
function setupAnimationHandlers() {
169+
170+
// In order to get the animation to repeat without a "infinite" iteration
171+
// count, we have to remove the nodes from the DOM and then re-inject
172+
// them. The animation will naturally restart when the elements are
173+
// re-added to the DOM.
174+
// --
175+
// NOTE: I opted not to look at the "animationend" event since it would
176+
// have been triggered by all three animating titles. Using a timer
177+
// seemed like the more straightforward, cross-browser approach.
178+
setTimeout( removeTitles, 7000 );
179+
setTimeout( addTitles, 8000 );
180+
setTimeout( setupAnimationHandlers, 8000 );
181+
182+
}
183+
184+
function removeTitles() {
185+
186+
titles.removeChild( titlesAnchor );
187+
188+
}
189+
190+
function addTitles() {
191+
192+
titles.appendChild( titlesAnchor );
193+
194+
}
195+
196+
})();
197+
</script>
198+
199+
</body>
200+
</html>

0 commit comments

Comments
 (0)