{"id":5554,"date":"2023-12-28T04:49:55","date_gmt":"2023-12-28T04:49:55","guid":{"rendered":"https:\/\/graphica.pe\/parallax-effect-between-sections\/"},"modified":"2024-07-11T20:55:42","modified_gmt":"2024-07-11T20:55:42","slug":"parallax-effect-between-sections","status":"publish","type":"post","link":"https:\/\/graphica.pe\/en\/parallax-effect-between-sections\/","title":{"rendered":"Parallax effect between sections"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"5554\" class=\"elementor elementor-5554 elementor-4604\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-11d9b5e e-flex e-con-boxed e-con e-parent\" data-id=\"11d9b5e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f20e6ff elementor-widget elementor-widget-text-editor\" data-id=\"f20e6ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Add libraries:<\/p>\n<ul>\n<li>Js gsap library<\/li>\n<li>ScrollTriger plugin<\/li>\n<\/ul>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-796a213 elementor-widget elementor-widget-code-highlight\" data-id=\"796a213\" data-element_type=\"widget\" data-e-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-twilight copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const trigger = 'html'; \/\/ El elemento scrolleable, puede ser html o un pop up por ejemplo\r\nconst repeaterClass = '.more-service__repeater .jet-listing-grid__items .jet-listing-grid__item:not(:last-child)'; \/\/ Los hermanos, deben tener vh 100% y no se debe seleccionar el \u00faltimo\r\nscrollSectionParallax(repeaterClass)\r\n\r\nfunction scrollSectionParallax(repeaterClass, trigger) {\r\n\t\tgsap.registerPlugin(ScrollTrigger);\r\n\t\tgsap.utils.toArray(repeaterClass).forEach((section) => {\r\n\t\t\tScrollTrigger.create({\r\n\t\t\t  \ttrigger: section,\r\n\t\t\t\t\tstart: \"top top\",\r\n\t\t\t\t\tpin: true,\r\n\t\t\t\t\tpinSpacing: false,\r\n\t\t\t\t\tscroller: trigger\r\n\t\t\t});\r\n\t\t});\r\n\t}<\/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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add libraries: Js gsap library ScrollTriger plugin const trigger = &#8216;html&#8217;; \/\/ El elemento scrolleable, puede ser html o un pop up por ejemplo const repeaterClass = &#8216;.more-service__repeater .jet-listing-grid__items .jet-listing-grid__item:not(:last-child)&#8217;; \/\/ Los hermanos, deben tener vh 100% y no se debe seleccionar el \u00faltimo scrollSectionParallax(repeaterClass) function scrollSectionParallax(repeaterClass, trigger) { gsap.registerPlugin(ScrollTrigger); gsap.utils.toArray(repeaterClass).forEach((section) => { ScrollTrigger.create({ trigger: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-5554","post","type-post","status-publish","format-standard","hentry"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5554","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/comments?post=5554"}],"version-history":[{"count":0,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/posts\/5554\/revisions"}],"wp:attachment":[{"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/media?parent=5554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/categories?post=5554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/graphica.pe\/en\/wp-json\/wp\/v2\/tags?post=5554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}