如何用短代码终极文字出版社对文本进行动画处理

对文本进行动画处理是吸引访问者注意力的有效方法。 在 WordPress 中对文本进行动画处理非常简单,当您选择适合您的工作的插件时。 如果您希望避免复杂的 CSS 编码,并且希望使用简单的短代码对文本进行动画处理,请涵盖它。

我们 短代码终极 用于在 WordPress 中执行文本动画的插件。 令人印象深刻的 60 个动画选项,插件应该只是一个很好的应用程序。

值得一提的是,短代码终极做的不仅仅是对文本进行动画处理。 例如,进度条、拉取引号、工具提示、滑块、旋转木马和表格只是采样。

本教程对文本动画感兴趣,但了解插件需要一些时间。 它可以覆盖许多底座(并可以替换许多其他插件)。

安装短代码终极插件

登录到 WordPress 管理面板。

在左侧列导航中,单击[プラグイン]将鼠标悬停在链接上,然后单击[新規追加]单击链接。

在“搜索插件…”框中键入“短代码终极”。

查找文字新闻短代码终极插件

找到插件后,单击“立即安装”按钮。

点击文字新闻短代码安装终极插件

最后,单击“激活”按钮。

点击文字新闻短代码启用终极插件

短代码终极设置

在左侧列导航中,单击[ショートコード]将鼠标悬停在链接上,然后单击[設定]单击链接。

["設定" リンク

利用可能な設定のほとんどは、プラグインによって割り当てられたデフォルトのままにすることができます。ここで変更したい唯一のことは、「ショートコードを有効にする」セクションで「テキストウィジェット」を有効にすることです。

テキストウィジェットを有効にするチェックボックス

投稿またはページ内のテキストのみをアニメーション化する場合は、チェックボックスをオフにして、すべての設定をスキップします。

デュレーションやディレイタイムなどのアニメーションオプションは、個々のショートコードの変数を使用して設定されます。これについては、後ほど説明します。

さて、ワードプレスでいくつかのテキストをアニメーション化しましょう

開始するには、既存のページのテキスト行をアニメーション化します。

WordPressエディタでページを開き、アニメーション化するテキストを見つけます。

既存のブロック内のテキスト行をアニメーション化しているため、ショートコードブロックは使用しません。代わりに、既存の段落ブロックにショートコードを追加します。

「古典的な」WordPressエディタを使用する場合は、ここで紹介しているのと同じプロセスを使用します。

ショートコードは su_animate.必要な変数は “type” という 1 つだけです。したがって、単純なショートコード全体は次のようになります。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn”]要设置动画的文本行。[/su_animate][/ht_message]

让我们看看。 可用类型列表 以查看各种“类型”选项。

因此,将要动画化的文本括在短代码中。 地点 [su_animate type=”bounceIn”] 在文本的开头,单击 [/su_animate] 毕竟。

向文本行添加短代码

保存或发布页面时,可以看到动画文本正在运行。

页面上的动画

我知道,这是静止的,我能说什么? 不会捕获文本移动。

如果你在家里遵循这个WordPress动画,你可以在他们的网站上看到。

设置动画文本的持续时间

这是在不知道 CSS 的情况下对文本进行动画处理的好地方。 配置持续时间和延迟时间所需的代码将替换为简单的短代码变量。 (当然,CSS 实际上并没有被替换,但不需要处理它。

好吧,我们从 期间可以想象,这是运行动画所需的时间。 使用值(以秒为单位)。 因此,为了保持文本反弹五秒钟, 持续时间 =“5”.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″]要设置动画的文本行。[/su_animate][/ht_message]

请务必添加“期间”变量 “类型”变量。

添加短代码周期变量

保存或发布页面时,可以看到动画效果需要很长时间才能播放。 因此,即使延长持续时间,在第一个示例中看到的痤疮效果也不会持续很长时间。 相反,效果以慢动作进行。

增加持续时间值可以产生各种效果。 您是否喜欢这些效果取决于您尝试产生的影响类型。

持续时间变量适用于介于 0 和 20 之间的任何数字。

设置动画文本延迟时间

更改 延迟 值控制动画的开始时间。 默认情况下,如果未设置延迟值,则动画将在页面加载时开始。

延迟值允许您在开始动画之前创建暂停。 与持续时间变量一样,延迟使用值(以秒为单位)。 因此,在加载页面后五秒,文本将反弹。 延迟=“5”.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” delay=”5″]要设置动画的文本行。[/su_animate][/ht_message]

然后再次添加“延迟”变量 “类型”变量。

添加短代码延迟变量

需要注意的重要事项是 设置延迟后,动画文本将消失,直到该时间过去。.

因此,在此示例中,文本直到页面加载 5 秒后才会显示在页面上。 让访问者等待文本的时间很长。

与持续时间变量一样,延迟适用于介于 0 和 20 之间的任何数字。

如何在 WordPress 中对文本进行动画处理时同时使用持续时间和延迟

如果要同时使用两者 期间延迟 在一起,你可以。 只需将这两个值添加到短代码:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” duration=”5″ delay=”5″]要设置动画的文本行。[/su_animate][/ht_message]

我可以为段落中的文本行设置动画吗?

类似的东西。

默认情况下,短代码终极插件将短代码文本放在< div >中。 因此,使用短代码时,文本上方和下方会插入空格。

但是,如果 内联 短代码放置在 span >标记中<而不是<div>标记。

要使用它,请单击 内联 = “是” 变量。

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][su_animate type=”bounceIn” inline=”yes”]要设置动画的文本行。[/su_animate][/ht_message]

添加 "内联" 短代码变量

在< span 中使用效果会更改某些内容的外观>因此您可能需要尝试不同的“类型”值。

隐藏的奖金动画

到目前为止,我们已经讨论了文本动画。 但是,短代码可用于为页面上的几乎所有元素设置动画。

在这里,将短代码的开口放在图像前面,然后在图像之后关闭。

在图像中使用短代码

这将导致图像突然上升,并非常显著地反弹到位。 这是一个令人印象深刻的效果,试试看。

添加 10 秒的持续时间将使您更令人毛骨悚然地浮现在原位。

在图像中使用短代码周期变量

看,现在我终于可以得到效果的截图了。

漂浮在规定位置图像

静止的图像,我知道,但你得到的想法。

短代码终极塑料卸载 Gin 时会发生什么情况?

卸载插件时,使用该插件的页面和帖子将受到影响。 由于插件的短代码不再工作,因此短代码本身将显示在使用的位置。

动画在任何场合都是令人信服的!

我们已经看到了使用“短代码终极”在 WordPress 中对文本进行动画处理是多么容易。 这是一个很酷的效果,像许多很酷的效果,你可能应该谨慎使用。 但是,要引起对文本行的注意,就很难击败它。

此外,在图像中使用动画短代码可以创建不寻常的引人注目的效果。 尝试将动画的短代码应用于其他页面元素很有趣。 但是,请谨慎使用此效果。 太多的好事可能会变得烦人和分心。

你曾经尝试过添加吗? CSS 动画类手动到您的网站? 您认为可能会尝试将动画融入网站,或者如果动画变得简单,该怎么办?

请在评论中告诉我们。

给TA打赏
共{{data.count}}人
人已打赏
WordPress 教程

如何在 WordPress 中管理广告以从您的网站中获利

2022-9-9 15:27:42

WordPress 教程

如何开始和关注您的专业网站

2022-9-9 17:29:54

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
搜索