{"id":343,"date":"2025-07-18T10:10:00","date_gmt":"2025-07-18T08:10:00","guid":{"rendered":"https:\/\/www.profi.cloud\/?p=343"},"modified":"2026-06-02T14:36:51","modified_gmt":"2026-06-02T12:36:51","slug":"wordpress-plugin11-jednoducha-animace-textu-plugin-text-block","status":"publish","type":"post","link":"https:\/\/www.profi.cloud\/en\/wordpress-plugin11-jednoducha-animace-textu-plugin-text-block\/","title":{"rendered":"WordPress Plugin#11 Jednoduch\u00e1 animace textu Plugin: Text Block"},"content":{"rendered":"\n
\n

Na tento plugin jsem narazil, p\u0159i hled\u00e1n\u00ed jednoduch\u00e9ho zp\u016fsobu jak animovat text. Modul je jednodu\u0161e nastaviteln\u00fd a p\u0159\u00edv\u011btiv\u00fd i pro nezku\u0161en\u00e9ho u\u017eivatele. Uk\u00e1\u017eu v\u00e1m jak jednodu\u0161e s pluginem pracovat a na konci str\u00e1nky jsem pro uk\u00e1zku doplnil v\u0161echny animace kter\u00e9 lze pomoc\u00ed tohoto pluginu dos\u00e1hnout.<\/p>\n\n\n\n

ANIMATED TEXT BLOCK<\/strong> <\/a>wordpress.org#<\/a><\/h2>\n\n\n\n

Obsah n\u00e1vodu:<\/p>\n\n\n\n

    \n
  • P\u0159idat animovan\u00fd textov\u00fd blok:<\/li>\n\n\n\n
  • Nastaven\u00ed\/Mo\u017enosti:\n
      \n
    • Nastaven\u00ed postrann\u00edho panelu:<\/li>\n\n\n\n
    • Nastaven\u00ed animovan\u00e9ho textu \/ Hlavn\u00ed nastaven\u00ed:<\/li>\n\n\n\n
    • Styl animovan\u00e9ho textu:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

      P\u0159id\u00e1n\u00ed animovan\u00e9ho text bloku:<\/h3>\n\n\n\n

      Ve sv\u00e9m Gutenbergov\u00e9m editoru<\/strong> najd\u011bte polo\u017eku „animovan\u00fd text“<\/strong> a vlo\u017ete jej na str\u00e1nku, stejn\u011b jako v\u0161echny ostatn\u00ed bloky.<\/p>\n\n\n\n

      \"\"
      P\u0159idat animovan\u00fd text<\/figcaption><\/figure>\n\n\n\n

      Nastaven\u00ed\/Mo\u017enosti:<\/h3>\n\n\n\n

      Nastaven\u00ed postrann\u00edho panelu:<\/h4>\n\n\n\n

      Vyberte blok, v prav\u00e9m postrann\u00edm panelu, kde uvid\u00edte mo\u017enost nastaven\u00ed. Existuj\u00ed dv\u011b mo\u017enosti na v\u00fdb\u011br General <\/strong>a Style<\/strong>.<\/p>\n\n\n\n

        \n
      • V \u010d\u00e1stiGeneral<\/strong> m\u016f\u017eete zm\u011bnit hlavn\u00ed nastaven\u00ed animovan\u00e9ho textov\u00e9ho bloku<\/strong> .<\/li>\n\n\n\n
      • A v \u010d\u00e1sti Style<\/strong> m\u016f\u017eete upravit p\u00edsmo, styl animace a ve\u0161ker\u00e9 styly bloku.<\/li>\n<\/ul>\n\n\n\n
        \"\"
        Nastaven\u00ed postrann\u00edho panelu animovan\u00e9ho textu<\/figcaption><\/figure>\n\n\n\n

        Nastaven\u00ed animovan\u00e9ho textu \/ Hlavn\u00ed nastaven\u00ed neboli General:<\/h4>\n\n\n\n
          \n
        • V prav\u00e9m postrann\u00edm panelu vid\u00edte mo\u017enost Nastaven\u00ed animovan\u00e9ho textu<\/strong>.<\/li>\n\n\n\n
        • V tomto nastaven\u00ed m\u016f\u017eete zm\u011bnit Text va\u0161\u00ed animace.<\/li>\n\n\n\n
        • M\u016f\u017eete tak\u00e9 povolit nebo zak\u00e1zat Smy\u010dku<\/strong> animace. To znamen\u00e1 \u017ee text se bu\u010f vy-animuje pouze jednou nebo po\u0159\u00e1d dokola.<\/li>\n\n\n\n
        • Animate in. <\/strong>V tomto nastaven\u00ed si m\u016f\u017eete vybrat bu\u010f animaci po slovech (Word) nebo po p\u00edsmenech (char).<\/li>\n\n\n\n
        • In Effect. <\/strong>Nastaven\u00ed efektu animace, n\u00ed\u017ee pod t\u00edmto n\u00e1vodem jsem p\u0159idal uk\u00e1zky, jak kter\u00e1 animace vypad\u00e1.<\/li>\n\n\n\n
        • In Sequence. <\/strong>V dal\u0161\u00edm nastaven\u00ed m\u016f\u017eete tak\u00e9 zm\u011bnit vstupn\u00ed a v\u00fdstupn\u00ed efekty a sekvence<\/strong><\/li>\n\n\n\n
        • Out Effect.<\/strong> Kone\u010dn\u00e1 animace efekt po konci t\u00e9 prvn\u00ed animace<\/li>\n\n\n\n
        • Out Sequence. <\/strong>V dal\u0161\u00edm nastaven\u00ed m\u016f\u017eete tak\u00e9 zm\u011bnit vstupn\u00ed a v\u00fdstupn\u00ed efekty a sekvence<\/strong><\/li>\n<\/ul>\n\n\n\n

          V p\u0159\u00edpad\u011b vypnut\u00ed Loop<\/strong> co\u017e znamen\u00e1 opakovan\u00ed animace se nastavuje pouze In effect a in sequence. Pokud po\u017eadujete Loop a chcete aby animace skon\u010dila stejnou annimac\u00ed jako za\u010dala mus\u00edte nastavit mo\u017enost In Effect <\/strong>aOut Effect<\/strong> na stejn\u00fd efekt animace. A je\u0161t\u011b jednou pokud se chcete pod\u00edvat na v\u0161echny efekty animac\u00ed naleznete je dole pod t\u00edmto n\u00e1vodem.<\/p>\n\n\n\n

          \"\"
          Nastaven\u00ed animovan\u00e9ho textu<\/figcaption><\/figure>\n\n\n\n

          Nastaven\u00ed styl\u016f animovan\u00e9ho textu neboli Style:<\/strong><\/h4>\n\n\n\n

          Nejlep\u0161\u00ed funkc\u00ed tohoto modulu je voln\u00e9 nastavov\u00e1n\u00ed styl\u016f, font\u016f, barev, sm\u011br\u016f animace i um\u00edst\u011bn\u00ed v prostoru.<\/p>\n\n\n\n

            \n
          • P\u0159epn\u011bte na kartu Style<\/strong> a uvid\u00edte mo\u017enosti stylu animovan\u00e9ho textu<\/strong> .<\/li>\n\n\n\n
          • M\u016f\u017eete zm\u011bnit pozad\u00ed<\/strong>, typografii<\/strong> i barvu<\/strong> textu.<\/li>\n\n\n\n
          • Tak\u00e9 m\u016f\u017ee zm\u011bnit odsazen\u00ed<\/strong> a ohrani\u010den\u00ed<\/strong> animovan\u00e9ho textu.<\/strong><\/li>\n<\/ul>\n\n\n\n
            \"\"<\/figure>\n\n\n\n

            V\u0161echny Efekty animovan\u00e9ho textu<\/h4>\n\n\n\n

            N\u011bkter\u00e9 animace jsou nastaven\u00e9 bez opakov\u00e1n\u00ed, pro jejich op\u011btovnou animace je pot\u0159eba z re-fresh str\u00e1nky. CTR + F5<\/p>\n\n\n\n

            \n

            Flash<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Shake<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Tada<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Swing<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Wobble<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Pulse<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Flip<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Flip In X<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Flip In Y<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Up<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Down<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Left<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Right<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Up Big<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Down Big<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Left Big<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Fade In Right Big<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce In<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce In Up<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce In Down<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce In Left<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Bounce In Right<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Rotate In<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Rotate In Up Left<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Rotate In Up Right<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Rotate In Down Left<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Rotate In Down Right<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Roll In<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n\n\n\n
            \n

            Hinde<\/p>\n\n\n

            Animated text for animation<\/div>\r\n
            <\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

            Na tento plugin jsem narazil, p\u0159i hled\u00e1n\u00ed jednoduch\u00e9ho zp\u016fsobu jak animovat text. Modul je jednodu\u0161e nastaviteln\u00fd a p\u0159\u00edv\u011btiv\u00fd i pro nezku\u0161en\u00e9ho u\u017eivatele. Uk\u00e1\u017eu v\u00e1m jak jednodu\u0161e s pluginem pracovat a na konci str\u00e1nky jsem pro uk\u00e1zku doplnil v\u0161echny animace kter\u00e9 lze pomoc\u00ed tohoto pluginu dos\u00e1hnout. ANIMATED TEXT BLOCK wordpress.org# Obsah n\u00e1vodu: P\u0159id\u00e1n\u00ed animovan\u00e9ho text bloku: […]<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_ariafse_meta_header_display":false,"_ariafse_meta_footer_display":false,"_ariafse_meta_site_title_display":false,"_ariafse_meta_sticky_header":false,"_ariafse_meta_transparent_header":false,"footnotes":""},"categories":[1,14],"tags":[],"class_list":["post-343","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/posts\/343","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/comments?post=343"}],"version-history":[{"count":1,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/posts\/343\/revisions"}],"predecessor-version":[{"id":349,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/posts\/343\/revisions\/349"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/media?parent=343"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/categories?post=343"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.profi.cloud\/en\/wp-json\/wp\/v2\/tags?post=343"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}