How to create 'Slide-in gallery panels' with jQuery/CSS3? [closed]

Question

Normally I know how to start off, have a few tutorials or even experience, but at this point I don't even know how to call it. Perhaps just by telling me how to correctly define this could be a solution to my problem (-> based upon name, I can correctly search).

Let's give you this quick mockup I just made.

I'm looking for 1: how do you call this, but especially 2: How would I create such?

I would like to create panels, a few stacked above eachother and with the click of the 'next' button on each panel, you can move that panel to the left (or right (backwards)) to go the next tile. Let's say that each panel is a portfolio project (vertically stacked) and within each panel (portfolio project), you can slide horizontally next and back to explain a part of your project on each tile.

The layout of each tile consists of a tile with a full background image (background-size:cover) and half a width tile text box. Of course, the text for the box should be written with HTML, instead of 'burned' into the image, by use of Photoshop, for responsive causes.

I assume this can be created with CSS3 and jQuery. The only problem is: All my Google searches end up nothing or resulting in Off-canvas navigation menus, which I'm not looking for.

To answer this question, either: 1. Define how this is called/I can search for this at google 2. Link me to a good tutorial/plugin 3. Write out the code if it would be that simple.

Thanks a big bunch guys!

Answer 1

This is actually very simple using what is called the radio hack. You can do it with only html and CSS (CSS3 for smooth transitions), which is very appreciable as jquery represents a big chunk for your clients to download.

Basically this is how it goes (working demo here: http://codepen.io/anon/pen/jcgxI):

HTML

We use a radio set of inputs to determine which "tab" should appear. Radios are perfect here because when one is check, all other must be unchecked. For that reason, make sure the attribute NAME is the same for your entire set.

    <input type="radio" name="radio-set" id="radio-1" checked="checked"/>
    <input type="radio" name="radio-set" id="radio-2"/>
    <input type="radio" name="radio-set" id="radio-3"/>
    <input type="radio" name="radio-set" id="radio-4"/>

We then write our content wrapped within any tag really (the structure section > article seems fitting). The navigation, even though it could be done via clicking on the radio buttons themselves can also be done through clicking on labels that refer to any input through their attribute FOR set to the ID of the one they refer to.

<section>
    <article id="article-1">
        <h2>article 1</h2>
        <label for="radio-4"></label>
        <label for="radio-2"></label>
    </article>
    <article id="article-2">
        <h2>article 2</h2>
        <label for="radio-1"></label>
        <label for="radio-3"></label>
    </article>
    <article id="article-3">
        <h2>article 3</h2>
        <label for="radio-2"></label>
        <label for="radio-4"></label>
    </article>
    <article id="article-4">
        <h2>article 4</h2>
        <label for="radio-3"></label>
        <label for="radio-1"></label>
    </article>
</section>

CSS

Because we will navigate with easily stylized labels, we can just hide the inputs themselves.

input{ display:none; }

Position all articles next to one another.

article{
    position:absolute;
    width:100vw;
}
article:nth-of-type(1){ left: 0    }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }

I add "arrows" in the labels (just something to click on, in real design, i'd switch these characters to a font icon).

label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}

Finally, we use the css selector "~" that means "any sibling element after (and their children)". This way, we are saying "after the Nth input checked, the whole section slides to the corresponding position".

input[id$="-1"]:checked ~ section{ transform: translateX(0)     }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }

It is because we use this selector that it is important that our inputs be outside and before the sliding tag (here "section") so that they are siblings of the moving tag (or siblings of its parents).

And because we want to observe the section moving, we add a transition property:

section{ transition: all 1s; }

And if you wrap the whole HTML into another tag (to prevent the effect of selector "~" to propagate to other sections), you can use an identical HTML structure for other sliders without having to write any additional CSS!

A full blown tutorial with a beautiful working demo (for vertical version but don't worry, it's very similar to horizontal) is available here: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/

PS: in the CSS, don't forget to add all vendor prefixes for transition and transform. Always check w3schools.com (EDIT: never trust w3schools but do check somewhere else online!) to know which prefixes are needed. Example:

-webkit-transition: all 1s;
transition: all 1s;