Comment créer des ‘panneaux de galerie coulissante’ avec jQuery / CSS3?

Normalement, je sais commencer, avoir quelques tutoriels ou même de l’expérience, mais à ce stade, je ne sais même pas comment l’appeler. Peut-être juste en me disant comment définir correctement ceci pourrait être une solution à mon problème (-> basé sur le nom, je peux rechercher correctement).

Nous allons vous donner cette rapide maquette que je viens de faire. maquette

Je cherche 1: comment appelez-vous cela, mais surtout 2: comment pourrais-je créer un tel?

J’aimerais créer des panneaux, quelques-uns superposés les uns au-dessus des autres. En cliquant sur le bouton “Suivant” de chaque panneau, vous pouvez déplacer ce panneau vers la gauche (ou vers la droite (arrière)) pour passer à la mosaïque suivante. Supposons que chaque panneau est un projet de portefeuille (empilé verticalement) et qu’au sein de chaque panneau (projet de portefeuille), vous pouvez faire glisser horizontalement les côtés suivant et arrière pour expliquer une partie de votre projet sur chaque mosaïque.

La disposition de chaque mosaïque consiste en une mosaïque avec une image d’ background-size:cover complète ( background-size:cover ) et une zone de texte de mosaïque d’une demi-largeur. Bien entendu, le texte de la boîte doit être écrit en HTML, au lieu de “gravé” dans l’image, à l’aide de Photoshop, pour des raisons de réponse.

Je suppose que cela peut être créé avec CSS3 et jQuery. Le seul problème est le suivant: toutes mes recherches sur Google n’aboutissent à rien ni à des menus de navigation hors-canvas, ce que je ne cherche pas.

Pour répondre à cette question, vous pouvez soit: 1. Définir comment cela s’appelle / Je peux le rechercher sur Google 2. Liez-moi à un bon tutoriel / plug-in 3. Ecrivez le code si ce serait aussi simple.

Merci beaucoup les gars!

Ceci est en fait très simple en utilisant ce qu’on appelle le hack radio . Vous pouvez le faire uniquement avec html et CSS (CSS3 pour des transitions en douceur), ce qui est très appréciable car jQuery représente un gros morceau à télécharger pour vos clients.

En gros, voici comment cela se passe (démo de travail ici: http://codepen.io/anon/pen/jcgxI ):

HTML

Nous utilisons un ensemble d’entrées radio pour déterminer quel “onglet” doit apparaître. Les radios sont parfaites ici parce que quand on est vérifié, tous les autres doivent être décochés. Pour cette raison, assurez-vous que l’atsortingbut NAME est le même pour tout votre ensemble.

      

Nous écrivons ensuite notre contenu enveloppé dans n’importe quelle balise (la section structure> article semble appropriée). La navigation, même s’il est possible de cliquer sur les boutons radio eux-mêmes, peut également se faire en cliquant sur les étiquettes qui font référence à une entrée quelconque via leur atsortingbut FOR défini avec l’ID de celui auquel elles se rapportent.

 

article 1

article 2

article 3

article 4

CSS

Comme nous allons naviguer avec des étiquettes facilement stylisées, nous pouvons simplement masquer les entrées elles-mêmes.

 input{ display:none; } 

Placez tous les articles les uns à côté des autres.

 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% } 

J’ajoute des “flèches” dans les libellés (il suffit de cliquer sur un bouton pour créer un caractère, je changerais alors ces caractères en une icône de police).

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

Enfin, nous utilisons le sélecteur css “~” qui signifie “tout élément frère après (et leurs enfants)”. De cette façon, nous disons “après la Nième entrée cochée, toute la section glisse vers la position correspondante”.

 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%) } 

C’est parce que nous utilisons ce sélecteur qu’il est important que nos entrées soient à l’extérieur et avant l’étiquette glissante (ici, “section”), de sorte qu’elles soient des frères et sœurs de l’étiquette en mouvement (ou des frères et sœurs de ses parents).

Et parce que nous voulons observer le déplacement de la section, nous ajoutons une propriété de transition:

 section{ transition: all 1s; } 

Et si vous intégrez tout le code HTML dans une autre balise (pour empêcher l’effet du sélecteur “~” de se propager à d’autres sections), vous pouvez utiliser une structure HTML identique pour les autres curseurs sans avoir à écrire de code CSS supplémentaire!

Un tutoriel complet avec une belle démo de travail (pour la version verticale mais ne vous inquiétez pas, il ressemble beaucoup à l’horizontal) est disponible ici: http://tympanus.net/codrops/2012/06/12/css-only-responsive -layout-with-smooth-transitions /

PS: dans le CSS, n’oubliez pas d’append tous les préfixes de fournisseur pour la transition et la transformation. Vérifiez toujours w3schools.com ( EDIT: ne faites jamais confiance à w3schools mais vérifiez ailleurs en ligne! ) Pour savoir quels préfixes sont nécessaires. Exemple:

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