{"id":1074,"date":"2023-01-13T17:41:47","date_gmt":"2023-01-13T16:41:47","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1074"},"modified":"2023-01-13T17:41:48","modified_gmt":"2023-01-13T16:41:48","slug":"gloubi-script-texte-arriere-plan-defilant","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","title":{"rendered":"Gloubi script &#8211; texte avec un arri\u00e8re-plan d\u00e9filant"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Principe du script<\/h2>\n\n\n\n<p>Le script original est disponible sur sa propre <a href=\"http:\/\/gloubiweb.free.fr\/scripts\/javascript71.htm\" target=\"_blank\" rel=\"noreferrer noopener\">page<\/a> sur le site de notre gloubi adversaire.<\/p>\n\n\n\n<p>Il fonctionne selon le principe de calques&nbsp;: au-dessus du calque de motif, on place un autre calque o\u00f9 le texte fait des \u00ab&nbsp;trous&nbsp;\u00bb, laissant voir ce que l\u2019on place dessous (ici notre calque de motif).<\/p>\n\n\n\n<p>Le calque de motif est plus grand que le calque sup\u00e9rieur, mais on masque ce qui est en dehors de la zone du calque sup\u00e9rieur. Ce calque de motif est ensuite d\u00e9plac\u00e9 par du code JS.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Version plus moderne<\/h2>\n\n\n\n<p>En utilisant les technos actuelles pour reproduire ce script, on n\u2019a plus besoin que d\u2019une seule image (celle du motif de fond) et uniquement de CSS. Plus besoin de JavaScript&nbsp;!<\/p>\n\n\n\n<p>L\u2019\u00e9tape la plus simple de ce remake est la gestion de l\u2019image de fond.<\/p>\n\n\n\n<p>Notre texte est englob\u00e9 dans un \u00e9l\u00e9ment en display inline-block, et avec une hauteur et une largeur pr\u00e9cise (dans notre cas, 400 pixels de large sur 89 pixels de haut).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n#sliding-title {\n    display:inline-block;\n    width: 400px;\n    height: 89px;\n}\n<\/pre><\/div>\n\n\n<p>Pour le d\u00e9filement du fond, on <a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/CSS_Animations\/Using_CSS_animations#d%C3%A9finir_les_%C3%A9tapes_composant_une_animation_keyframes\" target=\"_blank\" rel=\"noreferrer noopener\">cr\u00e9\u00e9 une animation<\/a> modifiant sa position (propri\u00e9t\u00e9 background-position) de 0&nbsp;% \u00e0 100&nbsp;%, et on l\u2019applique de fa\u00e7on lin\u00e9aire et r\u00e9p\u00e9t\u00e9e ind\u00e9finiment.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n@keyframes backgroundSlide {\n    from {\n        background-position: 0%;\n    }\n    to {\n        background-position: 100%;\n    }\n}\n\n#sliding-title {\n    \/* ... *\/\n    animation: 3s backgroundSlide linear infinite;\n    \/* ... *\/\n}\n<\/pre><\/div>\n\n\n<p>Viens ensuite la cr\u00e9ation du texte en \u00ab&nbsp;trou&nbsp;\u00bb. Pour cela, on va utiliser la propri\u00e9t\u00e9 <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/background-clip\" target=\"_blank\" rel=\"noreferrer noopener\">background-clip<\/a><\/code> et sa valeur \u00ab&nbsp;text&nbsp;\u00bb (note&nbsp;: pour que cela fonctionne sous Chrome, il faut pr\u00e9fixer), et il faut r\u00e9gler la couleur du texte comme transparente (mot cl\u00e9 \u00ab&nbsp;transparent&nbsp;\u00bb ou code RGBA).<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n#sliding-title {\n    \/* ... *\/\n    background-clip: text;\n    -webkit-background-clip: text;\n    color: transparent;\n    \/* ou, en notation RGBA d\u00e9cimale ou hexad\u00e9cimale :\n        - color: rgba(0, 0, 0, 0);\n        - color: #00000000;\n        - color: #0000;\n    *\/\n    \/* ... *\/\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>La <a href=\"https:\/\/geekcommunicant.com\/demos\/gloubi-script-texte-arriere-plan-defilant.html\" target=\"_blank\" rel=\"noreferrer noopener\">version finale<\/a> de ce \u00ab\u00a0script\u00a0\u00bb est visible dans la section d\u00e9monstrations de mon site.<\/p>\n\n\n\n<p>Et je vous dit \u00e0 bient\u00f4t pour d\u2019autres aventures codesques et stylis\u00e9es.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/\">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],"tags":[30,51],"class_list":["post-1074","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-gloubituto"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-hk","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":1074,"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":1171,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/14\/texte-degrade-css\/","url_meta":{"origin":1074,"position":1},"title":"Un texte en d\u00e9grad\u00e9 avec CSS3","author":"geekc","date":"14\/04\/2023","format":false,"excerpt":"Comme indiqu\u00e9 \u00e0 la fin de mon gloubi tuto sur le texte en d\u00e9grad\u00e9, il est maintenant possible d'obtenir un r\u00e9sultat similaire uniquement avec CSS3. Les techniques CSS utilis\u00e9es Pour r\u00e9aliser un texte en d\u00e9grad\u00e9 avec CSS3, on utilise deux techniques : les d\u00e9grad\u00e9s et le d\u00e9coupage d'arri\u00e8re-plan (propri\u00e9t\u00e9 CSS\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":1121,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/02\/24\/gloubi-script-cadre-clignotant\/","url_meta":{"origin":1074,"position":2},"title":"Gloubi script &#8211; 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 &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"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":1074,"position":3},"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":[]},{"id":1000,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/16\/amusons-nous-avec-canvas-retour\/","url_meta":{"origin":1074,"position":4},"title":"Amusons-nous avec les canvas &#8211; le retour","author":"geekc","date":"16\/12\/2022","format":false,"excerpt":"Il y a quelques ann\u00e9es, j\u2019avais \u00e9crit une s\u00e9rie d\u2019articles expliquant comment cr\u00e9er \u00e0 l\u2019aide du\u00a0 tag <canvas> un texte ombr\u00e9 avec une image en fond utilisant une police Google Fonts. La technique ayant un peu \u00e9volu\u00e9 depuis, et ayant fait de nouveaux essais de mon c\u00f4t\u00e9, je pense qu\u2019il\u2026","rel":"","context":"Dans &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/image.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":860,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/07\/15\/carte-interactive-openlayers-controle-calques\/","url_meta":{"origin":1074,"position":5},"title":"Carte interactive OpenLayers avec contr\u00f4le de calques","author":"geekc","date":"15\/07\/2019","format":false,"excerpt":"Apr\u00e8s avoir r\u00e9alis\u00e9 une carte historique de la ligne 2 du tramway d\u2019\u00cele-de-France avec Leaflet (voir le tutoriel), je me suis attaqu\u00e9 \u00e0 la cr\u00e9ation de cette m\u00eame carte avec OpenLayers. Bien que plus complet sur certains points, OpenLayers n\u2019inclus pas nativement deux fonctionnalit\u00e9s utilis\u00e9es dans la carte\u00a0: Le contr\u00f4le\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":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1074","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=1074"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1074\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}