Flying cards.

Welcome

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

Intro Container

Differences

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.

Usage

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.

Single Slide

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.

DIY Instructions

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

  1. An ID to be able to create a corresponding headline item on the left
  2. 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.

For example:

<div id="usage" icon="build">
	<h2>Usage</h2>
	<div class="slider">
		[...]
	</div>
</div>

Intro slides

These are built by getting "h3" headings from inside the subcontainers. So no big hustle as well.

Now the content itself...

...is put into subdividers, which after the JavaScript magic turn to these individual subslides you see here.

Tadaaa!

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>
...
...
...

See?

Info

Alexander Fürst - fuerst.one Webdesign & E-Commerce

Alexander Fürst
Grombühlstraße 37
97080 Würzburg

Tel.: +49(0)152 552 448 40
E-Mail: alexander@fuerst.one

Impressum
Datenschutz