{"id":963,"date":"2025-06-25T09:50:08","date_gmt":"2025-06-25T09:50:08","guid":{"rendered":"https:\/\/animacio.teszt.website\/?page_id=963"},"modified":"2025-06-25T11:11:16","modified_gmt":"2025-06-25T11:11:16","slug":"horizontalis-scroll","status":"publish","type":"page","link":"https:\/\/animacio.teszt.website\/en\/horizontalis-scroll\/","title":{"rendered":"Horizont\u00e1lis scroll"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"963\" class=\"elementor elementor-963\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0abe79 e-con-full e-flex e-con e-parent\" data-id=\"c0abe79\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a08dcf5 elementor-widget elementor-widget-heading\" data-id=\"a08dcf5\" 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<h1 class=\"elementor-heading-title elementor-size-default\">Horizont\u00e1lis scroll<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-565564b elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"565564b\" data-element_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>Vertik\u00e1lis szekci\u00f3val indul az oldal, majd a m\u00e1sodikt\u00f3l horizont\u00e1lisra v\u00e1lt \u00e9s a v\u00e9g\u00e9n \u00fajra egy vertik\u00e1lis j\u00f6n. Tervez\u00e9sn\u00e9l figyelni kell, hogy nem szabad teljesen horizont\u00e1lis v\u00e1szonban gondolkodni, mert a b\u00f6ng\u00e9sz\u0151k nem kezelik. A szerkeszt\u00e9s sor\u00e1n ugyan\u00fagy vertik\u00e1lisan kell k\u00e9sz\u00edteni, majd egy scripttel kisz\u00e1m\u00edtva egym\u00e1s mell\u00e9 kell tenni a szekci\u00f3kat. Nem k\u00f6nny\u0171 norm\u00e1lis reszponz\u00edv oldalt k\u00e9sz\u00edteni \u00edgy! \u00c9rdemesebb csak egy r\u00e9szre alkalmazni nem egy teljes oldalon.<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\">\u00a0<\/div>\t\t\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-ef5a343 e-con-full horizontal-parent e-flex e-con e-parent\" data-id=\"ef5a343\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-3556c8b e-con-full horizontal-child e-flex e-con e-child\" data-id=\"3556c8b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-926436a elementor-widget elementor-widget-heading\" data-id=\"926436a\" 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\">1. Szekci\u00f3<\/h2>\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-9ec9bab e-con-full horizontal-child e-flex e-con e-child\" data-id=\"9ec9bab\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-085b5c7 elementor-widget elementor-widget-heading\" data-id=\"085b5c7\" 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\">Szekci\u00f3 2<\/h2>\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-65f2b32 e-con-full horizontal-child e-flex e-con e-child\" data-id=\"65f2b32\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-639c05f elementor-widget elementor-widget-heading\" data-id=\"639c05f\" 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\">Szekci\u00f3 3<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-95d856c elementor-widget elementor-widget-html\" data-id=\"95d856c\" 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<script>\r\n\r\ngsap.registerPlugin(ScrollTrigger);\r\n\r\nlet hcontainer = gsap.utils.toArray(\".horizontal-child\");\r\nlet horizontalParent = document.querySelector(\".horizontal-parent\");\r\n\r\nif (horizontalParent) {\r\n  gsap.to(hcontainer, {\r\n    xPercent: -100 * (hcontainer.length - 1),\r\n    ease: \"none\",\r\n    scrollTrigger: {\r\n      trigger: horizontalParent,\r\n      pin: true,\r\n      scrub: 1,\r\n      \/\/start: \"+100 top\",\r\n      end: () => `+=${horizontalParent.scrollWidth - window.innerWidth + 200}`,\r\n      invalidateOnRefresh: true,\r\n      \/\/markers: true,\r\n    }\r\n  });\r\n}\r\n\r\n<\/script>\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<div class=\"elementor-element elementor-element-ac2abcc e-con-full e-flex e-con e-parent\" data-id=\"ac2abcc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fb4726 elementor-widget elementor-widget-heading\" data-id=\"8fb4726\" 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\">Vertik\u00e1lis szekci\u00f3<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Horizont\u00e1lis scroll Vertik\u00e1lis szekci\u00f3val indul az oldal, majd a m\u00e1sodikt\u00f3l horizont\u00e1lisra v\u00e1lt \u00e9s a v\u00e9g\u00e9n \u00fajra egy vertik\u00e1lis j\u00f6n. Tervez\u00e9sn\u00e9l figyelni kell, hogy nem szabad teljesen horizont\u00e1lis v\u00e1szonban gondolkodni, mert a b\u00f6ng\u00e9sz\u0151k nem kezelik. A szerkeszt\u00e9s sor\u00e1n ugyan\u00fagy vertik\u00e1lisan kell k\u00e9sz\u00edteni, majd egy scripttel kisz\u00e1m\u00edtva egym\u00e1s mell\u00e9 kell tenni a szekci\u00f3kat. Nem k\u00f6nny\u0171 norm\u00e1lis reszponz\u00edv [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-963","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/comments?post=963"}],"version-history":[{"count":217,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/963\/revisions"}],"predecessor-version":[{"id":1183,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/963\/revisions\/1183"}],"wp:attachment":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/media?parent=963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}