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, modifier les codes couleurs contenus dans le code : voici une solution.

La partie html

Commencez par définir vos boutons puis votre champ texte:

<div class="button-row">
	<button type="button" class="change product--color-a" id="productA" data-color="#525ca3">product A</button>
	<button type="button" class="change product--color-b" id="productB" data-color="#633bb0">product B</button>
	<button type="button" class="change product--color-c" id="productC" data-color="#31B7BC">product C</button>
	<button type="button" class="change product--color-d" id="productD" data-color="#4EAB8E">product D</button>
	<button type="button" class="change product--color-e" id="productE" data-color="#ff4c00">product E</button>
	<button type="button" class="change product--color-f" id="productF" data-color="#61b09d">product F</button>
	<button type="button" class="change product--color-g" id="productG" data-color="#64A70B">product G</button>
	<button type="button" class="change product--color-h" id="productH" data-color="#00cbf9">product H</button>
</div>

<fieldset>
	<label for="final-code" aria-hidden="true"></label>
	<textarea id="final-code" name="message"></textarea>
</fieldset>

on définit ici un attribut data-color par bouton. On définit un set de couleur pour tous les « produits » (ou n’importe quel autre objet). Chaque bouton correspond à un produit, une marque et représente une couleur. La couleur dominante dans le champs textarea figure elle aussi dans l’attribut data-color d’un bouton. Ca c’est pour pouvoir revenir à la couleur initiale.

Intéragir avec le champ texte

Grâce au js on va procéder de la manière suivante :
On insère tous nos codes couleurs dans une variable « color« .
Au clic sur le bouton :

• on définit dans une variable « colour »  la couleur de l’élément cliqué
• on définit dans une variable « textarea » notre champ texte
• on définit la taille de notre tableau de couleur

on boucle :

• pour chaque couleur contenue dans le tableau
• si une couleur du champ textarea correspond à l’une des couleurs de notre tableau
• on remplace cette couleur par le data-color du bouton cliqué.

 var color =["#64A70B","#525ca3","#633bb0","#ff4c00","#61b09d","#00cbf9","#31B7BC","#4EAB8E"];
 $(".change").click(function() { 
  var colour = $(this).data("color");
  var textarea = $('#final-code');
  var len = color.length;
  for (i=0; i < len; i++) {
   textarea.html(textarea.html().replaceAll(color[i], colour)); 
 }  
});

The post Comment modifier dynamiquement les couleurs dans un champs textarea appeared first on Copier coller.

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 des tonnes de css, ou l’utilisation combinée du css et jquery mais de manière assez compliquée.

Finalement, j’ai trouvé sur codePen une fonction js assez simple à comprendre qui prend en paramètre un seul élément de la page, c’est l’attribut data-scroll-speed qu’on va ajouter sur nos élements.  Si vous avez une liste d’éléments sur la page, il suffit d’incrémenter chaque valeur : data-scroll-speed=1, data-scroll-speed=2 etc , et la fonction js fait le reste. Chaque élement va se déplacer au scroll en fonction de son data-scroll-speed !

Voici un exemple fait à la va vite pour tester cette fonction. J’ai mis le lien du codepen original dans le code.

See the Pen
Parallax objects jquery by blindDev (@yuyazz)
on CodePen.

The post Créer un effet parallaxe grâce à jQuery appeared first on Copier coller.

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, mais c’est déjà une approche :

Sur un conteneur parent, on crée deux pseudo-éléments  ::after et ::before. Ce sont deux lignes d’1px auxquelles on applique l’ombre et que l’on va lentement tourner (rotate) jusqu’à former un X derrière le conteneur.

Si on cible ces deux lignes via l’inspecteur, on voit bien qu’elles forment une croix. L’extrémité haute de la première va créer l’ombre du coin supérieur droit du conteneur.. et l’extrémité basse de la seconde va créer l’ombre du coin inférieur droit.

C’est un peu alambiqué mais ca fonctionne. La seule contrainte, c’est qu’il faut ensuite jouer sur les hauteurs et placements des deux lignes pour que ca passe en mobile/tablette

Voici l’exemple:

See the Pen
Vertical Curved Shadow by blindDev (@yuyazz)
on CodePen.

The post Créer une ombre verticale appeared first on Copier coller.

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. Ici on joue avec la propriété transform:scale pour donner un effet de zoom à l’image.

