Page Link
Introduction
Using flexbox, create a set of vertical panels with custom animation that increase the panel sizes and has text that floats down from the top/up from the bottom when clicked on, and reverts when clicked again.
Starter
Starter file is an HTML with 5 divs with three p tags of text. The first and third p tag, respectively, per div is designed to float in and out of the panel.
Process
First part uses CSS Flexbox to restructure the divs from being stacked vertically, to being set side-to-side. Moreover, flexbox allows for them to easily divvy up the space between them using the “flex” CSS property.
“Transform” is used to increase the relative size of each panel by setting it to “scale”, and a transition is used to animate the transform.
As for the floating text- essentially each first and last p tag are each assigned a “default” style and an “active” style (for four total styles). These define the start state and end state of these text, and then CSS the transform and transitions are used to “float” them in and out.
JavaScript is used to set eventListeners on each of the panels: one set of eventListeners listens for clicks, and fires a function which simply toggles the classes on and off each panel.
The text is designed to float in and out, and so fire off a second set of eventListeners that work the same as in day 1: these listen for “transitionend”- in this case it has to listen specifically for a “flex”-type event (the specific event differs across browsers). These then fire a function which toggles the text to float in/out.
Things Learned
- Practiced flexbox
- Learned CSS “flex” property
- Practiced transform/transition
- Practiced eventListeners
- Learned some new CSS element selectors “>” and “*”