How to Create an Animated Content Section Box Opening with CSS

How to Create an Animated Content Section Box Opening with CSS

In this article I’m going to show you how you can use CSS transition features to present new content sections in response to user navigation interactions.

1. HTML Document

The first step is to define the HTML document. This consists of the HTML document container, which stores the head and body sections. The head section is used to reference the external CSS stylesheet to load, while the body section will be used to store the visible content created in steps 2 and 3.

<!DOCTYPE html> <html>
<head>
<title>Box Open</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css” />
</head>
<body>
*** STEP 2 HERE </body>
</html>

2. HTML Navigation

The example requires the use of a navigation to call the content sections into view. The nav container will be used to select its child links from CSS in later steps. The href attribute of each link references a corresponding ‘id’ attribute of article containers created in step 3 – take note of how the # symbol defines a link to an on-page ID element.

<nav>
<a href=”#one”>One</a> <a href=”#two”>Two</a>
</nav>

3. Article Containers

The content sections that are to appear into view are contained inside article containers. Each article has a close button defined via the ‘data-button’ attribute, along with at least one section to store the article content. The sections are an important part to allow the content to be transitioned independently to the article container.

<article id=”one”>
<a href=”#” data-button=”close”>x</a> <section>
<h2>One</h2>
</section>
</article> <article id=”two”>
<a href=”#” data-button=”close”>x</a> <section>
<h2>Two</h2>
</section>
</article>

4. Article Styling

Create a new file called styles.css to define the visual presentation rules. The first rules will define how the article containers are to be presented. They will used fixed positioning to guarantee they are visible regardless of where the user has scrolled to. Overflow is also set to auto so that child content can be scrolled if required.

article{
display: block;
position: fixed;
background: #000;
color: #fff;
overflow: auto;
}

5. More Article Styling

Articles need a guarantee to display above all other content, therefore a z-index higher than other page elements. Transition is used to animate all future changes, while default settings for positioning (left/top) and size (width/height) are defined. The ‘transition-timing-function’ attribute allows the transition to progressively increase the speed of change.

article{
z-index: 9999;
left: 0;
top: 50vh;
width: 100vw;
height: 0;
padding: 0;
transition: all 1s;
transition-timing-function: ease-in;
}

6. Targeted Article Changes

Changes are required to be applied to the article container when it is targeted via the user clicking on one of the links referencing the article’s ID attribute. The top positioning is set to the top, with the height set to the full size of the browser window. These will appear animated due to the transition rule applied in step 5.

article:target {
top: 0;
height: 100vh;
}

7. Article Close Button

Each article has a close button identified by the ‘data-button’ attribute with a value of ‘close’. These elements need specific styling for colours, size and positioning. Fixed positioning is set to guarantee that the button is visible regardless of any scrolling, with its position set to top right for consistency. White text and red background colours are also set.

article [data-button=”close”]{
position: fixed;
display: block;
background: #c00;
color: #fff;
padding: 1em;
width: 1em;
height: 1em;
top: 0;
right: 0;
text-decoration: none;
}

8. Hover Selector

As a good user experience principle, there is a need to indicate to the user that the close buttons can be interacted with. This is applied through the ‘hover’ selector, which will reverse the background and text colours when the user hovers over the element using the mouse pointer.

article [data-button=”close”]:hover{
background: #fff;
color: #c00;
}

9. Article Sections

Sections inside the articles are to appear invisible through zero opacity by default. This allows for the effect of the content appearing after the article has opened – so a one-second delay being applied to the transition. The target selector is applied to the article to define that the child sections are to change their opacity to 1, fully visible, when the article is navigated to through its ID attribute.

article > section{
display: block;
opacity: 0;
transition: opacity 1s;
transition-delay: 1s;
}
article:target > section{
opacity: 1;
}

Less is more…

Hiding content selected through navigation is good for UX design. It avoids users being overwhelmed by too much content.

Leave a Reply

Your email address will not be published. Required fields are marked *