{"id":1121,"date":"2023-02-24T16:25:03","date_gmt":"2023-02-24T15:25:03","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1121"},"modified":"2023-02-24T16:25:05","modified_gmt":"2023-02-24T15:25:05","slug":"gloubi-script-cadre-clignotant","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","title":{"rendered":"Gloubi script &#8211; un cadre clignotant"},"content":{"rendered":"\n<p>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&nbsp;: le cadre clignotant.<\/p>\n\n\n\n<p>Comme pour d\u2019autres gloubi scripts d\u00e9j\u00e0 pr\u00e9sent\u00e9s, il est possible maintenant d\u2019obtenir le m\u00eame effet seulement avec du CSS. Dans cet article je pr\u00e9senterait la solution JavaScript actuelle (avec une l\u00e9g\u00e8re correction) puis une solution utilisant uniquement CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Solution JavaScript<\/h2>\n\n\n\n<p>Le code utilis\u00e9 (visible <a href=\"http:\/\/gloubiweb.free.fr\/scripts\/javascript25.htm\" target=\"_blank\" rel=\"noreferrer noopener\">ici<\/a>) est tr\u00e8s simple. Toutes les 500 millisecondes (avec setInterval) on appelle une fonction qui v\u00e9rifie la couleur de bordure de notre \u00e9l\u00e9ment cible (via son attribut <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/API\/HTMLElement\/style\" target=\"_blank\" rel=\"noreferrer noopener\"><em>style<\/em><\/a>), et selon sa valeur, cette couleur est chang\u00e9 (par exemple, si la bordure est bleue, elle est chang\u00e9e en rouge, et inversement).<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><span style=\"text-decoration: underline;\">L\u00e9ger correctif<\/span>&nbsp;: le seul correctif \u00e0 faire sur le script est la mani\u00e8re de cibler l\u2019\u00e9l\u00e9ment dont on doit faire clignoter la bordure. Pour cela, rien de tr\u00e8s sorcier, un getElementById() suffit.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst myexample = document.getElementById(&#039;news&#039;);\n\nfunction flashit(){\n  if (myexample.style.borderColor==&#039;lime&#039;) {\n  \tmyexample.style.borderColor=&#039;orange&#039;;\n  } else {\n  \tmyexample.style.borderColor=&#039;lime&#039;;\n  }\n}\nsetInterval(&#039;flashit()&#039;, 500);\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Solution CSS<\/h2>\n\n\n\n<p>Pour reproduire cet effet en CSS, une simple animation @keyframes avec une couleur diff\u00e9rente \u00e0 50&nbsp;% suffit.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@keyframes frameFlash {\n  50% {\n    border-color: orange;\n  }\n}\n<\/pre><\/div>\n\n\n<p>Le point un peu plus probl\u00e9matique est le suivant&nbsp;: avec les animations CSS, les diff\u00e9rentes propri\u00e9t\u00e9s sont g\u00e9n\u00e9ralement chang\u00e9es de mani\u00e8re progressive, or ce que nous cherchons \u00e0 obtenir c\u2019est une transition nette\u2026<\/p>\n\n\n\n<p>Pour cela, au lieu d\u2019utiliser un mot-cl\u00e9 comme <em>linear<\/em> ou encore <em>ease-out<\/em> pour d\u00e9finir la fonction de <em>timing<\/em>, il faut utiliser la fonction steps(). Cette fonction prend 2 param\u00e8tres&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>le nombre d\u2019\u00e9tapes<\/li>\n\n\n\n<li>un mot-cl\u00e9 indiquant comment les \u00e9tapes sont organis\u00e9es<\/li>\n<\/ul>\n\n\n\n<p>Pour en savoir plus sur les options de step(), rendez-vous sur la page correspondante sur <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/animation-timing-function\" target=\"_blank\" rel=\"noreferrer noopener\">MDN<\/a>.<\/p>\n\n\n\n<p>La d\u00e9finition de notre animation devient donc :<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\nanimation: frameFlash 500ms steps(1,end) infinite alternate;\n<\/pre><\/div>\n\n\n<p>La <a href=\"https:\/\/geekcommunicant.com\/demos\/gloubi-script-cadre-clignotant.html\" target=\"_blank\" rel=\"noreferrer noopener\">version compl\u00e8te<\/a> de cette animation est pr\u00e9sent\u00e9e sur mon site.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Vous voil\u00e0 maintenant capables de cr\u00e9er vos propres cadres clignotants \u00e0 l&rsquo;aide de quelques lignes de CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&nbsp;: le &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/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":[59,51],"class_list":["post-1121","post","type-post","status-publish","format-standard","hentry","category-css","category-javascript","tag-animation","tag-gloubituto"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-i5","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":1085,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/27\/gloubi-tuto-texte-changeant-couleur\/","url_meta":{"origin":1121,"position":0},"title":"Gloubi tuto &#8211; texte changeant de couleur","author":"geekc","date":"27\/01\/2023","format":false,"excerpt":"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 tout cas tr\u00e8s proche). Fonctionnement du script On indique au\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1074,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","url_meta":{"origin":1121,"position":1},"title":"Gloubi script &#8211; 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 &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":976,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/02\/gloubi-tuto-un-menu-interactif-hello-kitty\/","url_meta":{"origin":1121,"position":2},"title":"Gloubi tuto &#8211; un menu interactif Hello Kitty","author":"geekc","date":"02\/12\/2022","format":false,"excerpt":"Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty. Pr\u00e9sentation et explication de l\u2019existant Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi. Le\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","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":1121,"position":3},"title":"Gloubi tuto &#8211; 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 &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"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":1121,"position":4},"title":"Gloubi tuto &#8211; 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 &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1081,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/20\/gloubi-tuto-menu-images-reactives\/","url_meta":{"origin":1121,"position":5},"title":"Gloubi tuto &#8211; menu avec images r\u00e9actives","author":"geekc","date":"20\/01\/2023","format":false,"excerpt":"Nouvelle semaine, nouveau gloubi-tuto. Cette fois-ci, on s\u2019attaque \u00e0 un autre script de menu. M\u2019enfin script\u2026 pas cette-fois. M\u00eame si sur gloubiweb cela est pr\u00e9sent\u00e9 comme un script, il s\u2019agit en fait de CSS. Ce menu, qui est visible sur cette page, utilise la technique des sprites CSS. Pr\u00e9sentation de\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1121","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=1121"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1121\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}