Vous avez un champ textarea vide (ou pas). De manière dynamique, grâce au js, vous injectez du code à l’intérieur de ce champs texte. Ce texte contient entre autre, des couleurs ou une couleur dominante pour les titres, les phrases en gras, les bordures, les couleurs d’arrière plan etc. Vous souhaiteriez, par l’intermédiaire de boutons, […]
Après avoir longtemps cherché une solution simple pour créer un effet parallaxe sur plusieurs éléments en simultané, j’avais finalement laissé tomber : créer un parallaxe « statique » est assez simple, par contre faire en sorte qu’au scroll chaque élément d’une page se déplace différement, c’est un peu plus compliqué..La plupart des solutions impliquent à la fois […]
Ici le but est de créer une ombre sur les coins, pour donner l’impression qu’on a devant soi la page d’un livre. Sur le net, vous trouverez une foule d’exemples pour des ombres horizontales. En revanche pas grand chose sur des ombres verticales. Voici donc un exemple. Il doit y avoir une façon plus simple, […]
Voici un exemple de code pour obtenir un accordéon. Les panels de chaque accordéon sont en display:none par défaut. Grâce au jQuery les simples fonctions slideDown(), slideUp() vont nous permettre de révéler le contenu. Dans l’un des accordéons, on insère une image minature. Au clic sur cette image, une popup s’ouvre pour voir l’image agrandie. […]
Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images. On commence par créer une instance du compteur avec l’attribut counter-reset sur la liste. On annule le style par défaut avec le list-style-type:none. Dans mon exemple, je ne me sert pas de ce code par […]
Ayant déjà fait un tuto sur la manière dont on peut implémenter une carte avec Mapael.js, ici je vais juste montrer, à travers un codePen, comment afficher ses tooltips au survol sur les markers. J’utilise ici le plugin jquery.connections.js, pour relier les markers à leur div respective. Plutôt que des mots, voici le code […]
Ce genre de design est surtout visible sur les sites e-commerce ou les formulaires multi-étapes. On affiche des numéros, au clic sur un bouton on passe à l’étape suivante. Les numéros permettent de voir où l’on se situe. Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à […]
Il est parfois nécessaire d’afficher les options de ses menus déroulants de manière dynamiques : on selectionne une option dans un premier champ, cela affiche des données A dans le second champ. On sélectionne une autre option, cela affiche les données B, et ainsi de suite. Voici un exemple simple qui reprend ce principe : […]
De plus en plus de sites utilisent cette technique de surlignement des liens, parfois débordant sur le mot lui même. Au survol, le surlignage recouvre tout ou partie du lien. Voici quelques exemples de surlignement et d’effets au survol : On utilise ici les propriétés css background-image, linear-gradient et transition. Pour le dernier, quelques propriétés […]
J’avais déjà rédigé un mini tuto pour créer des animations avec wow.js et animate.css. Aujourd’hui on va voir comment faire la même chose avec AOS, plus facile d’utilisation. C’est une librairie js qui permet d’appliquer tout type d’animation css au scroll, sur n’importe quel type de balise html. Dans le header de votre page, placez […]