Web_Designer_Issue_262_2017

LightBox
Three Cents
Create animated responses
to navigation interactions
Use CSS transitions and target selector to present animation in response to user interactions
1. HTML document template
The first step is to initiate the project’s HTML document.
This contains the markup to define the general
document structure that holds the visible content inside
the body, along with the descriptive metadata and
resource links inside the head section. The HTML content
will be placed inside the body section in steps 2 and 3.
Animate Into View
*** STEP 2
2. Body content: navigation
The first step for building the example content is the
creation of the navigation links. These will be used to
trigger the presentation of diferent content sections. In
this case, the navigation links reference elements with
ID ‘p1’ and ‘p2’ that will be defined in step 3. The ability
to use the # symbol to link on page ID elements will
enable us to create interactivity with CSS without the
need for JavaScript.
3. Body content: articles
The page section contents are placed inside article
containers that have ID attributes referenced by the
links defined in step 2. Animated elements have a
‘data-animate’ attribute assigned to them, which will
be referenced by CSS in later steps to apply their
presentation and animation settings. The ability to
specify data attributes like this allows for elements
we want to animate to be given a unique name
reference to use for their animation.
Page 1
Text
item.
Page 2
Another
text item.
4. CSS initiation
With the HTML now complete, create a new file called
‘styles.css’ and initiate its content with CSS to define
the HTML document, content body and navigation
containers. The main HTML document and its body is
set to be fully visible with a black background and
white text. The navigation needs to remain visible while
visiting the diferent content sections, hence fixed
positioning is used.
body,html {
display: block;
width: 100%;
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0; }
nav{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background: #000; }
5. Articles & animated elements
The articles have a requirement for their animated
elements to be animated relative to their position, so they
use relative positioning. Child elements with the
‘data-animate’ attribute use absolute positioning, which
becomes relative to their parent article. These elements
become animated through the use of the transition rule
applied. They are also placed out of view of the screen by
default using the left attribute.
article{
position: relative;
height: 100vh;
width: 100vw;
padding-top: 1em;
overflow: auto; }
article [data-animate]{
position: absolute;
transition: left 1s, top 1s, right 1s,
bottom 1s;
left: -100vw;
}
6. Target page animation
The animated changes for article with ID ‘p1’ are defined
in this step using the target selector. Individual elements
are referenced using the ‘data-animate’ attribute, in which
unique properties are applied. Left, top, right
and bottom alterations appear animated due to the
previously applied. The ‘pictureItem’ element is to be
animated coming from the right instead of the left,
hence its default left attribute is unset and replaced
with a default right position.
#p1:target [data-animate=”textItem”]{
left: 10vw;
top: 20vh;
color: #fff; }
#p1 [data-animate=”pictureItem”]{
left: unset;
right: -100vw; }
#p1:target [data-animate=”pictureItem”]{
right: 50vw;
display: block;
width: 20vw;
height: 20vw;
background: blue; }
7. More target animations
The same approach to animating the ‘data-animate’
elements is used for the article section with ID of ‘p2’.
These elements have diferent sizes, colours and
positioning, which you could replace with your own
settings. You can add as many elements as you want to
the HTML and add their specific rules to the CSS.
#p2:target [data-animate=”textItem”]{
left: 20vw;
top: 40vh;
color: green; }
#p2 [data-animate=”pictureItem”]{
left: unset;
right: -100vw; }
#p2:target [data-animate=”pictureItem”]{
right: 20vw;
display: block;
width: 20vw;
height: 10vw;
background: red; }
Enhance usability
Consider how the use of animated responses to
navigation interactions can help improve the usability
or understandability of the content.
lightbox ____________________________________________________________________ 17