{"id":258,"date":"2016-09-05T06:56:37","date_gmt":"2016-09-05T09:56:37","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=258"},"modified":"2016-09-26T14:21:19","modified_gmt":"2016-09-26T17:21:19","slug":"animacao-durante-o-scroll","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/animacao-durante-o-scroll\/","title":{"rendered":"Anima\u00e7\u00e3o Durante o Scroll"},"content":{"rendered":"<img decoding=\"async\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/09\/animar-durante-scroll.png\" alt=\"Animar durante o scroll\" \/>\n<p>Eu acreditava ser super complexo criar aquelas anima\u00e7\u00f5es de introdu\u00e7\u00e3o de conte\u00fado nos sites. Procurava por plugins, pesquisava por nomes diferentes e nada conseguia me mostrar de forma simples como fazer as mesmas.<\/p>\n<p>Veja o exemplo abaixo:<\/p>\n<p data-height=\"380\" data-theme-id=\"24256\" data-slug-hash=\"vXEmQJ\" data-default-tab=\"js,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/vXEmQJ\/\">animacao-scroll<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Agora que compreendi a l\u00f3gica, ficou tudo mais simples e claro. Voc\u00ea vai precisar das seguintes fun\u00e7\u00f5es:<\/p>\n<ul>\n<li>1 &#8211; Identificar quando o usu\u00e1rio utiliza o scroll<\/li>\n<li>2 &#8211; Calcular a dist\u00e2ncia entre o topo da p\u00e1gina e o scroll<\/li>\n<li>3 &#8211; Calcular a dist\u00e2ncia entre o topo da p\u00e1gina e o elemento que deseja animar<\/li>\n<li>4 &#8211; Comparar as duas dist\u00e2ncias anteriores<\/li>\n<li>5 &#8211; Adicionar uma classe com css animation ou transition ao elemento animado<\/li>\n<\/ul>\n<p>Toda a l\u00f3gica ser\u00e1 criada com JavaScript. Eu vou usar a biblioteca de fun\u00e7\u00f5es jQuery para facilitar a explica\u00e7\u00e3o e o desenvolvimento. Ent\u00e3o n\u00e3o se esque\u00e7a de adicionar o jQuery antes de adicionar o c\u00f3digo abaixo.<\/p>\n<pre><code class=\"language-markup\">\nvar root = document.documentElement;\nroot.className += ' js';\n\nfunction boxTop(idBox) {\n  var boxOffset = $(idBox).offset().top;\n  return boxOffset;\n}\n\n$(document).ready(function() {\n  var $target = $('.anime'),\n      animationClass = 'anime-init',\n      windowHeight = $(window).height(),\n      offset = windowHeight - (windowHeight \/ 4);\n\n  function animeScroll() {\n    var documentTop = $(document).scrollTop();\n    $target.each(function() {\n      if (documentTop > boxTop(this) - offset) {\n        $(this).addClass(animationClass);\n      } else {\n        $(this).removeClass(animationClass);\n      }\n    });\n  }\n  animeScroll();\n\n  $(document).scroll(function() {\n    animeScroll();\n  });\n});\n<\/code><\/pre>\n<p>N\u00e3o fique com medo do c\u00f3digo acima. Ele est\u00e1 um pouco mais complexo por ter sido feito pensando na reutiliza\u00e7\u00e3o. Isso significa que voc\u00ea n\u00e3o vai precisar escrever mais nada, independente da quantidade de elementos que voc\u00ea deseja animar.<\/p>\n<p>Agora vamos por partes:<\/p>\n<p>1 &#8211; O c\u00f3digo abaixo serve apenas para adicionarmos uma classe .js ao &lt;html&#62; do site. Assim podemos estilizar o conte\u00fado do nosso site sabendo que o JavaScript estar\u00e1 ativo. Dessa forma, caso o cliente esteja com o JS desativado, o conte\u00fado n\u00e3o ser\u00e1 animado por\u00e9m n\u00e3o ficar\u00e1 escondido para o usu\u00e1rio.<\/p>\n<pre><code class=\"language-javascript\">\nvar root = document.documentElement;\nroot.className += ' js';\n<\/code><\/pre>\n<p>2 &#8211; Agora criamos uma fun\u00e7\u00e3o chamada boxTop. Essa fun\u00e7\u00e3o \u00e9 respons\u00e1vel por calcular a dist\u00e2ncia entre cada elemento que adicionarmos a classe anime e o topo da p\u00e1gina.<\/p>\n<pre><code class=\"language-javascript\">\nfunction boxTop(idBox) {\n  \/\/ o .offset() retorna os valores de left e top dentro do\n  \/\/ elemento que selecionarmos em $(idBox). Como queremos\n  \/\/ o topo usamos ao final o .top\n  var boxOffset = $(idBox).offset().top;\n  return boxOffset;\n}\n<\/code><\/pre>\n<p>3 &#8211; O pr\u00f3ximo passo \u00e9 identificarmos se o documento j\u00e1 est\u00e1 pronto, $(document).ready(). Dentro dele iniciamos uma fun\u00e7\u00e3o. A primeira parte da fun\u00e7\u00e3o \u00e9 a defini\u00e7\u00e3o das vari\u00e1veis que vamos utilizar para definir a anima\u00e7\u00e3o.<\/p>\n<pre><code class=\"language-javascript\">\n$(document).ready(function() {\n      \/\/ $target define qual elemento vamos animar. Neste caso, todos aqueles que tiverem a classe .anime\n  var $target = $('.anime'),\n      \/\/ animationClass \u00e9 a classe com as propriedades da anima\u00e7\u00e3o que ser\u00e1 adicionada durante o scroll\n      animationClass = 'anime-init',\n      \/\/ windowHeight define a altura total da janela do browser. Isso serve para garantirmos que a\n      \/\/ tela n\u00e3o fique em branco. Este valor ser\u00e1 utilizado junto a compara\u00e7\u00e3o entre o elemento e o scroll\n      windowHeight = $(window).height(),\n      offset = windowHeight - (windowHeight \/ 4);\n<\/code><\/pre>\n<p>4 &#8211; Essa \u00e9 a fun\u00e7\u00e3o animeScroll(). Ela que ser\u00e1 respons\u00e1vel por fazer o c\u00e1lculo final e definir se a classe anime-init deve ser adicionada ou n\u00e3o no elemento.<\/p>\n<pre><code class=\"language-javascript\">\nfunction animeScroll() {\n  \/\/ documentTop vai pegar a dist\u00e2ncia do total do scroll e o topo da p\u00e1gina.\n  \/\/ Isso em rela\u00e7\u00e3o ao $(document).\n  var documentTop = $(document).scrollTop();\n  \/\/ $target \u00e9 a vari\u00e1vel que contem a classe que ser\u00e1 animada. Queremos verificar cada uma\n  \/\/ delas por isso temos o .each(), para selecionarmos cada uma individualmente.\n  $target.each(function() {\n    \/\/ Essa \u00e9 a principal m\u00e1gica, se o total de documentTop, for maior que boxTop(this) - offset,\n    \/\/ adicione a classe ao elemento. Estamos se referindo ao elemento $target como this.\n    if (documentTop > boxTop(this) - offset) {\n      $(this).addClass(animationClass);\n    \/\/ Caso contr\u00e1rio, remova a classe. Voc\u00ea pode deletar todo o else,\n    \/\/ caso deseje que a anima\u00e7\u00e3o ocorra uma \u00fanica vez.\n    } else {\n      $(this).removeClass(animationClass);\n    }\n  });\n}\n<\/code><\/pre>\n<p>5 &#8211; Por \u00faltimo, mas n\u00e3o menos importante, iniciamos a fun\u00e7\u00e3o animeScroll() mesmo antes do usu\u00e1rio der scroll. Isso serve para ativar aqueles elementos que j\u00e1 cabem na tela inicial do usu\u00e1rio (evitando assim um grande espa\u00e7o vazio). Ap\u00f3s isso criamos o evento $(document).scroll() que ir\u00e1 disparar novamente a fun\u00e7\u00e3o animeScroll() toda vez que o usu\u00e1rio der scroll na p\u00e1gina.<\/p>\n<pre><code class=\"language-javascript\">\n  \/\/ Ativa a fun\u00e7\u00e3o animeScroll()\n  animeScroll();\n  \/\/ Sempre que o usu\u00e1rio der scroll, ative novamente a fun\u00e7\u00e3o animeScroll()\n  $(document).scroll(function() {\n    animeScroll();\n  });\n});\n<\/code><\/pre>\n<p>Se voc\u00ea \u00e9 totalmente novo em JS, uma parte ou outra pode parecer m\u00e1gica. Mas fica de olho que vou lan\u00e7ar um curso focado em quem n\u00e3o sabe nada, para que ao final do curso voc\u00ea compreenda 100% o c\u00f3digo acima.<\/p>\n<p>Abaixo tem o c\u00f3digo completo, com tudo funcionando e 100% comentado.<\/p>\n<p data-height=\"380\" data-theme-id=\"24256\" data-slug-hash=\"EgaXvW\" data-default-tab=\"js,result\" data-user=\"origamid\" data-embed-version=\"2\" data-editable=\"true\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/EgaXvW\/\">animacao-scroll-comentada<\/a> by Andr\u00e9 | Origamid (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eu acreditava ser super complexo criar aquelas anima\u00e7\u00f5es de introdu\u00e7\u00e3o de conte\u00fado nos sites. Procurava por plugins, pesquisava por nomes diferentes e nada conseguia me mostrar de forma simples como fazer as mesmas. Veja o exemplo abaixo: See the Pen animacao-scroll by Andr\u00e9 | Origamid (@origamid) on CodePen. Agora que compreendi a l\u00f3gica, ficou tudo [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/258"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":18,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"predecessor-version":[{"id":314,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/258\/revisions\/314"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}