{"id":6181,"date":"2025-05-28T16:45:37","date_gmt":"2025-05-28T19:45:37","guid":{"rendered":"https:\/\/gustavocampelo.com.br\/blog\/?p=6181"},"modified":"2025-05-29T17:21:51","modified_gmt":"2025-05-29T20:21:51","slug":"carrossel-imagens-position","status":"publish","type":"post","link":"https:\/\/gustavocampelo.com.br\/blog\/carrossel-imagens-position\/","title":{"rendered":"Carrossel Imagens Position"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"6181\" class=\"elementor elementor-6181\" 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\\\/1WrJr39YQIw&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-45a3eef e-con-full e-flex e-con e-parent\" data-id=\"45a3eef\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ffabe97 elementor-widget elementor-widget-heading\" data-id=\"ffabe97\" 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-e0e1203 elementor-widget elementor-widget-html\" data-id=\"e0e1203\" 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\r\n    document.addEventListener(\"DOMContentLoaded\", (event) =&gt; {\r\n        \r\n        const tamanhoSlider = document.querySelector(\".slider\").offsetWidth;\r\n        \r\n        console.log(tamanhoSlider);\r\n        \r\n        gsap.registerPlugin(ScrollTrigger)\r\n        \r\n        const tl = gsap.timeline({\r\n            scrollTrigger: {\r\n                trigger: \".containerPai\",\r\n                pin: true,\r\n                start: \"top top\",\r\n                end: \"+=2000\",\r\n                scrub: 2\r\n            }\r\n        });\r\n        \r\n        tl.to(\".slider\", {\r\n            x: -1 * tamanhoSlider,\r\n            duration: 2\r\n        });\r\n        \r\n        tl.to(\".slider img\", {\r\n            objectPosition: \"0% center\",\r\n            duration: 2\r\n        }, \"&lt;\");\r\n        \r\n        tl.from(\".titulo1\", {\r\n            opacity: 0,\r\n            duration: .5\r\n        }, \"-=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>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; document.addEventListener(&#8220;DOMContentLoaded&#8221;, (event) =&gt; { const tamanhoSlider = document.querySelector(&#8220;.slider&#8221;).offsetWidth; console.log(tamanhoSlider); gsap.registerPlugin(ScrollTrigger) const tl = gsap.timeline({ scrollTrigger: { trigger: &#8220;.containerPai&#8221;, pin: true, start: &#8220;top top&#8221;, end: &#8220;+=2000&#8221;, scrub: 2 } }); tl.to(&#8220;.slider&#8221;, { x: -1 * tamanhoSlider, duration: 2 }); tl.to(&#8220;.slider img&#8221;, { objectPosition: &#8220;0% center&#8221;, duration: 2 }, &#8220;&lt;&#8220;); [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6182,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6181","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\/6181","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=6181"}],"version-history":[{"count":0,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/posts\/6181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media\/6182"}],"wp:attachment":[{"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/media?parent=6181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/categories?post=6181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gustavocampelo.com.br\/blog\/wp-json\/wp\/v2\/tags?post=6181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}