{"id":262,"date":"2024-04-22T07:47:21","date_gmt":"2024-04-22T07:47:21","guid":{"rendered":"https:\/\/36-15graphisme.fr\/blog\/?p=262"},"modified":"2026-10-13T12:54:48","modified_gmt":"2026-10-13T12:54:48","slug":"raporte-la-baballe","status":"publish","type":"post","link":"https:\/\/3615graphisme.fr\/minitel\/raporte-la-baballe\/","title":{"rendered":"Rapporte la baballe !!"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<style data-wp-block-html=\"css\">\n.article-title {\n\ntext-align: center;\n  width: 100%;\n  max-width: 100%;\n  min-height: 100px;\ntext-shadow:\n2px 2px 3px #beff99,\n0 0 1em #c0ffa0,\n0 0 0.2em #c6ffb5;\n0 0 0.5em #c6ffb5;\n\t\nfont-family: 'Data70';\n  color: white;\n  font-size: 60px;\n  position: relative;\n  width: 800px;\n  margin: 30px auto;\n}\n\n@keyframes noise-anim {\n  0% {\n    clip: rect(100px, 9999px, 5px, 0);\n  }\n  5% {\n    clip: rect(17px, 9999px, 8px, 0);\n  }\n  10% {\n    clip: rect(47px, 9999px, 20px, 0);\n  }\n  15% {\n    clip: rect(7px, 9999px, 20px, 0);\n  }\n  20% {\n    clip: rect(4px, 9999px, 76px, 0);\n  }\n  25% {\n    clip: rect(15px, 9999px, 54px, 0);\n  }\n  30% {\n    clip: rect(71px, 9999px, 2px, 0);\n  }\n  35% {\n    clip: rect(14px, 9999px, 96px, 0);\n  }\n  40% {\n    clip: rect(38px, 9999px, 28px, 0);\n  }\n  45% {\n    clip: rect(66px, 9999px, 37px, 0);\n  }\n  50% {\n    clip: rect(82px, 9999px, 25px, 0);\n  }\n  55% {\n    clip: rect(78px, 9999px, 52px, 0);\n  }\n  60% {\n    clip: rect(14px, 9999px, 88px, 0);\n  }\n  65% {\n    clip: rect(24px, 9999px, 69px, 0);\n  }\n  70% {\n    clip: rect(49px, 9999px, 94px, 0);\n  }\n  75% {\n    clip: rect(98px, 9999px, 95px, 0);\n  }\n  80% {\n    clip: rect(40px, 9999px, 2px, 0);\n  }\n  85% {\n    clip: rect(25px, 9999px, 66px, 0);\n  }\n  90% {\n    clip: rect(89px, 9999px, 31px, 0);\n  }\n  95% {\n    clip: rect(36px, 9999px, 38px, 0);\n  }\n  100% {\n    clip: rect(45px, 9999px, 28px, 0);\n  }\n}\n.article-title:after {text-align: center;\nwidth: 100%;\n  max-width: 100%;\n  min-height: 100px;\n  content: attr(data-text);\n  position: absolute;\n  left: 2px;\n  text-shadow: -1px 0 #00ff0c;\n  top: 0;\n  color: white;\n  background: transparent;\n  overflow: hidden;\n  clip: rect(0, 900px, 0, 0);\n  animation: noise-anim 2s infinite linear alternate-reverse;\n}\n\n@keyframes noise-anim-2 {\n  0% {\n    clip: rect(5px, 9999px, 98px, 0);\n  }\n  5% {\n    clip: rect(1px, 9999px, 39px, 0);\n  }\n  10% {\n    clip: rect(36px, 9999px, 63px, 0);\n  }\n  15% {\n    clip: rect(28px, 9999px, 23px, 0);\n  }\n  20% {\n    clip: rect(7px, 9999px, 73px, 0);\n  }\n  25% {\n    clip: rect(89px, 9999px, 54px, 0);\n  }\n  30% {\n    clip: rect(81px, 9999px, 28px, 0);\n  }\n  35% {\n    clip: rect(49px, 9999px, 65px, 0);\n  }\n  40% {\n    clip: rect(50px, 9999px, 91px, 0);\n  }\n  45% {\n    clip: rect(68px, 9999px, 5px, 0);\n  }\n  50% {\n    clip: rect(84px, 9999px, 100px, 0);\n  }\n  55% {\n    clip: rect(36px, 9999px, 95px, 0);\n  }\n  60% {\n    clip: rect(91px, 9999px, 98px, 0);\n  }\n  65% {\n    clip: rect(70px, 9999px, 22px, 0);\n  }\n  70% {\n    clip: rect(98px, 9999px, 55px, 0);\n  }\n  75% {\n    clip: rect(61px, 9999px, 47px, 0);\n  }\n  80% {\n    clip: rect(80px, 9999px, 13px, 0);\n  }\n  85% {\n    clip: rect(84px, 9999px, 80px, 0);\n  }\n  90% {\n    clip: rect(16px, 9999px, 89px, 0);\n  }\n  95% {\n    clip: rect(7px, 9999px, 58px, 0);\n  }\n  100% {\n    clip: rect(10px, 9999px, 37px, 0);\n  }\n}\n.articletitle:before {\n\n  content: attr(data-text);\n  position: absolute;\n  left: -2px;\n  text-shadow: 1px 0 yellow;\n  top: 0;\n  color: white;\n  background: transparent ;\n  overflow: hidden;\n  clip: rect(0, 900px, 0, 0);\n  animation: noise-anim-2 3s infinite linear alternate-reverse;\n}\n<\/style>\n\n<div class=\"article-title\" data-text=\"Rapporte la baballe !!\">Rapporte la baballe !!<\/div>\n\n\n\n<h2>Va chercher !<\/h2>\n<p>Le motion design, c&rsquo;est trop chouette, ce sont des images qui bougent, des sons qui subliment le tout, et des heures de taf qui filent sans qu&rsquo;on les voie passer.<\/p>\n<p>Sur un exercice de Fran\u00e7ois Chatelain (un v\u00e9ritable Panzer de la discipline !) Voici les aventures d&rsquo;une petite balle qui rebondit. Bon jusqu&rsquo;\u00e0 l\u00e0 rien d&rsquo;extraordinaire. La vraies questions \u00e0 se poser c&rsquo;est \u00ab\u00a0qu&rsquo;est-ce qui fait qu&rsquo;on percoi cette balle comme l&rsquo;heroine de cette petite aventure ?\u00a0\u00bb\u00a0<\/p>\n<p>Deux choses : les code des jeux vid\u00e9o qui viennent renforcer la suspension consentie de l&rsquo;incr\u00e9dulit\u00e9, et les comportements de la balle (elle saute, rebondis, se d\u00e9forme) toute l&rsquo;importance de ces actions sont d\u00e9cortiqu\u00e9es dans le livre <a href=\"https:\/\/archive.org\/details\/disney-animation-the-illusion-of-life\" target=\"_blank\" rel=\"noopener\">the illusion of life<\/a> une \u0153uvre \u00e0 feuilleter !<\/p>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rapporte la baballe !! Va chercher ! Le motion design, c&rsquo;est trop chouette, ce sont des images qui bougent, des sons qui subliment le tout, et des heures de taf qui filent sans qu&rsquo;on les voie passer. Sur un exercice de Fran\u00e7ois Chatelain (un v\u00e9ritable Panzer de la discipline !) Voici les aventures d&rsquo;une petite &#8230; <a title=\"Rapporte la baballe !!\" class=\"read-more\" href=\"https:\/\/3615graphisme.fr\/minitel\/raporte-la-baballe\/\" aria-label=\"En savoir plus sur Rapporte la baballe !!\">Lire la suite<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-262","post","type-post","status-publish","format-standard","hentry","category-motion-design"],"_links":{"self":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/comments?post=262"}],"version-history":[{"count":2,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/262\/revisions"}],"predecessor-version":[{"id":2064,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/posts\/262\/revisions\/2064"}],"wp:attachment":[{"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/media?parent=262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/categories?post=262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/3615graphisme.fr\/minitel\/wp-json\/wp\/v2\/tags?post=262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}