Divi WordPress Theme

文章概要

您是否曾经看过那些引人注目的网站动画,当您向下滚动时会看到一系列内容,感觉就像背景图像在跟着您一起移动吗?

WPCompress Pro

它可能是不同的文本,图像或其他内容。 但是,无论内容是什么,都很吸引人。

但是,除非您是开发人员,否则很难将这种效果添加到您自己的WordPress网站中。

滚动序列可解决此问题。 这是一个免费的WordPress插件,可让您创建可与鼠标滚轮滚动和触摸设备一起使用的滚动序列动画。

您可以使用它在首页上创建引人注目的动画序列。 或者,您也可以在单独的帖子和页面中使用它,以提供一种更具动感,吸引人的方式供访问者使用您的内容。

仅凭文本很难描述视觉效果,因此您可以在此处,此处或此处查看一些示例,以了解我在说什么。 这些是Scrollsequence可以帮助您创建的真实示例。 或者,我从开发人员那里找到了这个不错的演示GIF:

滚动序列示例

在我们动手的Scrollsequence评论中,我将为您详细介绍此插件的工作方式以及可以创建的内容。

Scrollsequence评论:功能列表

同样,我很难用文字来描述Scrollsequence效果,因为关于它的独特之处在于它在视觉上的吸引力。 因此,如果您仍然不确定我在说什么,请查看以下官方示例之一:

  • 美丽
  • 赛博朋克
  • 手表(计时装置)

简而言之,Scrollsequence可以帮助您在WordPress网站上创建这种效果,而无需任何特殊的技术知识。

您可以通过组合一系列图像来创建简短或冗长的动画。

您可以使用熟悉的TinyMCE编辑器添加内容,还可以设置无代码动画来控制该内容的行为。

老实说,如果没有视觉效果,大多数功能将很难描述,因此让我们直接进入动手部分!

Scrolls动手实践

现在,我们开始动手实践,我将向您展示使用Scrollsequence创建自己的动画序列的感觉。

1.创建一个新页面

要开始使用,请转到 滚动序列→添加新的滚动序列。 Scrollsequence使用自定义帖子类型来存储您的序列,因此您将看到熟悉的WordPress编辑器:

滚动序列编辑器

第一步是添加一个“页面”。 在Scrollsequence中,页面可帮助您将动画分成逻辑序列。 您可以用一个页面创建一个序列。 或者,对于更长的动画,您可以将序列分成多个页面。

每个页面都有自己独特的图像,内容,设置和动画(这是您接下来要添加的内容)。

如果您添加多个页面,您会看到它们被添加为新标签。 您还可以复制现有页面,这可以帮助您节省工作时间:

页数

现在,我将从一个页面开始。

2.添加您的图片

接下来,您需要将图像添加到页面。 该插件推荐至少50-100张图像作为起点–通过此功能,您可以在访客向下滚动时创建酷炫的动画效果。 效果实际上是“滚动”超过50张图像,而不是单个动画。

如果要在台式机和移动设备上使用一个滚动序列,则应选择一个正方形的纵横比。 您还可以为桌面和移动访问者创建单独的序列,并为每个访问者优化图像。 现在,您将需要使用自己的代码为每种类型的访问者显示正确的版本,但是开发人员计划将其添加为内置功能。

我认为最好有一个文档页面来描述创建此图像序列的最佳方法,因为这不是我立即意识到的方法。 经过一番快速的Google搜索后,我决定使用此视频转JPG转换器工具,该工具将我上传的简短视频文件作为单独的图像分解成每一帧。

笔记 –写完这篇评论后,开发人员读了我的想法,并在此处添加了有用的教程。 如果您要导出尽可能多的帧,他们建议使用VLC或FFmpeg,因为我使用的工具只能转换一小部分帧。

我上传了一个18秒的视频,并将帧频设置为5 FPS。 这将我的18秒视频转换为94个单独的JPG图像,这是我在Scrollsequence中使用的图像。

这是我的页面,其中添加了所有94张图像。 如果需要,您可以通过拖放或删除图像来重新排列顺序

滚动序列内容

一个不错的功能是可以批量反转图像的顺序。 由于某种原因,我的图片以相反的顺序插入(即使编号正确),手动重新排列94张图像将是一个很大的痛苦。 这是WordPress上传器的问题,而不是插件本身的问题(当我直接将文件上传到WordPress媒体库时遇到相同的问题)。

笔记 –开发人员说此功能正在他们的路线图上,因此希望很快就会出现。

3.添加内容

选择页面的图像后,您将获得一个新的编辑器,可以在其中添加内容到该页面。

它是常规的WordPress Classic编辑器,使用起来非常方便,因为它是一个非常熟悉的界面:

此内容将显示在序列此部分的图像上。 如果要显示不同的内容集,则可以创建另一个页面。 您还可以添加多行文本,并对其进行不同的动画处理,以便它们在不同的时间显示(接下来的更多内容)。

