Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidkpiano
davidkpiano committed May 11, 2022
1 parent a177ce2 commit a8c23e1
Show file tree
Hide file tree
Showing 5 changed files with 139 additions and 36 deletions.
12 changes: 12 additions & 0 deletions examples/dribbble/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dribbble Example</title>
</head>
<body>
<!-- https://dribbble.com/shots/18102352-Wealth-Illustrations -->
</body>
</html>
40 changes: 37 additions & 3 deletions examples/inflight/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.scss" />
</head>
<body>
Expand Down Expand Up @@ -78,6 +85,26 @@
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Documentary</div>
</li>
<li class="ui-movie" style="--i: 5">
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Some movie 2</div>
</li>
<li class="ui-movie" style="--i: 6">
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Another movie 2</div>
</li>
<li class="ui-movie" style="--i: 7">
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Some movie sequel 2</div>
</li>
<li class="ui-movie" style="--i: 8">
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Animated movie 2</div>
</li>
<li class="ui-movie" style="--i: 9">
<div class="ui-movie-cover"></div>
<div class="ui-movie-title">Documentary 2</div>
</li>
</ul>
</section>

Expand Down Expand Up @@ -127,9 +154,16 @@
</section>
</main>
<section class="ui-overlay" data-screen="about">
<figure class="ui-figure"></figure>
<figure class="ui-figure">
<img
src="https://images.unsplash.com/photo-1499063078284-f78f7d89616a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1364&q=80"
width="100%"
alt=""
srcset=""
/>
</figure>
<div class="ui-description">
<h2>Delta One</h2>
<h2>Frontend Airlines</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt,
consequuntur laboriosam excepturi tempore cumque dolorum minus esse
Expand All @@ -141,7 +175,7 @@ <h2>Delta One</h2>
</section>
<section class="ui-overlay" data-screen="welcome" id="welcome">
<div class="ui-logo">✈</div>
<div class="ui-title">Welcome to Frontend Airlines</div>
<h2 class="ui-title">Welcome to Frontend Airlines</h2>
<div class="ui-button" onclick="setState('home')">Get Started</div>
</section>
</div>
Expand Down
74 changes: 49 additions & 25 deletions examples/inflight/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ body {
justify-content: center;
align-items: center;
background-color: #111;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}

#app {
Expand Down Expand Up @@ -92,19 +94,30 @@ main {
flex-direction: column;
align-items: center;
justify-content: flex-end;
.ui-interest {
padding: 1rem 2rem;
background-color: #0003;
}
.ui-interest-details {
display: flex;
flex-direction: row;
gap: 1rem;
}
}

.ui-interest-title {
font-size: 2rem;
}
.ui-interest {
padding: 1rem 2rem;
background-color: #0003;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 50%;
// animation: slide-up 0.6s both;
}
.ui-interest-header {
border-bottom: 1px solid #fff6;
text-transform: uppercase;
}
.ui-interest-details {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1rem;
}

.ui-interest-title {
font-size: 2rem;
}

.ui-screen-header {
Expand All @@ -126,7 +139,7 @@ main {
grid-template-areas: 'header' 'movies';
grid-row-gap: 2rem;
opacity: 1;
transition: opacity 0.3s;
// transition: opacity 0.3s;

&:not([data-active]) {
opacity: 0;
Expand All @@ -140,6 +153,7 @@ main {
.ui-movies {
display: flex;
flex-direction: row;
// justify-content: flex-start;
gap: 2rem;
overflow-x: auto;

Expand All @@ -158,8 +172,9 @@ main {
aspect-ratio: 0.6;
height: 40vh;
flex-shrink: 0;
animation: shift-up 0.3s calc(var(--i) * 0.1s) backwards;
transition: opacity 0.3s;
// animation: shift-up 0.3s calc(var(--i) * 0.1s) backwards;
// transition: opacity 0.3s;
font-weight: 400;

&:first-child {
margin-left: 2rem;
Expand All @@ -180,7 +195,7 @@ main {
}

.ui-movie-cover {
background: linear-gradient(to bottom right, #0d98bb, #1accfa);
background: linear-gradient(to bottom right, #9c27b0, #1accfa);
}

.ui-nav-items {
Expand Down Expand Up @@ -220,6 +235,7 @@ main {
flex-direction: row;
align-items: center;
padding: 0 1rem;
font-weight: 400;
}

.ui-dropdown-title {
Expand All @@ -242,13 +258,17 @@ main {
left: 0;
width: 100%;
height: 100%;
transition: all 0.3s;
// transition: all 0.3s;
display: block;

.ui-figure {
background-color: #fff;
}

.ui-description {
padding-right: 2rem;
}

&:not([data-active]) {
transform: translateY(100%);
}
Expand All @@ -275,7 +295,7 @@ main {
align-items: center;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
// transition: all 0.3s;

&:hover {
background-color: var(--color-secondary-light);
Expand Down Expand Up @@ -325,7 +345,7 @@ main {
grid-template-areas: 'header' 'music';
grid-row-gap: 2rem;
opacity: 1;
transition: opacity 0.3s;
// transition: opacity 0.3s;

&:not([data-active]) {
opacity: 0;
Expand Down Expand Up @@ -362,7 +382,7 @@ main {
width: 20vw;
flex-shrink: 0;
background-color: var(--color-bg-dark);
animation: shift-up 0.3s calc(var(--i) * 0.1s) both;
// animation: shift-up 0.3s calc(var(--i) * 0.1s) both;

&:first-child {
margin-left: 2rem;
Expand All @@ -374,15 +394,17 @@ main {

.ui-album-title {
padding: 2rem;
font-weight: 400;

> small {
font-weight: 300;
display: block;
opacity: 0.8;
}
}

.ui-album-cover {
background: linear-gradient(to bottom right, #0d98bb, #1accfa);
background: linear-gradient(to bottom right, #ffc107, #e91e63);
aspect-ratio: 1;
}

Expand All @@ -398,14 +420,16 @@ main {
gap: 1rem;

.ui-logo {
font-size: 3rem;
animation: welcome-logo 2s ease-in-out both;
font-size: 5rem;
// animation: welcome-logo 2s ease-in-out both;
line-height: 1;
}
.ui-title {
animation: welcome-title 2s ease-in-out both;
margin: 0;
// animation: welcome-title 2s ease-in-out both;
}
.ui-button {
animation: welcome-button 2s 0.1s ease-in-out both;
// animation: welcome-button 2s 0.1s ease-in-out both;
}
}

Expand Down
26 changes: 18 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,28 @@
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontend Masters CSS Animations Workshop</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.scss" />
</head>
<body>
<div id="app">
<small>Frontend Masters</small>
<h1>CSS Animation Workshop</h1>
<a href="/00-fundamentals/">Fundamentals</a>
<a href="/01-transitions/">Transitions</a>
<a href="/02-keyframes/">Keyframe Animations</a>
<a href="/03-choreography/">Choreography</a>
<a href="/04-states/">States</a>
<a href="/05-layout/">Layout Animations</a>
<a href="/06-reactive/">Reactive Animations</a>
<a href="/examples/inflight/">Inflight Example</a>
<ul>
<li><a href="/00-fundamentals/">Fundamentals</a></li>
<li><a href="/01-transitions/">Transitions</a></li>
<li><a href="/02-keyframes/">Keyframe Animations</a></li>
<li><a href="/03-choreography/">Choreography</a></li>
<li><a href="/04-states/">States</a></li>
<li><a href="/05-layout/">Layout Animations</a></li>
<li><a href="/06-reactive/">Reactive Animations</a></li>
<li><a href="/examples/inflight/">Inflight Example</a></li>
</ul>
</div>
</body>
</html>
23 changes: 23 additions & 0 deletions style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
@import './styles/base.scss';

body {
font-family: 'Open Sans', sans-serif;
padding: 5vmin;
}

a {
color: blue;
}

h1 {
margin: 0;
}

small {
text-transform: uppercase;
font-weight: bold;
}

ul {
margin: 1rem 0;
}

0 comments on commit a8c23e1

Please sign in to comment.