{"id":1085,"date":"2023-01-27T17:45:51","date_gmt":"2023-01-27T16:45:51","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1085"},"modified":"2023-01-27T17:45:52","modified_gmt":"2023-01-27T16:45:52","slug":"gloubi-tuto-texte-changeant-couleur","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","title":{"rendered":"Gloubi tuto – texte changeant de couleur"},"content":{"rendered":"\n

Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur<\/a>.<\/p>\n\n\n\n

Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en tout cas tr\u00e8s proche).<\/p>\n\n\n\n

Fonctionnement du script<\/h2>\n\n\n\n

On indique au script les couleurs (du texte et du fond) entre lesquelles faire une transition. Ces couleurs sont d\u00e9finies chacune par trois variables (ce qui nous fait 12 variables en tout) contenant une valeur d\u00e9cimale (entre 0 et 255) qui sera ensuite convertie en hexad\u00e9cimal sur deux digits (entre 00 et FF) pour indiquer la couleur sous la notation #RRGGBB.<\/p>\n\n\n\n

Les valeurs des diff\u00e9rentes composantes sont progressivement incr\u00e9ment\u00e9es puis d\u00e9cr\u00e9ment\u00e9es entre les valeurs bornes.<\/p>\n\n\n\n\n\n\n\n

Recr\u00e9ation en CSS<\/h2>\n\n\n\n

Pour cr\u00e9er une animation \u00e0 l\u2019aide de CSS, il faut lui d\u00e9finir diff\u00e9rents points avec les styles \u00e0 appliquer pour chacun de ces points. La d\u00e9claration de ces points se fait comme ci-dessous :<\/p>\n\n\n

\n@keyframes titleAnimation {\n  \/* ... *\/\n}\n<\/pre><\/div>\n\n\n
Dans notre cas, on n\u2019a besoin de d\u00e9finir que 2 points : un point de d\u00e9part (from) et un point d\u2019arriv\u00e9e (to). Cela donne :<\/p>\n\n\n
\n@keyframes titleAnimation {\n  from {\n    background-color: rgb(204, 255, 102);\n    color: rgb(255, 0, 0);\n  }\n  to {\n    background-color: rgb(102, 255, 255);\n    color: rgb(0, 0, 255);\n  }\n}\n<\/pre><\/div>\n\n\n
Maintenant que notre animation est cr\u00e9\u00e9e, il faut pouvoir l\u2019appliquer aux \u00e9l\u00e9ments que l\u2019on souhaite animer. Cela passe par l\u2019utilisation de la propri\u00e9t\u00e9 animation ou de ses sous-propri\u00e9t\u00e9s. Ici, ce que l\u2019on souhaite, c\u2019est jouer l\u2019animation sur X secondes et de la r\u00e9p\u00e9ter ind\u00e9finiment de fa\u00e7on altern\u00e9e. Dans notre cas, cela donne :<\/p>\n\n\n
\nanimation: titleAnimation 10s infinite alternate;\n<\/pre><\/div>\n\n\n
Pour en savoir plus sur les animations CSS, que je n’ai fait ici que rapidement survoler, je vous conseille la partie parlant des @keyframes du cours \u00ab\u00a0Cr\u00e9er des animations CSS modernes<\/a>\u00a0\u00bb d’OpenClassrooms, ainsi que la documentation MDN<\/a>.<\/p>\n\n\n\n
En prenant tous les p’tits bouts trucs pr\u00e9sent\u00e9s ici et que vous les assemblez ensemble, vous obtenez ce r\u00e9sultat<\/a>.<\/p>\n\n\n\n
\n\n\n\n
Je vous dis \u00e0 bient\u00f4t (j\u2019esp\u00e8re) pour d\u2019autres explications et refontes de gloubi scripts.<\/p>\n","protected":false},"excerpt":{"rendered":"
Cette fois-ci encore, j\u2019ai d\u00e9cid\u00e9 de m\u2019attaquer \u00e0 un autre gloubi script d\u2019effet sur texte, le texte changeant de couleur. Une fois de plus, d\u00fb \u00e0 l\u2019\u00e9volution des technologies, plus besoin de JavaScript pour obtenir un r\u00e9sultat identique (ou en … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[53,19],"tags":[30,51,29],"class_list":["post-1085","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","tag-css","tag-gloubituto","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-hv","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1074,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","url_meta":{"origin":1085,"position":0},"title":"Gloubi script – texte avec un arri\u00e8re-plan d\u00e9filant","author":"geekc","date":"13\/01\/2023","format":false,"excerpt":"Aujourd\u2019hui nouveau tuto sur un gloubi script d\u2019effet sur texte. Cette fois ci, il s\u2019agit de texte avec arri\u00e8re-plan d\u00e9filant. Principe du script Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire. Il fonctionne selon le principe de calques\u00a0: au-dessus du calque de\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":1085,"position":1},"title":"Gloubi script – un cadre clignotant","author":"geekc","date":"24\/02\/2023","format":false,"excerpt":"Aujourd\u2019hui, nous allons nous attaquer \u00e0 un script pr\u00e9sent\u00e9 chez notre gloubi rival qui pourra vous \u00eatre tr\u00e8s utile pour mettre en avant n\u2019importe quel contenu sur, par exemple, la magnifique page d\u2019accueil de votre tout aussi sublime site\u00a0: le cadre clignotant. Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":991,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/09\/gloubi-tuto-texte-degrade\/","url_meta":{"origin":1085,"position":2},"title":"Gloubi tuto – un texte en d\u00e9grad\u00e9","author":"geekc","date":"09\/12\/2022","format":false,"excerpt":"Pour ce deuxi\u00e8me gloubi tuto, on s\u2019attaque \u00e0 un script qui a eu son petit succ\u00e8s sur Skyblog\u00a0: le texte \u00ab\u00a0arc-en-ciel\u00a0\u00bb (en d\u00e9grad\u00e9s). Script original et explication Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre N\u00e9m\u00e9sis dans la deuxi\u00e8me\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":1085,"position":3},"title":"Gloubi tuto – menu interactif d\u00e9roulant","author":"geekc","date":"30\/12\/2022","format":false,"excerpt":"Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire. Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes. Fonctionnement Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1133,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/03\/10\/gloubi-script-un-systeme-de-tooltip\/","url_meta":{"origin":1085,"position":4},"title":"Gloubi script – un syst\u00e8me de tooltip","author":"geekc","date":"10\/03\/2023","format":false,"excerpt":"J\u2019ai d\u00e9cid\u00e9 cette semaine de me pencher sur le script de tooltip pr\u00e9sent\u00e9 sur le site de gloubiweb. Dans une premi\u00e8re partie je pr\u00e9senterai rapidement le fonctionnement du script actuel, et dans une deuxi\u00e8me, je vous indiquerai comment recr\u00e9er (quasi) \u00e0 l\u2019identique cet ancien script. Pr\u00e9sentation de du code existant\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1108,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/10\/gloubi-tuto-menu-avec-description-du-lien\/","url_meta":{"origin":1085,"position":5},"title":"Gloubi tuto – menu avec description du lien","author":"geekc","date":"10\/02\/2023","format":false,"excerpt":"Voici venu le temps d\u2019un nouveau gloubi tuto sur un autre script de menu. Aujourd\u2019hui, nous allons nous attaquer au menu interactif avec description du lien. Fonctionnement du script Le menu est mis en forme avec un simple tableau \u00e0 une seule colonne, avec un case vide en pied de\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1085","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1085"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1085\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}