See the Pen
Accordion CSS/jQuery by blindDev (@yuyazz)
on CodePen.

The post Créer un accordéon en css jQuery appeared first on Copier coller.

Voici une fonctionnalité bien pratique pour créer ses listes dynamiques sans avoir à passer par des pseudos éléments avec images.

Créer une instance du compteur

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.

ol { 
counter-reset: li; 
list-style-type: none; 
}

Dans mon exemple, je ne me sert pas de ce code par défaut, et ca marche très bien.

Incrémenter ses items

Sur l’item du menu, on incrémente le compteur li, avec counter-increment: li; Puis en utilisant un pseudo element, on précise l’élément à incrémenter, ici nos items de menu « li »  : content: counter(li); De cette façon, à chaque nouveau « li », on aura notre numéro qui va s’afficher.

See the Pen
Counters CSS by blindDev (@yuyazz)
on CodePen.

Vous trouverez différentes manière de faire sur le web, à vous de trouver celle qui conviendra à votre site !

Et voici pour finir un cas pratique: pour expliquer le fonctionnement d’une fonctionnalité sur un site, on veut afficher la procédure à suivre sans que ca prenne trop de place. On crée donc un accordéon, un lien ou une div, sur lequel on clique pour dérouler les étapes à suivre. Ici au lieu d’une simple liste, on numérote chaque étape pour plus de clarté.

See the Pen
content:counter(li) by blindDev (@yuyazz)
on CodePen.

The post counter css appeared first on Copier coller.

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 et le rendu. Passez l’éditeur en 0.5 ou allez visionner ça dans CodePen directement.

See the Pen
Mapael Interactive hover map by blindDev (@yuyazz)
on CodePen.

Et voici la version statique, sans effet de survol

See the Pen
Interactive Mapael Map with connections by blindDev (@yuyazz)
on CodePen.

The post Une carte dynamique Mapael.js avec jquery.connection.js appeared first on Copier coller.

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.

Une progression en 4 étapes

Voici donc un exemple simple, les numéros sont grisés par défaut (opacity;0.5) et au clic s’affichent à pleine opacité (opacity:1). Les div sont également cachées, positionnées en absolute, et la suivante remplace la précédente. Ici on peut passer de la 1ère à la dernière position et inversement.

See the Pen
Tab list by blindDev (@yuyazz)
on CodePen.

Une progression en 3 étapes

Et voici un exemple similaire en 3 étapes seulement

See the Pen
Simple Jquery – Css Step Process by blindDev (@yuyazz)
on CodePen.

The post Créer une Step Progress Bar appeared first on Copier coller.

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 :

See the Pen
Fill a Dropdown Dynamically jQuery by blindDev (@yuyazz)
on CodePen.

Vous trouverez un autre exemple tout simple dans un autre article.

The post Remplir des champs dynamiquement en js appeared first on Copier coller.

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 peu utilisées et méconnues : text-decoration-color, text-decoration-thickness;

See the Pen
Highlight simple hover effet by blindDev (@yuyazz)
on CodePen.

The post Appliquer un effet au survol des liens appeared first on Copier coller.

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.

L’appel des scripts

Dans le header de votre page, placez l’appel au script css.

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Si ce n’est pas fait, incluez jquery et bien sûr n’oubliez pas ensuite d’inclure également le js:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Activer le plugin

Dans la même page entre des balises script, ou dans un fichier à part, on active le plugin avec ce bout de code:

<script>
    AOS.init();
  </script>

Si jamais ca bugue sur mobile…

AOS semble buguer sur mobile, une solution consiste donc à annuler les animations sur petit écran. Voici le code

<script>
      AOS.init({
         disable: function() {
            var maxWidth = 768;
            return window.innerWidth < maxWidth;
         }
      });
   </script>

Les animations

Ensuite dans la page, vous pouvez appliquer les animations sur n’importe quel type de balise  avec l’attribut data-aos= » » :

<div data-aos="fade-in"></div>

Quelques options sont possibles :

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Retrouvez la liste complète des options.

Voilà c’est à peu près tout ce qu’il faut savoir pour lancer de belles animations sur ses pages.. Attention à ne pas trop en mettre, ca complique la lecture parfois.. Rendez vous sur le github pour en savoir plus, ou l’article de l’auteur sur css trciks.

The post Créer des animations avec AOS appeared first on Copier coller.