Learning Web Development, Day 3 — Build Simple Web Animations
So I have a cold, which means that I'm tired and achy and crabby and keep coughing, and today is all about web animations, which I mostly hate, because they make me dizzy, so I don't expect today to be a good day, learning-wise.
But I might be surprised. We'll see.
There are only four videos, which helps.
00A — Course Overview
So this is going to teach me how to do simple scroll-up animation. Even with the HTML5 and CSS3 badges on the slides, I am wary. I don't like animation on sites. I don't like things flying in. I don't like things scrolling around. I need things to stay put.
But, at the same time, I can see where this would have some value. I mean, more value than my unnatural love of glitter text generators, which do move.
Mmm. Love that glitter.
Also, I discovered that when I put HTML into the code blocks in Markdown, it works a treat on the site, but then in the RSS feed version, it tries to apply the HTML, which is annoying as all hell.
But that could just be my RSS reader. If you're using RSS to read these posts, let me know what you see and then I'll figure out something else to do for them.
01 — Build HTML for Web Animation
Too many <div>s again. Divs within divs within divs within divs, stop it, this is annoying as hell. And the Camel Case for CSS IDs! Why are you making your life so difficult?
<div>
Learn
<div id="movingContent">
<div>
<div id="webDevelopment">
Web Development
</div>
</div>
<div>
<div id="pythonProgramming">
Python Programming
</div>
</div>
<div>
<div id="appDevelopment">
App Development
</div>
</div>
</div>
</div>
I'm going to follow along with the tutorial, but instead of all these divs, I'm going to try to put this into something semantic and see if it works. And I'm putting it into JSitor to test it out as I go.
<main>
<h1>Learn</h1>
<ul>
<li>Web Development</li>
<li>Python Programming</li>
<li>App Development</li>
</ul>
</main>
Okay, let's see if eight lines of code work just as well as 20.
02 — Build Simple CSS Styling for Text
I know I'll have to do a bit more CSS than the instructor does, since they're using Divs and I'm using an H1 and a UL, but it's stuff like 'list-style-type: none', so that isn't too painful.
Their CSS:
body {
font-size: 20px;
font-family: sans-serif;
margin: 0px;
text-align: center;
}
#container {
position: fixed;
width: 100%;
bottom: 50%;
}
#movingContent {
height: 50px;
overflow: hidden;
}
My CSS:
body {
font-size: 20px;
font-family: sans-serif;
margin: 0px;
text-align: center;
}
main {
position: fixed;
width: 100%;
bottom: 50%;
}
ul {
height: 20px;
overflow: hidden;
list-style-type: none;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 20px;
font-weight: normal;
margin: 0px;
}
Yeah, I had to strip the H1 and the UL to have the same look as their Divs, but that's not too annoying, I don't think. They increased the font-size to match the height they were putting onto their movingContent div, but I think I'm going to keep it small because I am very tired and large text on a white background is painful on my eyes.
03 — Build CSS Animation of Moving Text
Now we're getting into `@keyframes'. Which I'm mostly used to seeing when I used to make GIFs in Adobe Photoshop or when I briefly played with Macromedia Flash. But CSS keyframes are pretty groovy.
Their CSS:
#movingContent > div > div {
display: inline-block;
height: 50px;
margin: 10px;
}
#movingContent div:first-child {
animation: show 10s linear infinite;
}
@keyframes show {
0% { margin-top: -270px; }
10% { margin-top: -180px; }
25% { margin-top: -180px; }
40% { margin-top: -90px; }
50% { margin-top: -90px; }
75% { margin-top: 0px; }
80% { margin-top: 0px; }
100% { margin-top: -270px; }
}
I'm kinda annoyed that they started with allllll these keyframes, where you had to do a lot of math to work out where each bit was, when all you needed is something like:
@keyframes show {
0% {margin-top: 0px; }
90% { margin-top: -300px; }
100% { margin-top: 0px; }
}
Then again, most of this animation is going to require some math. And I am too sick for this.
So, instead, here's the CSS I'm using to make it do the same thing.
#moving li:first-child {
animation: show 10s linear infinite;
}
@keyframes show {
0% {margin-top: 0px; }
90% { margin-top: -70px; }
100% { margin-top: 0px; }
}
It took me a few tries to figure out where the first-child had to be applied, and I cut out a lot of the extra stuff, but, basically, instead of this:
<style>
body {
font-size: 20px;
font-family: sans-serif;
margin: 0px;
text-align: center;
}
#container {
position: fixed;
width: 100%;
bottom: 50%;
}
#movingContent {
height: 50px;
overflow: hidden;
}
#movingContent > div > div {
display: inline-block;
height: 50px;
margin: 10px;
}
#movingContent div:first-child {
animation: show 10s linear infinite;
}
@keyframes show {
0% { margin-top: -270px; }
10% { margin-top: -180px; }
25% { margin-top: -180px; }
40% { margin-top: -90px; }
50% { margin-top: -90px; }
75% { margin-top: 0px; }
80% { margin-top: 0px; }
100% { margin-top: -270px; }
}
</style>
<div>
Learn
<div id="movingContent">
<div>
<div id="webDevelopment">
Web Development
</div>
</div>
<div>
<div id="pythonProgramming">
Python Programming
</div>
</div>
<div>
<div id="appDevelopment">
App Development
</div>
</div>
</div>
</div>
I have this:
<style>
body {
font-size: 20px;
font-family: sans-serif;
margin: 0px;
text-align: center;
}
main {
position: fixed;
width: 100%;
bottom: 50%;
}
ul {
height: 20px;
overflow: hidden;
list-style-type: none;
margin: 0px;
padding: 0px;
}
h1 {
font-size: 20px;
font-weight: normal;
margin: 0px;
}
li:first-child {
animation: show 10s linear infinite;
}
@keyframes show {
0% {margin-top: 0px; }
90% { margin-top: -70px; }
100% { margin-top: 0px; }
}
</style>
<main>
<h1>Learn</h1>
<ul>
<li>Web Development</li>
<li>Python Programming</li>
<li>App Development</li>
</ul>
</main>
Which I like a lot better.
But those of you who actually do CSS animation, am I doing it right? Is this actually better or should I be div-ing it up with the best of them?
Day 3 — Results
divis annoying- Motion is annoying
- When you're applying
animationto some HTML, you apply it to thefirst-childof the element you want to move. - You can have
@keyframesbe whatever you want, at any percentage you want
I need to read more on animation and what I can have instead of linear. But I can now do this:
<style>
body {
background: #000;
color: #fff44f;
font-size: 30px;
font-family: sans-serif;
margin: 0px;
text-align: justify;
}
main {
position: fixed;
width: 90%;
margin: 10px;
}
h1 {
font-size: 50px;
margin: 0px;
}
h1:first-child {
animation: show 30s linear 1;
}
@keyframes show {
0% {margin-top: 0px; }
100% { margin-top: -800px; }
}
</style>
<main>
<h1>Episode IV: A New Hope</h1>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base,
have won their first victory against the evil Galactic Empire.</p>
<p>During the battle, Rebel spies managed to steal secret plans to the Empire's
ultimate weapon, the DEATH STAR, an armored space station with enough power to
destroy an entire planet.</p>
<p>Pursued by the Empire's sinister agents, Princess Leia races home aboard her
starship, custodian of the stolen plans that can save her people and restore freedom
to the galaxy....</p>
</main>
Nice.
Today's Sticker
A Live Slug Reaction I got as part of the Club Shifty Sticker Club. This is a The Rise of Skywalker reference, so it goes very well with my ability to do a yellow up-scrolling crawl now.