{"id":741,"date":"2024-12-02T20:35:24","date_gmt":"2024-12-02T23:35:24","guid":{"rendered":"https:\/\/urutaudev.com.br\/?p=741"},"modified":"2024-12-02T20:53:25","modified_gmt":"2024-12-02T23:53:25","slug":"animacao-interativa-olhos","status":"publish","type":"post","link":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/","title":{"rendered":"Anima\u00e7\u00e3o Interativa dos Olhos"},"content":{"rendered":"<h1><\/h1>\n<figure id=\"attachment_742\" aria-describedby=\"caption-attachment-742\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-742 size-medium\" src=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa-300x168.jpg\" alt=\"Anima\u00e7\u00e3o Interativa dos Olhos \" width=\"300\" height=\"168\" srcset=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa-300x168.jpg 300w, https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa-1024x572.jpg 1024w, https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa-768x429.jpg 768w, https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa-800x445.jpg 800w, https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg 1131w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption id=\"caption-attachment-742\" class=\"wp-caption-text\">Anima\u00e7\u00e3o Interativa dos Olhos<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-family: arial, helvetica, sans-serif;\">Introdu\u00e7\u00e3o<\/span><\/h2>\n<p><span style=\"font-size: 14pt; font-family: arial, helvetica, sans-serif;\">Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.<\/span><\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif; font-size: 14pt;\">Nesta anima\u00e7\u00e3o divertida e interativa, os olhos seguem o cursor do seu mouse. Neste tutorial, vamos explorar como realizar essa anima\u00e7\u00e3o usando HTML, CSS e JavaScript. N\u00e3o s\u00f3 a anima\u00e7\u00e3o \u00e9 cativante e envolvente, mas tamb\u00e9m inclu\u00edmos um efeito de piscar para dar um toque realista \u00e0 intera\u00e7\u00e3o. Seja voc\u00ea um iniciante ou um desenvolvedor experiente procurando por um novo projeto, esta \u00e9 uma \u00f3tima maneira de praticar e aprimorar suas habilidades de front-end.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-family: arial, helvetica, sans-serif;\">Criando o Anima\u00e7\u00e3o Interativa dos Olhos \u00a0em Javascript<\/span><\/h3>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Primeiro passo voc\u00ea dever\u00e1 criar a estrutura da p\u00e1gina, para isso crie um arquivo html contendo\u00a0 o seguinte c\u00f3digo :<\/span><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<div>\n<div><code>&lt;html lang=\"pt-BR\"&gt;<\/code><\/div>\n<div><code>&lt;head&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;meta charset=\"UTF-8\"&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;title&gt;Interactive Animated Eyes&lt;\/title&gt;<\/code><\/div>\n<div><code>&lt;\/head&gt;<\/code><\/div>\n<div><code>&lt;body&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;script&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;\/script&gt;<\/code><\/div>\n<div><code>&lt;\/body&gt;<\/code><\/div>\n<div><code>&lt;\/html&gt;<\/code><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Logo ap\u00f3s crio a estrutura do olho que ser\u00e1 animado:<\/span><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 &lt;div class=\"eye-container\"&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"eye\"&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"pupil\"&gt;&lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"eyelid\"&gt;&lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"eye\"&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"pupil\"&gt;&lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &lt;div class=\"eyelid\"&gt;&lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/div&gt;<\/span><\/code><\/div>\n<div><code><span style=\"font-family: arial, helvetica, sans-serif;\">\u00a0 \u00a0 &lt;\/div&gt;<\/span><\/code><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif; font-size: 14pt;\">No c\u00f3digo acima implementei a parte da estrutura dos olhos que ser\u00e3o animados, foi criado o olho, a pupila e a p\u00e1lpebra do olho.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Depois adiciono o css respons\u00e1vel pela estiliza\u00e7\u00e3o do olho e pela anima\u00e7\u00e3o de piscar :<\/span><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<div>\n<div><code>\u00a0body {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #121f32;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 100vh;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 margin: 0;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 .eye-container {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 gap: 30px;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 .eye {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100px;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 100px;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(255, 216, 98);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border: 4px solid #000;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 50%;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: relative;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 display: flex;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 justify-content: center;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 align-items: center;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 box-shadow: 0 5px #666;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 overflow: hidden;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 .pupil {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 25px;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 25px;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: #000;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 50%;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: absolute;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transition: transform 0.1s ease-out;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 .eyelid {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 position: absolute;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 top: 0;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: 100%;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: 100%;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 background-color: rgb(85, 89, 95);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 border-radius: 50%;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 animation: blink 5s infinite;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform-origin: top;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform: scaleY(0);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pointer-events: none;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 @keyframes blink {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 0%,<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 92%,<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 100% {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform: scaleY(0);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 94%,<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 96% {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 transform: scaleY(1);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 }<\/code><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Por ultimo adiciono o script respons\u00e1vel por fazer o olho seguir o ponteiro do <a href=\"https:\/\/amzn.to\/3TSZN3j\">Mouse<\/a>:<\/span><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<div>\n<div><code>\u00a0 &lt;script&gt;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 const eyes = document.querySelectorAll('.eye');<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 document.addEventListener('mousemove', (event) =&gt; {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 requestAnimationFrame(() =&gt; {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 eyes.forEach(eye =&gt; {<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const pupil = eye.querySelector('.pupil');<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const rect = eye.getBoundingClientRect();<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const eyeX = rect.left + rect.width \/ 2;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const eyeY = rect.top + rect.height \/ 2;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const dx = event.clientX - eyeX;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const dy = event.clientY - eyeY;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const angle = Math.atan2(dy, dx);<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 const distance = Math.min(35, Math.hypot(dx, dy));<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 pupil.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`;<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n<div><code>\u00a0 \u00a0 \u00a0 \u00a0 });<\/code><\/div>\n<div><code>\u00a0 \u00a0 &lt;\/script&gt;<\/code><\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><span style=\"font-size: 14pt; font-family: arial, helvetica, sans-serif;\">Uma breve explica\u00e7\u00e3o do c\u00f3digo <a href=\"https:\/\/urutaudev.com.br\/index.php\/category\/tutorias\/javascript\/\">Javascript<\/a> criado:\u00a0\u00a0<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\"><\/li>\n<\/ul>\n<ol>\n<li><strong>Sele\u00e7\u00e3o dos Olhos:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> eyes = <span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">querySelectorAll<\/span>(<span class=\"hljs-string\">'.eye'<\/span>);<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Seleciona todos os elementos com a classe\u00a0<code>.eye<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Evento de Movimento do Mouse:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"sticky top-9 md:top-[5.75rem]\"><\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-variable language_\">document<\/span>.<span class=\"hljs-title function_\">addEventListener<\/span>(<span class=\"hljs-string\">'mousemove'<\/span>, <span class=\"hljs-function\">(<span class=\"hljs-params\">event<\/span>) =&gt;<\/span> {<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Adiciona o evento<code>mousemove<\/code>,\u00a0 para ativar a fun\u00e7\u00e3o sempre que o cursor se move.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Otimiza\u00e7\u00e3o com\u00a0<code>requestAnimationFrame<\/code>:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-title function_\">requestAnimationFrame<\/span>(<span class=\"hljs-function\">() =&gt;<\/span> {<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Reduz a frequ\u00eancia de atualiza\u00e7\u00f5es para sincronizar com a taxa de quadros do navegador, melhorando o desempenho.<\/li>\n<\/ul>\n<\/li>\n<li><strong>C\u00e1lculo da Posi\u00e7\u00e3o do Olho:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> rect = eye.<span class=\"hljs-title function_\">getBoundingClientRect<\/span>();<br \/>\n<span class=\"hljs-keyword\">const<\/span> eyeX = rect.<span class=\"hljs-property\">left<\/span> + rect.<span class=\"hljs-property\">width<\/span> \/ <span class=\"hljs-number\">2<\/span>;<br \/>\n<span class=\"hljs-keyword\">const<\/span> eyeY = rect.<span class=\"hljs-property\">top<\/span> + rect.<span class=\"hljs-property\">height<\/span> \/ <span class=\"hljs-number\">2<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Obt\u00e9m a posi\u00e7\u00e3o central de cada olho usando\u00a0<code>getBoundingClientRect()<\/code>.<\/li>\n<\/ul>\n<\/li>\n<li><strong>C\u00e1lculo da Dire\u00e7\u00e3o e Dist\u00e2ncia:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"sticky top-9 md:top-[5.75rem]\"><\/div>\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\"><span class=\"hljs-keyword\">const<\/span> dx = event.<span class=\"hljs-property\">clientX<\/span> - eyeX;<br \/>\n<span class=\"hljs-keyword\">const<\/span> dy = event.<span class=\"hljs-property\">clientY<\/span> - eyeY;<br \/>\n<span class=\"hljs-keyword\">const<\/span> angle = <span class=\"hljs-title class_\">Math<\/span>.<span class=\"hljs-title function_\">atan2<\/span>(dy, dx);<br \/>\n<span class=\"hljs-keyword\">const<\/span> distance = <span class=\"hljs-title class_\">Math<\/span>.<span class=\"hljs-title function_\">min<\/span>(<span class=\"hljs-number\">35<\/span>, <span class=\"hljs-title class_\">Math<\/span>.<span class=\"hljs-title function_\">hypot<\/span>(dx, dy));<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Calcula a dire\u00e7\u00e3o (<code>angle<\/code>) e a dist\u00e2ncia (<code>distance<\/code>) do cursor em rela\u00e7\u00e3o ao centro do olho.<\/li>\n<li>Limita a dist\u00e2ncia m\u00e1xima a 35 pixels.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Movimento da Pupila:<\/strong>\n<div class=\"contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"!whitespace-pre hljs language-javascript\">pupil.<span class=\"hljs-property\">style<\/span>.<span class=\"hljs-property\">transform<\/span> = <span class=\"hljs-string\">`translate(<span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Math<\/span>.cos(angle) * distance}<\/span>px, <span class=\"hljs-subst\">${<span class=\"hljs-built_in\">Math<\/span>.sin(angle) * distance}<\/span>px)`<\/span>;<br \/>\n<\/code><\/div>\n<\/div>\n<ul>\n<li>Move a pupila com base na dire\u00e7\u00e3o e na dist\u00e2ncia calculadas, garantindo que ela siga o cursor.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Voc\u00ea pode visualizar a anima\u00e7\u00e3o no link abaixo:<\/span><\/strong><\/span><\/p>\n<p><strong><span style=\"font-family: arial, helvetica, sans-serif; font-size: 12pt;\"><a href=\"https:\/\/urutaudev.com.br\/aplicativos\/animacoes\/interactive-animated-eyes\/\">Interactive Animated Eyes<\/a>\u00a0<\/span><\/strong><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: arial, helvetica, sans-serif;\"><strong><span style=\"font-size: 14pt;\">Deixo aqui um v\u00eddeo curto do processo de cria\u00e7\u00e3o da anima\u00e7\u00e3o:<\/span><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"Interactive Animated Eyes in CSS and Javascript\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/n-muqu7O5VI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<h2><\/h2>\n<p>&nbsp;<\/p>\n<p><iframe loading=\"lazy\" title=\"interactive animated eyes   short #coding #devbackend #typescript #javascript\" width=\"800\" height=\"450\" src=\"https:\/\/www.youtube.com\/embed\/x9vAR2-TTAk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2><\/h2>\n<h2><span style=\"font-family: arial, helvetica, sans-serif;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-size: 14pt; font-family: arial, helvetica, sans-serif;\">Este projeto n\u00e3o s\u00f3 adiciona um elemento divertido ao seu site, mas tamb\u00e9m \u00e9 uma excelente maneira de melhorar suas habilidades em HTML, CSS e JavaScript. Experimente adicionar outros efeitos ou personaliza\u00e7\u00f5es para tornar a anima\u00e7\u00e3o ainda mais envolvente.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span style=\"font-family: arial, helvetica, sans-serif; font-size: 12pt;\">C\u00f3digo fonte do <a href=\"https:\/\/urutaudev.com.br\/index.php\/category\/tutorias\/\">tutorial <\/a>\u00a0da anima\u00e7\u00e3o em Javascript:<\/span><\/h3>\n<p><span style=\"font-family: arial, helvetica, sans-serif; font-size: 12pt;\"><strong><a href=\"https:\/\/github.com\/JrDevCJ\/javascript-apps\/tree\/main\/animacoes\/interactive-animated-eyes\" target=\"_blank\" rel=\"noopener\">C\u00f3digo Fonte<\/a><\/strong><\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; &nbsp; Introdu\u00e7\u00e3o Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e<\/p>\n","protected":false},"author":1,"featured_media":742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","footnotes":""},"categories":[14,5],"tags":[98,29,57,27,26,18],"class_list":["post-741","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-tutorias","tag-animacao","tag-css","tag-css-tutorial","tag-html","tag-javascript","tag-tutorias"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev<\/title>\n<meta name=\"description\" content=\"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev\" \/>\n<meta property=\"og:description\" content=\"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/\" \/>\n<meta property=\"og:site_name\" content=\"UrutauDev\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T23:35:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-02T23:53:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1131\" \/>\n\t<meta property=\"og:image:height\" content=\"632\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"C. Junior\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"C. Junior\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/\"},\"author\":{\"name\":\"C. Junior\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/person\\\/7e321618d23a158d5a42d5cfbdd99dd6\"},\"headline\":\"Anima\u00e7\u00e3o Interativa dos Olhos\",\"datePublished\":\"2024-12-02T23:35:24+00:00\",\"dateModified\":\"2024-12-02T23:53:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/\"},\"wordCount\":472,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/aaaaaaaaaaaaaaaaa.jpg\",\"keywords\":[\"anima\u00e7\u00e3o\",\"css\",\"css tutorial\",\"html\",\"javascript\",\"tutorias\"],\"articleSection\":[\"Javascript\",\"Tutorias\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/\",\"name\":\"Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/aaaaaaaaaaaaaaaaa.jpg\",\"datePublished\":\"2024-12-02T23:35:24+00:00\",\"dateModified\":\"2024-12-02T23:53:25+00:00\",\"description\":\"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#primaryimage\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/aaaaaaaaaaaaaaaaa.jpg\",\"contentUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/aaaaaaaaaaaaaaaaa.jpg\",\"width\":1131,\"height\":632,\"caption\":\"interactive animated eyes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/2024\\\/12\\\/02\\\/animacao-interativa-olhos\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/urutaudev.com.br\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Anima\u00e7\u00e3o Interativa dos Olhos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#website\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/\",\"name\":\"UrutauDev\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/urutaudev.com.br\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#organization\",\"name\":\"UrutauDev\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-urutau-dev-logo.png\",\"contentUrl\":\"https:\\\/\\\/urutaudev.com.br\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/cropped-urutau-dev-logo.png\",\"width\":100,\"height\":84,\"caption\":\"UrutauDev\"},\"image\":{\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/urutaudev.com.br\\\/#\\\/schema\\\/person\\\/7e321618d23a158d5a42d5cfbdd99dd6\",\"name\":\"C. Junior\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g\",\"caption\":\"C. Junior\"},\"sameAs\":[\"http:\\\/\\\/urutaudev.com.br\",\"instagram.com\\\/urutautec\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC8pDLb5GaYBAoWwQkIzrhRw\"],\"url\":\"https:\\\/\\\/urutaudev.com.br\\\/index.php\\\/author\\\/urutaudev-com-br\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev","description":"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/","og_locale":"en_US","og_type":"article","og_title":"Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev","og_description":"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.","og_url":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/","og_site_name":"UrutauDev","article_published_time":"2024-12-02T23:35:24+00:00","article_modified_time":"2024-12-02T23:53:25+00:00","og_image":[{"width":1131,"height":632,"url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg","type":"image\/jpeg"}],"author":"C. Junior","twitter_card":"summary_large_image","twitter_misc":{"Written by":"C. Junior","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#article","isPartOf":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/"},"author":{"name":"C. Junior","@id":"https:\/\/urutaudev.com.br\/#\/schema\/person\/7e321618d23a158d5a42d5cfbdd99dd6"},"headline":"Anima\u00e7\u00e3o Interativa dos Olhos","datePublished":"2024-12-02T23:35:24+00:00","dateModified":"2024-12-02T23:53:25+00:00","mainEntityOfPage":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/"},"wordCount":472,"commentCount":0,"publisher":{"@id":"https:\/\/urutaudev.com.br\/#organization"},"image":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#primaryimage"},"thumbnailUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg","keywords":["anima\u00e7\u00e3o","css","css tutorial","html","javascript","tutorias"],"articleSection":["Javascript","Tutorias"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/","url":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/","name":"Anima\u00e7\u00e3o Interativa dos Olhos - UrutauDev","isPartOf":{"@id":"https:\/\/urutaudev.com.br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#primaryimage"},"image":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#primaryimage"},"thumbnailUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg","datePublished":"2024-12-02T23:35:24+00:00","dateModified":"2024-12-02T23:53:25+00:00","description":"Neste tutorial,\u00a0 vou mostrar como criar uma Anima\u00e7\u00e3o Interativa dos Olhos usando na anima\u00e7\u00e3o apenas CSS e JavaScript.","breadcrumb":{"@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#primaryimage","url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg","contentUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2024\/12\/aaaaaaaaaaaaaaaaa.jpg","width":1131,"height":632,"caption":"interactive animated eyes"},{"@type":"BreadcrumbList","@id":"https:\/\/urutaudev.com.br\/index.php\/2024\/12\/02\/animacao-interativa-olhos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/urutaudev.com.br\/"},{"@type":"ListItem","position":2,"name":"Anima\u00e7\u00e3o Interativa dos Olhos"}]},{"@type":"WebSite","@id":"https:\/\/urutaudev.com.br\/#website","url":"https:\/\/urutaudev.com.br\/","name":"UrutauDev","description":"","publisher":{"@id":"https:\/\/urutaudev.com.br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/urutaudev.com.br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/urutaudev.com.br\/#organization","name":"UrutauDev","url":"https:\/\/urutaudev.com.br\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/urutaudev.com.br\/#\/schema\/logo\/image\/","url":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2023\/08\/cropped-urutau-dev-logo.png","contentUrl":"https:\/\/urutaudev.com.br\/wp-content\/uploads\/2023\/08\/cropped-urutau-dev-logo.png","width":100,"height":84,"caption":"UrutauDev"},"image":{"@id":"https:\/\/urutaudev.com.br\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/urutaudev.com.br\/#\/schema\/person\/7e321618d23a158d5a42d5cfbdd99dd6","name":"C. Junior","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e7df4c63012e2f6991311d4037bdc57752b996058cf1396747a7ab74e8ac032e?s=96&d=mm&r=g","caption":"C. Junior"},"sameAs":["http:\/\/urutaudev.com.br","instagram.com\/urutautec","https:\/\/www.youtube.com\/channel\/UC8pDLb5GaYBAoWwQkIzrhRw"],"url":"https:\/\/urutaudev.com.br\/index.php\/author\/urutaudev-com-br\/"}]}},"_links":{"self":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=741"}],"version-history":[{"count":4,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/741\/revisions"}],"predecessor-version":[{"id":747,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/posts\/741\/revisions\/747"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/media\/742"}],"wp:attachment":[{"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=741"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=741"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/urutaudev.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}