Bibliothèque de mouvements · 04 / 10

Cartes, pavés et survols

Les pavés du site prolongés : la même carte à icône, la même lueur dorée et la même flèche, déclinées en inclinaisons retenues, liserés de lumière, fiches qui s'ouvrent et grilles qui se recomposent.

091

Pavé incliné, profondeur contenue

Pavés des trois pôles sur index.html : la carte s'incline de quelques degrés vers le pointeur.

CSS + JSsurvol
092

Liseré projecteur

Grille « Que souhaitez-vous faire ? » de l'accueil : le filet d'or des cartes voisines s'éclaire près du pointeur.

CSS masque + JSsurvol
093

Photographie qui s'élargit

Cartes de la page « Annonces » : la vignette s'ouvre sur toute la largeur de la carte.

CSS clip-pathsurvol
094

Carte qui s'ouvre

Étapes du recouvrement : chaque étape se déplie pour montrer ce qu'elle contient.

  • Une lettre de relance adressée à votre débiteur.
  • Un appel de suivi, ferme et courtois.
  • Un compte rendu daté dans votre espace.
CSS grille 0fr → 1frclic
095

Éventail de pièces

Dépôt de pièces : la pile de documents déposés s'ouvre en éventail pour les passer en revue.

CSSsurvol · appui
096

Trio des pôles, un en lumière

Section des trois pôles sur index.html : le pôle visé prend la place et la lumière, les deux autres s'effacent sans disparaître.

CSS flex + JSsurvol · focus · appui
097

Annonce : la fiche qui se lève

Annonces de cession : la photo avance doucement, un reflet passe, l'invitation à ouvrir l'annonce monte.

CSSsurvol
098

Retournement sobre

Page Locatif : la carte d'une prestation se retourne sur son détail, un seul demi-tour, sans effet de manche.

Gestion locative

Vos locaux commerciaux suivis par une équipe qui connaît le bail commercial.

Exemple de contenu

Ce que comprend le suivi

  • Appels de loyers et quittances
  • Révision du loyer prévue au bail
  • Compte rendu régulier
CSS 3Dclic
099

Arrivée en cascade

Toute grille de pavés à son entrée à l'écran : les cartes se posent en diagonale, l'icône un temps après.

Impayés

Cession

Locatif

Rendez-vous

Pièces

Suivi

CSSvue
100

Affiche vidéo qui s'éveille

Carte de tête de la page Cession : une photographie immobile qui s'anime au survol, puis se rendort.

Devanture de commerce bleu-vert, vitrine vide, à la tombée du jour
JurisViva Cession

Céder votre commerce, en toute confidentialité

Une présentation anonyme, des repreneurs identifiés avant toute visite.

Vidéo BFL + CSS + JSsurvol · bouton
101

Bento qui se réorganise

Accueil du groupe : quatre tuiles, celle que l'on choisit devient la grande et les autres se rangent autour.

CSS positions + JSclic
102

Carte de preuve

Espace client et bandeau de preuves : un chiffre du dossier se compte puis reçoit un éclat doré.

Exemple12

pièces déposées

Affichage d'exemple d'un dossier dans votre espace.

JS + CSSvue
103

Glisser pour comparer

Page Locatif : un même local, vacant puis occupé, que l'on compare en déplaçant le curseur.

Devanture d'un local commercial VacantOccupé

Illustration · glissez ou utilisez les flèches du clavier

Image BFL + CSS clip-pathsaisie
104

Flèche qui trace son cercle

Liens de carte du site (dépôt de pièces, simulateur) : le cercle se trace en or, la flèche se relaie.

CSS + SVGsurvol
105

Bordure qui se dessine

Cartes d'engagements et de garanties : le filet d'or fait le tour de la carte, d'un seul trait.

SVG tracésurvol
106

Pile d'annonces au défilement

Page « Annonces » sur mobile : les annonces s'empilent en défilant, celle du dessous recule et s'assombrit.

Fonds de commerce

Boulangerie-pâtisserie

Annonce d'exemple.

Fonds de commerce

Brasserie avec terrasse

Annonce d'exemple.

Fonds de commerce

Salon de coiffure

Annonce d'exemple.

Murs commerciaux

Boutique en pied d'immeuble

Annonce d'exemple.

Faites défilerAnnonce 1 sur 4
CSS sticky + JSdéfilement
107

Icône aimantée

Pavés de services : l'icône et la flèche se laissent attirer de quelques pixels par le pointeur.

CSS + JSsurvol
108

Rideau de pôle

Pavés d'entrée vers un pôle : la couleur du pôle monte comme un rideau, le texte passe en crème.

CSS clip-pathsurvol
109

Reflet qui balaie

Carte de prise de rendez-vous en bas de page : un reflet satiné la traverse de loin en loin.

Prise de rendez-vous

Parlons de votre situation

Un premier échange pour comprendre votre dossier.

CSSboucle · pause
110

Bandeau d'annonces aimanté

Accueil Cession : un bandeau d'annonces que l'on fait glisser, la carte au centre s'agrandit et se cerne d'or.

Exemple

Boulangerie

Exemple

Brasserie

Exemple

Salon de coiffure

Exemple

Hôtel

Exemple

Murs commerciaux

Faites défiler ←→

CSS scroll-snap + JSdéfilement
111

Sélecteur à cadre glissant

Première question de la prise de rendez-vous : le cadre d'or glisse d'un choix à l'autre.

Votre besoin
CSS + JSclic · clavier
112

Étapes qui s'allument

Suivi de dossier et étapes du recouvrement : le rail d'or descend et allume les étapes franchies.

Étape 2 sur 4 · exemple
  1. 1Dépôt du dossier
  2. 2Relance amiable
  3. 3Mise en demeure
  4. 4Compte rendu et suite
CSSvue
113

Photographie en parallaxe

Carte « remise des clés » de la page Locatif : la photo, le cadre et la plaque glissent à des vitesses différentes.

Image BFL + CSS + JSsurvol
114

Mosaïque d'annonces qui se filtre

Page « Annonces » : au changement de filtre, les cartes glissent vers leur nouvelle place au lieu de sauter.

JS FLIP (Web Animations)clic
115

Carte qui se déplie en fiche

Locaux proposés à la location : la carte choisie s'agrandit sur place jusqu'à devenir sa fiche, puis se replie.

CSS clip-path + JS · vidéo BFLclic
116

Lampe sur photographie

Carte « Vos pièces » du parcours impayés : la photographie dort dans l'ombre, le pointeur l'éclaire comme une lampe.

Image BFL + CSS clip-path + JSsurvol
117

Étiquette qui coulisse

Page d'attente Locatif : la pastille d'état s'ouvre d'un point d'or jusqu'à son libellé.

Bientôt disponible

JurisViva Locatif

La gestion locative de vos locaux commerciaux arrive sur le site.

CSS clip-pathvue
118

Halo d'appel sur carte

Carte « Être rappelé » : le halo du bouton de rappel du site, porté à l'échelle de la carte.

Rappel

Un conseiller vous rappelle

Laissez-nous le moment qui vous convient.

Être rappelé
CSSboucle · pause
119

Rangée qui s'écarte

Raccourcis de l'espace bailleur : la tuile visée se soulève, ses voisines lui font un peu de place.

CSS + JSsurvol · focus
120

Grille tracée puis habitée

Ouverture de la page Groupe : les contours se tracent en or, les tuiles se remplissent, une lumière passe de l'une à l'autre.