{"id":3305,"date":"2025-07-25T17:55:47","date_gmt":"2025-07-25T15:55:47","guid":{"rendered":"https:\/\/crehub.it\/?page_id=3305"},"modified":"2025-07-29T14:02:28","modified_gmt":"2025-07-29T12:02:28","slug":"bozza3","status":"publish","type":"page","link":"https:\/\/crehub.it\/?page_id=3305","title":{"rendered":"bozza3"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3305\" class=\"elementor elementor-3305\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-95c19b0 e-con-full e-flex e-con e-parent\" data-id=\"95c19b0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a19baf elementor-widget elementor-widget-heading\" data-id=\"4a19baf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">HEADER1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d455ce elementor-widget elementor-widget-spacer\" data-id=\"8d455ce\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81edb4c elementor-widget elementor-widget-heading\" data-id=\"81edb4c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Aggiungi qui il testo dell\u2019intestazione<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-82900f5 e-con-full e-flex e-con e-parent\" data-id=\"82900f5\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df77adb elementor-widget elementor-widget-spacer\" data-id=\"df77adb\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eb39573 elementor-widget elementor-widget-html\" data-id=\"eb39573\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"horizontal-section\">\r\n  <div class=\"horizontal-pin\">\r\n    <div class=\"horizontal-track\">\r\n      <div class=\"slide\">Slide 1<\/div>\r\n      <div class=\"slide\">Slide 2<\/div>\r\n      <div class=\"slide\">Slide 3<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/section>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-795244e e-con-full e-flex e-con e-parent\" data-id=\"795244e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d271090 elementor-widget elementor-widget-heading\" data-id=\"d271090\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">END<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1952f35 elementor-widget elementor-widget-html\" data-id=\"1952f35\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.horizontal-section {\n  height: 300vh; \/* 100vh \u00d7 numero di slide *\/\n  position: relative;\n}\n\n.horizontal-pin {\n  position: sticky;\n  top: 0;\n  height: 100vh;\n  overflow: hidden;\n}\n\n.horizontal-track {\n  display: flex;\n  height: 100%;\n  width: 300vw; \/* 100vw \u00d7 numero di slide *\/\n  transition: transform 0.1s linear;\n}\n\n.slide {\n  flex: 0 0 100vw;\n  height: 100vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 3rem;\n  background: #f0f0f0;\n  border-right: 2px solid #ccc;\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba80159 elementor-widget elementor-widget-html\" data-id=\"ba80159\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const section = document.querySelector(\".horizontal-section\");\r\n  const track = document.querySelector(\".horizontal-track\");\r\n  const slides = document.querySelectorAll(\".slide\");\r\n  const slidesCount = slides.length;\r\n\r\n  \/\/ Scroll verticale totale da assegnare al movimento orizzontale\r\n  const totalScroll = window.innerHeight * slidesCount;\r\n\r\n  window.addEventListener(\"scroll\", () => {\r\n    const rect = section.getBoundingClientRect();\r\n    const sectionTop = section.offsetTop;\r\n    const scrollY = window.scrollY;\r\n\r\n    \/\/ Definisci l'inizio esatto (quando la sezione \u00e8 completamente nel viewport)\r\n    const startScroll = sectionTop;\r\n    const endScroll = sectionTop + totalScroll - window.innerHeight;\r\n\r\n    \/\/ Se sei nella sezione orizzontale\r\n    if (scrollY >= startScroll && scrollY <= endScroll) {\r\n      const scrollProgress = (scrollY - startScroll) \/ (totalScroll - window.innerHeight);\r\n      const translateX = scrollProgress * (slidesCount - 1) * 100;\r\n      track.style.transform = `translateX(-${translateX}vw)`;\r\n    }\r\n\r\n    \/\/ Prima della sezione: resetta la posizione\r\n    if (scrollY < startScroll) {\r\n      track.style.transform = `translateX(0vw)`;\r\n    }\r\n\r\n    \/\/ Dopo la sezione: fissa all\u2019ultima slide\r\n    if (scrollY > endScroll) {\r\n      track.style.transform = `translateX(-${(slidesCount - 1) * 100}vw)`;\r\n    }\r\n  });\r\n});\r\n<\/script>\r\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>HEADER1 Aggiungi qui il testo dell\u2019intestazione Slide 1 Slide 2 Slide 3 END<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-3305","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/pages\/3305","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crehub.it\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3305"}],"version-history":[{"count":64,"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/pages\/3305\/revisions"}],"predecessor-version":[{"id":3371,"href":"https:\/\/crehub.it\/index.php?rest_route=\/wp\/v2\/pages\/3305\/revisions\/3371"}],"wp:attachment":[{"href":"https:\/\/crehub.it\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3305"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}