{"id":1187,"date":"2025-06-25T11:20:49","date_gmt":"2025-06-25T11:20:49","guid":{"rendered":"https:\/\/animacio.teszt.website\/?page_id=1187"},"modified":"2025-06-25T18:54:11","modified_gmt":"2025-06-25T18:54:11","slug":"egyszeru-szoveg-animaciok","status":"publish","type":"page","link":"https:\/\/animacio.teszt.website\/en\/egyszeru-szoveg-animaciok\/","title":{"rendered":"Egyszer\u0171 sz\u00f6veg anim\u00e1ci\u00f3k"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"1187\" class=\"elementor elementor-1187\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6446a23 e-con-full services-bg elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile e-flex e-con e-parent\" data-id=\"6446a23\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bad35e4 elementor-widget elementor-widget-heading\" data-id=\"bad35e4\" 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\">Egyszer\u0171 sz\u00f6veg anim\u00e1ci\u00f3k<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0908f9a elementor-widget__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"0908f9a\" 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\u00f6vetkez\u0151 anim\u00e1ci\u00f3k egyszer\u0171 CSS bel\u00e9p\u00e9si anim\u00e1ci\u00f3k. B\u00e1r ma m\u00e1r a CSS-el is lehet bonyolultabb anim\u00e1ci\u00f3kat, ak\u00e1r scrolloz\u00e1shoz k\u00f6t\u00f6ttet is k\u00e9sz\u00edteni, viszont a b\u00f6ng\u00e9sz\u0151k m\u00e9g kev\u00e9sb\u00e9 t\u00e1mogatj\u00e1k, ez\u00e9rt \u00f6sszetettebb anim\u00e1ci\u00f3kat javascript-tel (GSAP) \u00e9rdemes csin\u00e1lni, hogy min\u00e9l t\u00f6bb eszk\u00f6z\u00f6n fussanak. A CSS bel\u00e9p\u00e9si anim\u00e1ci\u00f3k egyszer futnak le, amikor a k\u00e9perny\u0151n\u00a0 el\u0151sz\u00f6r l\u00e1that\u00f3v\u00e1 v\u00e1lnak. Ha minden egyes \u0171jra l\u00e1that\u00f3v\u00e1 v\u00e1l\u00e1skor szeretn\u00e9nk anim\u00e1lni az elemeket, GSAP-et kell haszn\u00e1lni.\u00a0<\/p><div id=\"lt-accessibility-devtools\" aria-hidden=\"true\"><em><strong>Az alap bel\u00e9p\u00e9si anim\u00e1ci\u00f3kat (Fade in-ek, Zoom-in ek, stb&#8230;) nem list\u00e1zom, mivel ezek eleve be vannak \u00e9p\u00edtve \u00e9s teljesen alap\u00e9rtelmezettek.<\/strong><\/em><\/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-fd5d40d e-con-full e-flex e-con e-parent\" data-id=\"fd5d40d\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b7d26cc e-con-full e-flex e-con e-child\" data-id=\"b7d26cc\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d9ecef animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"6d9ecef\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;slideInUp&quot;}\" 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\">Egy soros slide in up<\/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-98603e7 e-con-full e-flex e-con e-child\" data-id=\"98603e7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7b4e074 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"7b4e074\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Zoom out + fade in<\/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-4d243eb e-con-full e-flex e-con e-child\" data-id=\"4d243eb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d26a321 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"d26a321\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Blur<\/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-891ee58 e-con-full e-flex e-con e-child\" data-id=\"891ee58\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef75db3 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"ef75db3\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Blur \u00e9s zoom out<\/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-5958c06 e-con-full e-flex e-con e-child\" data-id=\"5958c06\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3e4e55 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"e3e4e55\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Blur \u00e9s zoom out + fade in<\/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-0872ac3 e-con-full e-flex e-con e-child\" data-id=\"0872ac3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d841527 animated-slow elementor-invisible elementor-widget elementor-widget-heading\" data-id=\"d841527\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;fadeIn&quot;}\" 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\">Maszkolt megjelen\u00e9s kb v\u00e9gtelen lehet\u0151s\u00e9ggel<\/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>","protected":false},"excerpt":{"rendered":"<p>Egyszer\u0171 sz\u00f6veg anim\u00e1ci\u00f3k A k\u00f6vetkez\u0151 anim\u00e1ci\u00f3k egyszer\u0171 CSS bel\u00e9p\u00e9si anim\u00e1ci\u00f3k. B\u00e1r ma m\u00e1r a CSS-el is lehet bonyolultabb anim\u00e1ci\u00f3kat, ak\u00e1r scrolloz\u00e1shoz k\u00f6t\u00f6ttet is k\u00e9sz\u00edteni, viszont a b\u00f6ng\u00e9sz\u0151k m\u00e9g kev\u00e9sb\u00e9 t\u00e1mogatj\u00e1k, ez\u00e9rt \u00f6sszetettebb anim\u00e1ci\u00f3kat javascript-tel (GSAP) \u00e9rdemes csin\u00e1lni, hogy min\u00e9l t\u00f6bb eszk\u00f6z\u00f6n fussanak. A CSS bel\u00e9p\u00e9si anim\u00e1ci\u00f3k egyszer futnak le, amikor a k\u00e9perny\u0151n\u00a0 el\u0151sz\u00f6r l\u00e1that\u00f3v\u00e1 v\u00e1lnak. [&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-1187","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1187","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=1187"}],"version-history":[{"count":88,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1187\/revisions"}],"predecessor-version":[{"id":1827,"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/pages\/1187\/revisions\/1827"}],"wp:attachment":[{"href":"https:\/\/animacio.teszt.website\/en\/wp-json\/wp\/v2\/media?parent=1187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}