{"id":6229,"date":"2025-08-08T10:18:08","date_gmt":"2025-08-08T13:18:08","guid":{"rendered":"https:\/\/gustavocampelo.com.br\/blog\/?p=6229"},"modified":"2025-08-08T10:23:08","modified_gmt":"2025-08-08T13:23:08","slug":"aula3-minicurso","status":"publish","type":"post","link":"https:\/\/gustavocampelo.com.br\/blog\/aula3-minicurso\/","title":{"rendered":"Aula 3 Minicurso"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6229\" class=\"elementor elementor-6229\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-838611c e-con-full e-flex e-con e-child\" data-id=\"838611c\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c088739 elementor-widget elementor-widget-video\" data-id=\"c088739\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/EluhTRIrROo&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-64c7fe6 e-con-full e-flex e-con e-parent\" data-id=\"64c7fe6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f4ef8a elementor-widget elementor-widget-heading\" data-id=\"4f4ef8a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Container Pai<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76104cb elementor-widget elementor-widget-code-highlight\" data-id=\"76104cb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css \">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>.divPai{\r\n    height: 100vh;\r\n    perspective: 3000px;\r\n    perspective-origin: 50% 73%\r\n}\r\n\r\n.divObrigado{\r\n    transform: rotateX(90deg) scaleX(.44);\r\n    border-radius: 40px\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c190fc7 e-con-full e-flex e-con e-parent\" data-id=\"c190fc7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ae87370 elementor-widget elementor-widget-heading\" data-id=\"ae87370\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">C\u00f3digo JavaScript<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2bba180 elementor-widget elementor-widget-html\" data-id=\"2bba180\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-tomorrow  \">\r\n\t<pre data-line=\"\" class=\"highlight-height  language-javascript\">\r\n\t\t<code readonly=\"true\" class=\"  language-javascript\">\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js\"&gt;&lt;\/script&gt;\r\n\r\n&lt;script&gt;\r\n  \/\/ use a script tag or an external JS file\r\n  document.addEventListener(\"DOMContentLoaded\", (event) =&gt; {\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const linhaDoTempo = gsap.timeline({\r\n      scrollTrigger: {\r\n        trigger: \".divPai\",\r\n        start: \"top top\",\r\n        end: \"+=2000\",\r\n        pin: true,\r\n        scrub: 2,\r\n      },\r\n    });\r\n\r\n    linhaDoTempo.to(\".divGradient\", {\r\n      opacity: 0,\r\n      duration: 1,\r\n    });\r\n\r\n    linhaDoTempo.from(\r\n      \".divGradient2\",\r\n      {\r\n        opacity: 0,\r\n        duration: 1,\r\n      },\r\n      \"&lt;\"\r\n    );\r\n\r\n    linhaDoTempo.to(\r\n      \".tituloHero\",\r\n      {\r\n        opacity: 0,\r\n        duration: 1,\r\n      },\r\n      \"&lt;\"\r\n    );\r\n\r\n    const listaCards = document.querySelectorAll(\".card\");\r\n\r\n    listaCards.forEach((xuxa) =&gt; {\r\n      linhaDoTempo.from(xuxa, {\r\n        opacity: 0,\r\n        filter: \"blur(30px)\",\r\n        duration: 0.5,\r\n      });\r\n\r\n      linhaDoTempo.to(\r\n        xuxa,\r\n        {\r\n          opacity: 0,\r\n          filter: \"blur(30px)\",\r\n          duration: 0.5,\r\n        },\r\n        \"+=.5\"\r\n      );\r\n    });\r\n    \r\n    linhaDoTempo.to(\r\n      \".divGradient2\",\r\n      {\r\n        opacity: 0,\r\n        duration: 0.5,\r\n      },\r\n      \"-=.5\"\r\n    );\r\n    \r\n    linhaDoTempo.from(\r\n      \".divObrigado\",\r\n      {\r\n        opacity: 0,\r\n        duration: 0.5,\r\n      },\r\n      \"&lt;\"\r\n    );\r\n\r\n    linhaDoTempo.to(\r\n      \".divObrigado\",\r\n      {\r\n        scaleX: 1,\r\n        rotateX: 0,\r\n        top: 0,\r\n        borderRadius: 0,\r\n        duration: 1,\r\n      }\r\n    );\r\n  });\r\n&lt;\/script&gt;\r\n\r\n\t\t<\/code>\r\n\t<\/pre>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Container Pai .divPai{ height: 100vh; perspective: 3000px; perspective-origin: 50% 73% } .divObrigado{ transform: rotateX(90deg) scaleX(.44); border-radius: 40px } C\u00f3digo JavaScript &lt;script src=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/gsap.min.js&#8221;&gt;&lt;\/script&gt; &lt;script src=&#8221;https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.13.0\/dist\/ScrollTrigger.min.js&#8221;&gt;&lt;\/script&gt; &lt;script&gt; \/\/ use a script tag or an external JS file document.addEventListener(&#8220;DOMContentLoaded&#8221;, (event) =&gt; { gsap.registerPlugin(ScrollTrigger); const linhaDoTempo = gsap.timeline({ scrollTrigger: { trigger: &#8220;.divPai&#8221;, start: &#8220;top top&#8221;, end: &#8220;+=2000&#8221;, pin: true, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6225,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6229","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts\/6229","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/comments?post=6229"}],"version-history":[{"count":0,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts\/6229\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media\/6225"}],"wp:attachment":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=6229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=6229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=6229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}