102 lines
4.9 KiB
HTML
102 lines
4.9 KiB
HTML
[!]
|
|
[=title "Week 13 Homework"]
|
|
[=content-]
|
|
<p>
|
|
This week we're focusing entirely on <code>hover</code> and <code>transition</code>.
|
|
Keep the lecture notes for both handy (<a href="week-13-hover.html">here</a> and <a href="week-13-transition.html">here</a>).
|
|
</p>
|
|
<p>
|
|
Note that parts 3 and 4 are fairly difficult. Get started early!
|
|
</p>
|
|
<h1>Part 1: Ain't It Click?</h1>
|
|
<p>
|
|
Let's start by using a <code>span</code> to replicate
|
|
the behavior of the <code>a</code> tag. <span class="goal">uses a span</span>.
|
|
The end result shouldn't actually be clickable, but should have the same color and hover effect
|
|
<span class="goal">has a hover effect that changes its color</span>.
|
|
</p>
|
|
<p>
|
|
It's okay if you can't figure out exactly which colors an <code>a</code> tag switches between;
|
|
<code>white</code> and <code>yellow</code> (the style I used for this website) is fine.
|
|
Don't forget the underline! <span class="goal">visually identical to a link</span>
|
|
(Hint: you may use any technique you wish as long as it's applied to a <code>span</code>,
|
|
but this exercise is considerably easier if you have <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-decoration">text-decoration</a>).
|
|
</p>
|
|
<p>
|
|
Make sure to use the <code>:hover</code> pseudo-class.
|
|
</p>
|
|
<h1>Part 2: Animate It!</h1>
|
|
<p>
|
|
Duplicate your replicated link (do NOT change the original!) and
|
|
add <i>any</i> transition to it <span class="goal">a working transition</span> - it should be smooth and noticeable,
|
|
and you should transition at least two properties <span class="goal">multiple properties animated</span>
|
|
(e.g. both <code>color</code> and <code>background-color</code>). I recommend using
|
|
this as an opportunity to play around with various transitions.
|
|
</p>
|
|
<h1>Part 3: Functions?</h1>
|
|
<p>
|
|
<i>This has a bit of math - if you have trouble with that part, please send me an email.</i>
|
|
</p>
|
|
<p>
|
|
Transitions support a few different types of <i>timing function</i> - these are curves that
|
|
describe how "fast" it moves between states. For instance, the default curve
|
|
is an <i>S-shape</i> - it starts out slow, then speeds up around halfway through, then slows down again
|
|
for the end. This timing function is called <code>ease</code>. It produces a very nice smooth animation that feels natural.
|
|
</p>
|
|
<p>
|
|
But there are others! So, for this part, <b>practice researching on your own</b>
|
|
to figure out,
|
|
</p>
|
|
<ul>
|
|
<li>What curves exist and how they behave</li>
|
|
<li>How to actually use them</li>
|
|
</ul>
|
|
<p>
|
|
A good starting point is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition">MDN</a>;
|
|
you may also find some luck with <a href="https://www.w3schools.com/css/css3_transitions.asp">W3Schools</a>.
|
|
</p>
|
|
<p>
|
|
Find at least three timing functions (besides the default <code>ease</code>) and
|
|
demonstrate each of them with <code>background-color</code> and <code>:hover</code>. Make sure to clearly label them.
|
|
(Read the lecture notes if this is confusing). <span class="goal">At least 3 timing functions, demonstrated properly</span>
|
|
</p>
|
|
<h1>Part 4: Bouncy Gallery</h1>
|
|
<p>
|
|
Use <code>:hover</code>, <code>transition</code>, and CSS Grid (make sure to read both Grid lecture notes if you're struggling with grid)
|
|
to make a "bouncy gallery" of transitioned elements <span class="goal">hover, transition, and grid in use</span>.
|
|
There should be 3 columns and at least 2 rows <span class="goal">3 columns, minimum 6 cells</span>. Explain each effect with text in its cell.
|
|
</p>
|
|
<p>
|
|
The requirements for this one are loose - you don't have to include any specific combination of effects.
|
|
However, it would be <i>passable</i> for each cell to contain just a span with an animated background-color
|
|
using different transition <i>durations</i> and <i>timing functions</i>.
|
|
<span class="goal">distinct transitions for each demonstration</span>.
|
|
</p>
|
|
<p>
|
|
The goal of this is for you to experiment with new CSS properties. I highly recommend being creative with this one
|
|
- you might hit on a design you really like for links or buttons on your website!
|
|
</p>
|
|
<h1>Extra Credit</h1>
|
|
<p>
|
|
For a whopping 15 points of extra credit, teach yourself about <code>box-shadow</code>
|
|
and do a transitioned box-shadow on at least one of your Bouncy Gallery elements.
|
|
</p>
|
|
<p>
|
|
Box-shadow is incredibly fun and worth learning - it adds a 3d "pop" to otherwise flat pages.
|
|
</p>
|
|
<h1>Self-Study</h1>
|
|
<p>
|
|
As if this homework didn't have enough research! To get ahead on the animations material,
|
|
read about <a href="https://www.w3schools.com/css/css3_animations.asp">actual animations on W3Schools</a>
|
|
- CSS exposes a <i>much</i> more powerful way to do animations; it's a lot more complicated than
|
|
<code>transition</code>, but allows for some incredibly intricate behavior.
|
|
</p>
|
|
<h1>Submission</h1>
|
|
<p>
|
|
Don't forget to email me before the due date - April 10th.
|
|
I need to get the email so I know when you finished and can view
|
|
your website's git history from that date.
|
|
</p>
|
|
[/]
|
|
[#template.html]
|