{"id":703,"date":"2025-06-24T13:47:21","date_gmt":"2025-06-24T13:47:21","guid":{"rendered":"https:\/\/animacio.teszt.website\/?p=703"},"modified":"2025-06-24T14:19:34","modified_gmt":"2025-06-24T14:19:34","slug":"kep-maszk","status":"publish","type":"post","link":"https:\/\/animacio.teszt.website\/en\/kep-maszk\/","title":{"rendered":"k\u00e9p maszk"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"703\" class=\"elementor elementor-703\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8a58ac e-con-full services-bg elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"d8a58ac\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b80288 elementor-widget elementor-widget-heading\" data-id=\"5b80288\" 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\">Maszkolt k\u00e9p anim\u00e1ci\u00f3<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4fbf519 elementor-widget elementor-widget-text-editor\" data-id=\"4fbf519\" 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>A k\u00e9p b\u00e1rmelyik r\u00e9sz\u00e9re tehet\u0151 a maszk \u00e9s b\u00e1rmilyen forma is lehet, csak ki kell sz\u00e1m\u00edtani!<\/p>\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-e2277be e-con-full growingpin e-flex e-con e-parent\" data-id=\"e2277be\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d76f427 e-con-full e-flex e-con e-child\" data-id=\"d76f427\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea1753b elementor-widget__width-initial elementor-widget-tablet__width-initial szoveg elementor-widget elementor-widget-text-editor\" data-id=\"ea1753b\" 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><strong>Lorem Ipsum<\/strong> is simply dummy text of the printing.<\/p>\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-ac65d32 e-con-full growingpic e-flex e-con e-child\" data-id=\"ac65d32\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-0055968 e-con-full e-flex e-con e-child\" data-id=\"0055968\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6305a59 elementor-widget__width-initial elementor-widget-tablet__width-inherit growszoveg elementor-widget elementor-widget-heading\" data-id=\"6305a59\" 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\">Lorem Ipsum is simply dummy text of the printing and<br> <span style=\"color:#d1ffff\"> typesetting industry.<br>Lorem Ipsum<\/span><\/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-a2231d8 e-con-full e-flex e-con e-child\" data-id=\"a2231d8\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23843bc elementor-widget__width-initial elementor-widget-tablet__width-inherit growszoveg elementor-widget elementor-widget-heading\" data-id=\"23843bc\" 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\">Lorem Ipsum is simply <br>dummy text.<\/h2>\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\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd2a046 e-flex e-con-boxed e-con e-parent\" data-id=\"fd2a046\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ce61a01 elementor-widget elementor-widget-html\" data-id=\"ce61a01\" 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\n<script>\n    \/\/novekvo_kep_minden\nwindow.addEventListener('load', function () {\nlet growp = gsap.timeline({\n\tscrollTrigger: {\n        trigger: '.growingpin',\n        pin: true, \n        start: 'center center', \n        end: 'bottom top+=15%',\n        scrub: true, \n\t\t\/\/markers: true,\n        \n    }\n});\ngrowp.to ('.growingpin', {opacity:1});\n\ngsap.to(\".growingpic\", {\n\n  clipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\", \n  duration: 2,\n  ease: \"none\",\n  scrollTrigger: {\n    trigger: \".growingpic\",\n    start: \"center center\",\n    end: \"bottom center\",\n    scrub: 1,\n   \/\/ markers: true,\n\t\/\/pin: \".growingpin\"\n  }\n});\n\/\/window.addEventListener('load', function () {\n\/\/ kepen megjeleno szoveg\n\/\/window.addEventListener('load', function () {\n \nconst sorG = new SplitType('.growszoveg h2', { types: 'lines' });\nconst textG = new SplitType('.growszoveg', { types: 'words' });\n\nconst szovegG = gsap.utils.toArray('.growszoveg .line');\n\nszovegG.forEach((element1G) => {\n\t\n    const elemek1G = element1G.querySelectorAll('.growszoveg .word');\n    gsap.fromTo(\n  elemek1G,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\tfilter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\tfilter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: \".growingpic\",\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom center',\n\t\/\/scrub: true\n\t\n  }\n     \n  }\n)\n\n});\n\n\n\/\/});\n\/\/---------------\n\/\/Header megjelenitesek\n\/\/window.addEventListener('load', function () {\n \n\n\n\/\/----------------------------\n\n\n\/\/});\n\n\/\/Szolgaltatasok horizontal\nconst mediaQuery = window.matchMedia('(min-width: 1024px)')\n\nfunction handleTabletChange(e) {\n  \/\/ Check if the media query is true\n  if (e.matches) {\n   \n\/\/ innen gsap\t  \nlet hp = gsap.timeline({\n\tscrollTrigger: {\n        trigger: '.horipin',\n        pin: true, \n        start: 'center center', \n        end: 'bottom top',\n        scrub: true, \n\t\t\/\/markers: true,\n        \n    }\n});\nlet horistart = gsap.timeline({\n\tscrollTrigger: {\n        trigger: '.horipin',\n        \/\/pin: true, \n        start: '-200 center', \n        end: 'bottom top',\n        scrub: true, \n\t\t\/\/markers: true,\n        \n    }\n});\nhp.to ('.horipin', {opacity:1});\nhoristart.to ('.hori', {x: \"-100%\"});\n\t  \n\/\/eddig GSAP\n    \n  }\n}\n\n\/\/ Register event listener\nmediaQuery.addListener(handleTabletChange)\n\n\/\/ Initial check\nhandleTabletChange(mediaQuery)\n\n\/\/----------Hori vege----\n\/\/kor a heroban\nconst sor = new SplitType('.text1 h2', { types: 'lines' });\nconst sorh1 = new SplitType('.text1 h1', { types: 'lines' });\nconst sorh3 = new SplitType('.text1 h3', { types: 'lines' });\n\/\/const sorh4 = new SplitType('.text1 h4', { types: 'lines' });\n\/\/const sorh5 = new SplitType('.text1 h5', { types: 'lines' });\n\/\/const sorh6 = new SplitType('.text1 h6', { types: 'lines' });\nconst text = new SplitType('.text1', { types: 'words' });\n\nconst szoveg = gsap.utils.toArray('.text1 .line');\n\nszoveg.forEach((element1) => {\n\t\n    const elemek1 = element1.querySelectorAll('.text1 .word');\n    gsap.fromTo(\n  elemek1,\n  { \n    \/\/x: -5,\n    \/\/y: 50,\n\tfilter: \"blur(15px)\",\n\t\/\/scale: 1.1,\n    opacity: 0\n  },\n  {\n    \/\/x: 0,\n    \/\/y: 0,\n\tfilter: \"blur(0px)\",\n\t\/\/scale: 1,\n    opacity: 1,\n    stagger: 0.15,\n    duration: 1.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: element1,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'bottom bottom',\n\t\n  }\n     \n  }\n)\n\n});\n \n\/\/ szoveg\n  \nconst sorP = new SplitType('.szoveg p', { types: 'lines' });\nconst textP = new SplitType('.szoveg', { types: 'words' });\n\nconst szovegP = gsap.utils.toArray('.szoveg .line');\n\nszovegP.forEach((element1P) => {\n    \n    const elemek1P = element1P.querySelectorAll('.szoveg .word');\n    gsap.fromTo(\n  elemek1P,\n  { \n    x: -5,\n    y: 50,\n    opacity: 0\n  },\n  {\n    x: 0,\n    y: 0,\n    opacity: 1,\n    stagger: 0.02,\n    duration: 0.75,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: element1P,\n    \/\/markers: true,\n    toggleActions: \"restart none resume reverse\",\n    start: 'top bottom',\n\n  }\n      \n  }\n)\n\n});\n\/\/});\n\/\/IMG reveal\nlet revealContainers = document.querySelectorAll(\".reveal\");\n\nrevealContainers.forEach((container) => {\n  let image = container.querySelector(\"img\");\n  let tl = gsap.timeline({\n    scrollTrigger: {\n      trigger: container,\n\t  \/*markers: true,*\/\n      toggleActions: \"restart none none reset\"\n    }\n  });\n\n  tl.set(container, { autoAlpha: 1 });\n  tl.from(container, 1.5, {\n    xPercent: -100,\n    ease: Power2.out\n  });\n  tl.from(image, 1.5, {\n    xPercent: 100,\n    scale: 1.3,\n    delay: -1.5,\n    ease: Power2.out\n  });\n});\n\/\/-----------------\n\/\/-----------------------------\n\/\/Fadeup\nconst FadeUp = gsap.utils.toArray('.fadeup');\n\nFadeUp.forEach((elemFu) => {\n    gsap.fromTo(\n  elemFu,\n  { \n    \n    y: 150,\n    opacity: 0\n  },\n  {\n    y: 0,\n    opacity: 1,\n    stagger: 0.02,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elemFu,\n    \/*markers: true,*\/\n    toggleActions: \"restart none resume reverse\",\n    start: 'top bottom',\n\n  }\n      \n  }\n)\n\n});\n\/\/Fadeup50\nconst FadeUp5 = gsap.utils.toArray('.fadeup5');\n\nFadeUp5.forEach((elemFu5) => {\n    \n    gsap.fromTo(\n  elemFu5,\n  { \n    \n    y: 50,\n    opacity: 0\n  },\n  {\n    y: 0,\n    opacity: 1,\n    stagger: 0.02,\n    duration: 1.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elemFu5,\n    \/*markers: true,*\/\n    toggleActions: \"restart none resume reverse\",\n    start: 'top bottom',\n\n  }\n      \n  }\n)\n\n});\n\/\/background change\n     \/\/3 kikapcs\ngsap.fromTo(\".elementor-26\", {\n\tbackgroundColor: \"#fff\"},\n\t\/\/backgroundColor: \"linear-gradient(310deg, #fff 20%, #fff 100%)\",},\n\t\/\/backgroundImage: \"linear-gradient(310deg, #fff 20%, #fff 100%)\",},\n\t\t\t{\n  scrollTrigger: {\n    trigger: \".bgchangeblue\",\n    \n    \n    \/\/scrub: true,\n    start: \"center center\",\n\t  end: \"center center\",\n    toggleActions: \"restart none resume reverse\",\n    \/\/markers: true\n  },\n  \n  backgroundColor: \"#173370\",\n\t\/\/backgroundImage: \"linear-gradient(310deg, #272727 20%, #0F09AE 100%)\",\n  ease: \"none\",\n  duration: 0.3\n  \n});\n\n\/*\ngsap.fromTo(\".elementor-26\", {\n\tbackgroundColor: \"#0F09AE\",\n\t\/\/backgroundImage: \"linear-gradient(310deg, #272727 20%, #0F09AE 100%)\",\n\timmediateRender: false},{\n  scrollTrigger: {\n    trigger: \".bgchangewhite\",\n    \n    \n    \/\/scrub: true,\n    start: \"top center\",\n\t  end: \"top center\",\n    toggleActions: \"restart none resume reverse\",\n    \/\/markers: true\n  },\n  \n  backgroundColor: \"#fff\",\n\t\/\/backgroundImage: \"linear-gradient(310deg, #fff 20%, #fff 100%)\",\n  ease: \"none\",\n  duration: 0.2\n\n});\n\ngsap.to(\".elementor-26\", {\n\tbackgroundColor: \"#fff\",\n\t\/\/backgroundImage: \"linear-gradient(310deg, #fff 20%, #fff 100%)\",\n});\n*\/\n\/\/ Header megjelenes kozepen\n  \n\nconst sorCent = new SplitType('.cent', { types: 'lines' });\nconst textCent = new SplitType('.cent h2', { types: 'words, chars' });\n\nconst szovegCent = gsap.utils.toArray('.cent .line');\n\nszovegCent.forEach((elementCent1) => {\n\t\n    const elemekCent1 = elementCent1.querySelectorAll('.cent .char');\n    gsap.fromTo(\n  elemekCent1,\n  { \n    x: -5,\n    y: 50,\n    opacity: 0\n  },\n  {\n    x: 0,\n    y: 0,\n    opacity: 1,\n    stagger: 0.05,\n    duration: 0.25,\n    \n    ease: 'power2.out',\n  scrollTrigger: { \n    trigger: elementCent1,\n\t  \/*pin: true,*\/\n\t  \n\t  \/*scrub: true,*\/\n    \/*markers: true,*\/\n    toggleActions: \"restart none resume reverse\",\n    start: 'center center',\n\n  }\n     \n  }\n)\n\n});\n\/\/ Kek pinelese\ngsap.to(\".cent\", {\n  scrollTrigger: {\n    trigger: \".kekpin\",\n    pin: true,\n    \n    scrub: true,\n    start: \"center center\",\n    end: \"bottom center\"\n  },\n  \n  \n  opacity: 1,\n  ease: \"none\",\n  \n});\n\/\/--------------------------\n\n});\n   gsap.set(\"text.circles__text\", { transformOrigin: \"50% 50%\" });\ngsap.to(\"text.circles__text\", {\n  duration: 28,\n  ease: \"none\",\n  rotation: \"+=360\",\n  repeat: -1 });\n\n<\/script>\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>","protected":false},"excerpt":{"rendered":"<p>Maszkolt k\u00e9p anim\u00e1ci\u00f3 A k\u00e9p b\u00e1rmelyik r\u00e9sz\u00e9re tehet\u0151 a maszk \u00e9s b\u00e1rmilyen forma is lehet, csak ki kell sz\u00e1m\u00edtani! Lorem Ipsum is simply dummy text of the printing. Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum Lorem Ipsum is simply dummy text.<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-703","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/posts\/703","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/types\/post"}],"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=703"}],"version-history":[{"count":43,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/posts\/703\/revisions"}],"predecessor-version":[{"id":748,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/posts\/703\/revisions\/748"}],"wp:attachment":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/media?parent=703"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/categories?post=703"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/tags?post=703"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}