Cette grille est une manière amusante et agréable de montrer plusieurs éléments d’information dans la même quantité d’espace, en faisant glisser chaque section de la grille en cliquant ou en survolant, et en affichant du contenu supplémentaire.
Dans le processus de création, nous examinerons le balisage nécessaire, le style et la réactivité de la grille, ainsi que la mise en œuvre d’une police Web d’icône. Nous étudierons également les jQuery nécessaires ainsi que les différentes options disponibles.
Voilà à quoi ça ressemblera une fois que nous aurons fini:
Donc, comme vous pouvez le voir, assez simple! Il y a un div avec un identifiant de 'services' et avec un nom de classe float clair. Alors à l'intérieur de ce sont six différents
C'est aussi simple que nous le ferons avec le balisage, cela signifie que s'il n'y a pas de JavaScript ni de CSS, il ne brisera pas réellement notre contenu, il sera toujours visible (à part les icônes, mais comme ils sont vides) nous ne les verrons pas de toute façon). Donc, ceci est notre sauvegarde, pas de styles et pas de contenu JavaScript:
Maintenant que nous sommes sûrs que le contenu est sûr. Nous pouvons passer à notre CSS pour le rendre agréable, mais surtout, le configurer pour la fonctionnalité jQuery.
Divisons le CSS en trois parties; l'essentiel qui est nécessaire pour faire fonctionner notre jQuery, le code de la police d'icône, puis les styles finaux pour le rendre plus joli. Alors voici la première section:
#services .service {width: 33%;float: left;padding: 0.5em;min-height: 200px;overflow: hidden;position: relative;border: 1px solid #eee;}@media screen and (max-width: 600px) {#services .service {width: 50%;}}@media screen and (max-width: 320px) {#services .service {width: 100%;}}#services .service .service-icon, #services .service .service-description {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;padding: 50px 0;color: #222;}#services .service .service-description {left: 100%;background: #249EC2;color: white;padding: 50px;}#services .service .service-description:hover { cursor: pointer; }
Alors passons par ce qui se passe ici. Nous ciblons d'abord les enveloppes de boîtes individuelles (.service) et les organisons dans la forme de la grille, en leur donnant une largeur de fluide, une hauteur minimale et en les laissant flottantes (c'est pourquoi le wrapper global a une correction claire). Ensuite, il est important de masquer leur débordement (sinon nous verrions le contenu supplémentaire à tout moment) et leur position relative. Nous avons également rendu cette grille plus conviviale en utilisant quelques requêtes multimédia pour différentes tailles d'écran et en augmentant la largeur de chaque cellule. Ce code signifie que notre grille commencera à une conception à 3 colonnes à la taille maximale du bureau, et passera par une colonne à deux colonnes, puis finalement à une colonne tout en réduisant la taille de l'écran.
Maintenant que les boîtes extérieures sont en place, nous ciblons les sections internes, l'icône de service et la description de service. Nous faisons ces positions absolues (d'où la hauteur minimale dans le style précédent) et les positionnons toutes les deux en haut à gauche (nous changerons la position de la description dans un instant). Nous les rendons alors larges et hauts à 100% afin qu'ils remplissent leur élément parent, et le reste est pour effet visuel uniquement. Enfin, nous ciblons purement la description div et faisons en sorte que la valeur de gauche soit de 100%. Cela pousse la boîte entière vers la droite et hors de vue à cause du débordement caché sur le div .service. Cette valeur de position à gauche est ce que nous allons cibler et animer avec jQuery, et c'est pourquoi il est important de la définir maintenant.
Passons à l'étape suivante, ici nous allons utiliser @ font-face pour obtenir notre police d'icônes et définir les noms de classes que nous avons déjà utilisés dans le HTML pour qu'ils apparaissent comme les bonnes icônes. La première étape consiste à trouver une ressource en ligne capable de créer une police d’icônes adaptée à vos besoins, il y en a pas mal, mais pour cet exemple, j’ai décidé d’utiliser Fontastic . Sur le site sur lequel vous choisissez d’abord les icônes que vous voulez utiliser, cela change évidemment pour le projet sur lequel vous travaillez. Mais alors vous pouvez changer certaines informations, comme les noms de classe des icônes et le nom de la police comme ceci:
Donc, comme vous pouvez le voir, j'ai choisi les noms de classes que nous avons utilisés dans le HTML afin qu'ils correspondent sans aucun problème. Le service vous donne ensuite le téléchargement d'un dossier 'fonts' et d'un code. Placez le dossier 'fonts' dans votre dossier css (ou n'importe où). Ensuite, prenez le code qu'ils donnent et ajoutez-le à votre fichier CSS. Voici ce dont vous avez besoin:
@font-face {font-family: "slidable-grid";src:url("fonts/slidable-grid.eot");src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),url("fonts/slidable-grid.woff") format("woff"),url("fonts/slidable-grid.ttf") format("truetype"),url("fonts/slidable-grid.svg#slidable-grid") format("svg");font-weight: normal;font-style: normal;}[class^="icon-"]:before,[class*=" icon-"]:before {font-family: "slidable-grid" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;font-size: 4em;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-web:before {content: "a";}.icon-graphic:before {content: "b";}.icon-logo:before {content: "c";}.icon-dev:before {content: "d";}.icon-3d:before {content: "e";}.icon-illustration:before {content: "f";}
Et voila. Si vous rechargez le projet, les icônes apparaîtront. Maintenant, tout ce qui reste à faire est de finir le style pour le faire ressembler à la démo finale.
Terminons rapidement avec les styles finaux qui restent. Ici, rien d’essentiel, seulement du design pour le faire ressembler à ce que nous voulons, donc tout cela est assez explicite. Voici le code pour centrer la grille et lui donner sa largeur maximale. Aussi pour faire le bon effet de vol stationnaire sur les icônes:
@import url(reset.css);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }.cf:after { clear: both; }.cf { *zoom: 1; }body {font-family: 'Exo 2', sans-serif; /* Google Font http://google.com/fonts */text-align: center;color: #999;background: #444;-webkit-font-smoothing: antialiased;}#services {max-width: 850px;margin: 0 auto;}#services .service .service-icon:hover {cursor: pointer;color: #249EC2;}#services .service .service-icon span {display: block;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;transition: all 0.1s linear;}#services .service .service-icon:hover span {position: relative;bottom: 5px;}
Notre objectif avec jQuery est de réutiliser le même extrait de code pour l’ensemble de la grille. Nous allons écouter un événement de clic (sur la boîte de service), puis lorsque cela se produira, nous animerons la position de l’icône pour la déplacer, et nous apporterons la description, nous ajouterons également un nom de classe pour vous aider. fonctionnalité. Alors, commencez par inclure jQuery sur votre page, puis ajoutez notre code soit dans un autre fichier script, soit dans un fichier