您还可以在编辑器中添加HTML,短代码,oembeds等,这为您提供了很大的灵活性。 也就是说,您不仅可以添加纯文本,还可以添加更多内容。

4.添加动画(可选)

要将动画添加到内容中,您需要将CSS选择器添加到要设置动画的内容中。 这是该过程中最技术性的部分,但是仍然很容易。

在内容编辑器中,您需要转到 文本 标签。 然后,向要设置动画的每个文本添加一个ID。 在我的示例中,这是一个

和一个

完成后,向下滚动到 内容动画 页面设置部分,然后单击 添加动画

现在,您要添加CSS ID作为 选择器。 然后,您可以选择该元素可见并再次隐藏的图像编号。 该插件可以方便地在 图像序列 列表,这很容易抓住号码。

然后,使用 从动画到动画 框以选择要添加的动画类型以及持续时间。 您有四个选择:

  • 淡入/淡出不透明
  • 从/向水平偏移
  • 从/向垂直偏移移动
  • 从/到缩放

您也可以同时添加多个动画。

可能是这样的:

您可以重复该过程以制作多段内容的动画。 例如,您可以将副标题显示在主标题之后。 这样一来,您无需创建另一个页面即可拆分内容。

5.配置其他。 页面设置

为了解决问题,您可以配置其他一些其他设置。 首先,您可以选择 图片持续时间,即各个图像之间的距离。 除此之外,您还可以选择 图像比例和对齐 不同类型设备的设置:

这就是创建页面的过程。 如果要在Scrollsequence中创建另一个页面,则只需重复相同的步骤。

6.配置其他。 顺序设定

除了页面级设置,您还可以在边栏中获得一些总体设置,以控制整个序列:

  • 滚动延迟
  • 影像宽度
  • 图像不透明度
  • 自定义CSS

7.显示动画序列

默认情况下,Scrollsequence为每个序列创建专用的自定义帖子类型条目。 如果您想直接将访问者发送到该序列,则可以直接链接到此页面。 您还可以使用内容编辑器来控制此页面的内容。

但是,大多数人可能更喜欢将独立序列嵌入到现有页面或帖子中。

为此,您可以使用以下短代码:

[scrollsequence id=”####”]

您还可以在简码中指定最高或最低边距:

[scrollsequence id=”####” margintop=”-200px” marginbottom=”-200px”]

您可以将此短代码添加到本地WordPress编辑器中,也可以在您喜欢的页面构建器插件中使用它,例如Elementor或Divi。

就是这样! 您只是创建了一个引人入胜的滚动动画,而没有任何自定义代码。

表现如何?

由于您要上传50幅以上的图像来创建动画序列,因此,您可能会有些担心Web性能及其对网站加载时间的影响。

值得庆幸的是,该插件解决了这一问题-它会在加载第一张图片后立即加载/显示内容,这仍然可以快速地进行首次绘画或最大内容绘画,这是人类访客真正关心的。

加载第一张图像并且您的访客可以看到内容后,Scrollsequence将继续在后台加载其需要的其他图像。

您仍然需要确保优化上传的图像,以便快速加载第一张图像。 但是,由于Scrollsequence如何加载其内容,您不必担心会损害访问者的体验。

滚动序列定价

Scrollsequence既有WordPress.org的免费版本,又有具有更多功能的高级版本。

免费版可让您创建引人注目的动画,但是在动画选项以及页面中可以包含多少图像方面有限制。

如果您想要高级版,那么现在可以买得起,因为前100个许可都可以享受折扣–您可以购买一年或终身许可:

  • 一个站点–每年$ 19.99或终身$ 59.99。
  • 五个网站-每年$ 49.99,终生$ 149.99。
  • 十个网站–每年$ 89.99或终身$ 269.99。

您还可以通过14天的免费试用期来测试高级功能-无需信用卡。

关于滚动序列的最终思考

毫无疑问,Scrollsequence可以帮助您创建的动画序列引人注目,并且您会在许多网站上看到这种效果,尤其是在创意空间中。

在写这篇评论之前,我不知道如何创造这样的效果。 但是使用Scrollsequence,我发现它非常简单。

在不到30分钟的时间里,我就开始了第一个序列的运行,并且没有遇到任何障碍或故障。

总而言之,如果您有兴趣创建这种效果,请试用14天免费试用的高级功能(无需信用卡),或查看免费版本是否具有满足您需要的功能。

获取高级版本获取免费版本

对我们的Scrollsequence评论有任何疑问吗? 在评论部分提问!

【免费外贸推广营销视频培训教程】
https://school.yooopaaa.com

WordPress著名Avada主题官方优惠
https://1.envato.market/xxPav

WordPress可视化建站Elementor插件
https://elementor.com/?ref=19904

WordPress外贸独立站DIVI主题官方优惠
https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=59787

亚马逊选品工具Jungle Scout官方优惠
https://junglescout.grsm.io/jieqiu1568

独立站SEO优化工具Semrush免费7天试用
https://shareasale.com/r.cfm?b=1577772&u=2541755&m=97231&urllink=&afftrack=