Hey. My name is Alex and this an example project.
Multidimensional card stack interaction model, hand crafted supporting indicator animations, all in one file. Integrated keyboard navigation capabilities for maximum ease of use.
Try it out!subdirectory_arrow_left
This container has an intro slide. On the intro slide the headlines of the following subsections get listed.
The position of the intro slide is displayed by a hollow circle instead of a filled one.
Also pay attention to how the overall headline moves when you switch to the intro slide and away.
This could be very useful when a card has mixed content or just many subitems to keep an overview.
The non intro container however fits more when you have subsequent content or only a few items.
A single slide for important content
If there is information that has to be placed outstandingly, a single slide container can be used to put all focus on that content.
Interactivity is all built from content, not the other way round.
That in fact means the content structure consists of only a wrapper element in which every subcontainer is placed.
<section class="main"> <div id="welcome"> [...] </div> </section>
Containers have only 2 mandatory properties
- An ID to be able to create a corresponding headline item on the left
- A subcontainer with a "slider" CSS class
Additionally there is an attribute to set an icon on the headline item.
If you want the container to have an intro slide just set an "intro" attribute on the "slider" divider to true.
And everything you put outside the "slider" will be displayed permanently on that container.
<div id="usage" icon="build"> <h2>Usage</h2> <div class="slider"> [...] </div> </div>
These are built by getting "h3" headings from inside the subcontainers. So no big hustle as well.
Now the content itself...
BTW: The great thing is, you can put up to 7 headlines and approximately 10 inner items and everything adjusts itself and centers out, no matter how many items there are.
<div> <h3>[...]</h3> <p>[...]</p> [...] </div>