元素卷轴效果:16 个图像卷轴动画

主要外卖

• 库存编辑器中的元素滚动效果是高级 > 运动效果 > 滚动效果(垂直滚动、水平滚动、透明度、模糊、旋转和缩放)下的六个控件,每个控件移动一个元素。
• 滚动效果控件是 Elementor Pro 功能,免费的 Elementor 4.3。2 插件不包含它们。
• 16个图像滚动效果在这个页面是主插件小部件构建器小部件,它固定一个全屏舞台,并在滚动位置上对一整组图像进行动画处理,包括一个3D立方体,翻页书和堆叠卡片组。
• 16 个滚动小部件中的每一个都有自己的 zip 下载,其中包含一个 JSON 文件和一个 README,并且 JSON 通过 Master Addons > Widget Builder > Import Widget 导入,该小部件仅接受。json 文件。
• 16个小部件中的每一个都包含一个偏好-减少-运动规则,因此在操作系统中关闭运动的访问者会得到静态布局而不是动画。

Elementor滚动效果,因为大多数人遇见他们,是滚动效果面板中的滚动效果控件:垂直滚动,水平滚动,透明,模糊,旋转和缩放,每个都随着页面的移动而推动单个图像或标题,那就是他们所到的一段钉住,而立方体在里面转动则超出了他们。

16个图像滚动动画,在更大的规模上工作,每一个都是主插件小部件构建器的现成小部件,带有一个实时演示,你可以在安装任何东西之前打开,下面你会发现每个效果的作用,它适合哪种网站,如何导入该集,以及检查速度和可访问性。

Elementor 滚动效果可以自行执行哪些操作

Elementor 自己的滚动效果,当访客滚动时,会改变一个元素的一个属性,您选择一个小部件或容器,打开 高级 > 运动效果,打开 滚动效果并且从六个选项中进行选择。 Elementor 的运动效果帮助页面 将它们列为垂直卷轴、水平卷轴、透明度、模糊、旋转和比例。

这些控件属于 Elementor Pro。我们检查了免费的 Elementor 4.3。2 插件,但滚动控件不在其中。

A滚动效果只知道自己的元素和视口,它没有办法在内部内容变化时将一个部分固定到位,而且它无法协调十张图像,因此它们按顺序到达,英雄图像上的视差很容易设置这种方式,当你阅读时,它会分解成拼图并重新组装的照片需要一个自定义小部件,这就是本帖其余部分所涵盖的内容。

如果平视差就是您所需要的,那么 Rellax 扩展 在主插件中处理它,我们的 动画概述 涵盖入口和浮动效果。

运行这些小部件需要什么

您需要 Elementor、Master Addons 和 Widget Builder。免费 Elementor 插件在 Elementor 端就足够了,因为这些设计都没有使用 Elementor Pro 小部件或其运动效果面板。

这些小部件是在 中导入和编辑的 小部件生成器,这是一个 Master Addons Pro 功能。计划已启动 定价页面。下面的每个设计在其实时演示旁边都有自己的下载链接,并且没有电子邮件门。

您还需要自己的图像。演示使用公共领域和公开许可的照片,每个小部件都有图像字段或中继器,因此交换它们需要几分钟。

Live demo 不需要安装任何东西,打开一个,以几个窗口大小滚动它,这是判断运动风格是否适合您的内容的最快方法。

16 元素器图像滚动效果

16个图像滚动效果分为五组:固定显示、3D对象、卡片组、无尽的画廊以及索引或商店布局,它们大多使用相同的基础。小部件给自己一个高高的跑道,在里面固定一个具有粘性定位的单屏舞台,并读取您滚动跑道多远以驱动动画。向上滚动,一切都反向播放。

钉住图像显示

这四张画框静止不动,改变里面的东西。它们适合长版页面,每张图片都附有一个段落。

1。光圈指数

每个条目都以一条细水平带开始,当到达屏幕中间时,打开一张完整的照片,就像快门打开的方式一样。标题位于图像上,条目在页面上左右交替。框架保持固定,而其文本滚动过去,然后放手。

Shi一幅底色暗的卷轴上的图像流露,所以在黑色上Feng写夜拍和产品拍摄,四到六个条目是舒适的范围。

2、木瓦架

1帧保持固定在右边,而副本在左边滚动,随着每块新的文本到达,它的图片在同一帧内滑过前一个,就像屋顶上的木瓦一样,页面背景随着每张图片的颜色而变化。

颜色偏移告诉读者一个新的章节已经开始,因此您可以删除分隔符和副标题。将其用于案例研究并进行专题游览,其中包含四到五个项目,每个项目都值得一个段落。

3。燕尾章

每一章都有一张切成互锁拼图的图片,它们开始分散并旋转,滚动将它们带回家,一旦图片完整,标题就会出现。

每一块的位置都是从卷轴偏移量计算出来的,所以动画永远不会跑在读者前面或落后,对于两到四个大图像的讲故事页面效果很好,我不会超过四个,因为技巧很薄。

4、纬网

该部分在一张照片上展开,充满血腥。滚动,它缩回到三列网格中的位置,而其他图片则在其周围飞来。继续滚动和行部分,为标题和按钮腾出空间。

对于商店或工作室主页来说,这是一个强大的英雄,因为它在一个部分中从一个大局到完整集合,再到号召性用语。对于静态替代方案,请参阅我们的 元素英雄部分模板.

3D滚动效果

这四种都使用CSS 3D变换和透视,滚动位置驱动它们。如果您想要在计时器上播放或响应箭头的3D,我们的指南 元素器 3D 旋转木马 覆盖那一面。

5。小面立方体

6张照片坐在一个立方体的六个面上,立方体每伸展一幅卷轴转动一张面,而你所面对的照片则遍布整个背景,右侧的一根缩略图显示你在哪里,让你跳到任何一个面。

Six是硬极限,因为一个立方体有六个边。这使得它适合短投资组合集或六产品范围。

6、轨道管

照片卡环围绕垂直轴站立,彼此叠在一起形成一个管子。您从外部观看它,因此近墙穿过屏幕很大,远墙通过间隙显示小而昏暗。演示中,玻璃球位于轴上,小部件提供其他中心物体,包括球体、原子、环形行星、线立方体、图像或图标。

它需要大量图像才能作为电子管读取,因此请考虑十六个或更多画廊。

7、架式架

Easel Rack是一个深深站立的卷轴画廊,每张图片都是一个板块,从你身边转开,直到卷轴将它与屏幕中间水平,在那里它摆动起来面向你,标题坐在板块旁边,物品左右曲折。

该演示穿过陶器工作室的六个阶段,这是它的自然用途:流程步骤或编号的服务列表。

8。查询书

1本闭合的书,随着你滚动而打开,然后一次翻一页,每张纸都印在两边,并在书脊上枢转,所以你看到一页书的背面,它翻过来向上滚动,书又关上了。

Demo是餐厅菜单,左页有照片,右页有菜肴,也适合lookbook和小册子,关闭JavaScript后,页面按阅读顺序回落到一个普通的列,因此搜索引擎或屏幕阅读器不会隐藏任何内容。

卡牌套牌

9。步枪甲板

这是滚动图案上的堆叠卡片,用人像卡片完成。每个滚动步骤将下一张卡片以微小角度放置在堆的顶部。背景颜色会移动以匹配每张卡片,并且一个小进度条会计入整个集合。

人像图像效果最好:海报、书籍封面、包装、应用程序屏幕。六到八张卡片大约是对的。

10、破碎的甲板

Shatter Deck是一副全画幅的照片,每张都有一个标题和一个按钮,还有两个箭头可以穿过它们,在图像之间移动将图片切成小瓷砖的网格,将它们分散,并将它们重新组合在一起作为下一张照片。

框外,一旦牌组有焦点,您就可以用箭头、水平拖动或箭头键穿过它。页面保持其正常的垂直滚动。打开 滚动到磨砂 control,而是由卷轴驱动过渡,在启用减少运动的情况下,磁砖停止飞行,甲板交叉淡入淡出。

无尽的卷轴画廊

这三个循环。没有第一张或最后一张图片,它比阅读更适合浏览。

11、沙龙杭

Salon Hang是一面没有顶部和没有底部的墙,图片挂在一列中,以不同的量向中心左右推,并切割成不同的宽度,沙龙悬挂的方式挤满了画廊的墙,在最后一张图片再次出现后,点击一张图片,它会长成自己的页面,并带有标题和后退按钮。

将其用于订单无关紧要且每张图像都值得仔细查看的摄影作品集。

12、长丝线

Pootographs 邮票大小的照片,沿着一条缠绕在屏幕上的封闭线串起,你通过滚动沿着线行进,它经过舞台中间的地方,图片就像在放大镜下一样膨胀起来,前面有一个标题,点一张照片打开。

对于大型档案来说,它是十六张照片中最好的,因为小缩略图意味着屏幕上同时适合大量图片。如果没有 JavaScript,小部件会以普通网格显示每张照片。

13、卷轴人像

Reel Portraits一次一个地显示全屏肖像,在一个循环中,每个都携带一个非常大的单字集穿过它,沿着转动鼓上的曲线状类型横向运行,另一条手写线穿过它,照片在类型后面以视差漂移移动,左侧低处有一个编号索引。

是十六个里最响亮的设计,而且适合时尚和社论网站,给它五六个强烈的形象,每个字。

索引和商店布局

14。波纹管指数

Bellows Index 显示一个作品体,一个条目一次一个条目,每个条目都有一个大标题,两个重叠的同一张图片的板和一个标题,整个页面为每个条目采用新的颜色,标题设置为可变字体,小部件将滚动压力写入其宽度轴,因此单词在移动时会拉伸和稳定。

4到8个条目读起来最好, 试试看展览或一组特色项目。

15、潮汐指数

Tide Index 有两列相互抵触,标题沿着左边向下运行,而使它们沿着右边向下运行的人,当你滚动时,每行都以波浪横向滑动,左边列单向,右边是它的镜子,而当前行的一张照片坐在它们之间。

Zhe个是按类型主导的,形象是配角,适合信用Liu和长项目索引。

16、斯沃琪商店

Swatch Shop是一个商品照片的走廊,你通过滚动向下走,当一个产品在前面时,整个房间都采用了它的颜色,旁边的一张卡片上显示着名字,简短的描述,价格,尺寸选项和按钮,右侧的一列颜色点标记着你的位置。

它是为小型目录而建造的:花店、陶瓷、蜡烛、印刷品。演示中填充了七种产品。

16种卷轴效果一览无余

使用此表将滚动效果与您拥有的内容相匹配。项目计数是布局舒适地处理的内容。

16个滚动效果小部件下载

每个小部件都是一个单独的 zip,因此您只下载您计划使用的。每个 zip 包含两个文件:小部件的 JSON 和列出其控件的 README。

在导入文件之前解压文件。Widget Builder 导入器读取。json 文件,并且不会接受 zip 本身。

如何将滚动小部件导入 Elementor

Master Addons Widget Builder 导入每个小部件,然后像其他 Elementor 小部件一样将其拖到页面上。整个事情每个设计大约需要两分钟。

1. Download你想要的小部件并解压它,里面是一个名为like的文件 widget-facet-cube.json另外还有一篇自述。
2. 在您的 WordPress 仪表板中,转到 主插件 > 小部件生成器 然后单击 导入小部件.
3. 将一个。json 文件拖到上传区域,或单击 浏览文件 it并挑选。导入器一次取一个文件,所以对于您想要的每个设计都重复此操作。
4. Elementor中打开任意页面,在小部件面板中搜索设计的名称,例如“Facet Cube”。将其拖入一个全宽容器中。
5. 替换"内容"选项卡中的演示图像和文本,然后在"样式"选项卡中设置颜色和排版。

这些文件不经过 Elementor 自己的文件 模板 > 导入 screen。that导入器是页面和部分模板, 我们覆盖在 如何导入 Elementor 模板。钉住的小部件也需要空间,把它们放在一个没有衬垫的整宽容器中,或者舞台会坐在一根狭窄的柱子内,看起来很局促。

另请阅读: 如何在 Elementor 中添加 GSAP 动画的,如果你想从头开始写自己的滚动触发动画。

图像滚动小部件与图像滚动效果

1个图像滚动小部件和1个图像滚动效果是2个不同的东西,名称会引起混淆,在大多数Elementor插件中,“图像滚动”是指固定帧内的一个高大的屏幕截图,当你悬停在它上面时,它会向上滑动,主题商店用它在一个小盒子里预览一个长页面。

图像滚动效果是绑在页面滚动上的动画:当访问者向下移动页面时,图像会显示、堆叠、转动或移动。此帖子中的所有内容都是第二种。如果悬停预览是您来找的,则需要带有图像滚动小部件的插件,因为这 16 个都没有这样做。

在 Elementor 中滚动讲述

Scrollytelling是一个页面,滚动推进一个故事:一个视觉保持固定,而旁边的文本继续前进,视觉在每一步都发生变化。Elementor可以做一个基本版本,带有粘性列。更难的部分是使视觉准确地响应读者所在的位置。

3个这样的小部件是为其构建的,木瓦框架将每个段落与替换最后一个的图片配对,Dovetail Chapters在阅读时每章组装一幅图片,Quire Book为每个部分翻页一个较长的故事,将其中两幅叠放在一页上,中间有普通的文本部分,因此读者可以从运动中获得休息。

滚动效果会减慢您的网站速度吗?

Scroll 效果在不小心构建时会减慢网站的速度,而通常的罪魁祸首是每帧上更改布局的超大图像和动画。这些小部件避免了第二个问题。它们使用 CSS 变换和不透明进行动画处理,浏览器可以将其交给显卡,并且它们使用 IntersectionObserver 来知道小部件何时在屏幕上。

Image weight 取决于您,因为显示十二张照片的小部件会加载十二张照片,将它们导出为 WebP,将它们大小到它们出现的最大尺寸,并将每张照片保持在 150 KB 左右。

在可访问性上,所有 16 个小部件都带有 a prefers-reduced-motion rule。a 访问者已经要求他们的设备少运动得到一个静止布局:纬线网格显示其完成的网格,上面有文本,破碎甲板交叉淡入淡出。破碎甲板也是一个真正的制表符停止,所以箭头键一旦有焦点就工作,否则不要劫持页面。

Phone来说,有几种设计包括自己的窄屏布局,Facet Cube在舞台脚下将缩略图栏移到一排,Reel Portraits将其索引变成一排数字,不过,在发布之前先在真实手机上测试您选择的小部件,高大的钉子部分在拇指下感觉比在鼠标滚轮下更长,如果您的网站使用非标准断点,我们的指南 元素断点 解释如何调整它们。

I会每页使用一个钉住的滚动效果,最多两个,每个钉住的阶段都增加滚动距离,一个要连续滚动其中三个的访客会感觉到。

常见问题

最后的想法

Elementor内置的滚动效果给你六种移动一个元素的方法,它们生活在Elementor Pro中,这里的16个小部件覆盖了除此之外的地面:四个固定显示,四个3D件,两个卡片组,三个无尽的画廊和三个索引或商店布局,每个都有现场演示和减少的动作回退。

要选择一个,请计算您的图像并决定它们的顺序是否重要,然后从上表中选择。您可以更改这些设计中的任何一个,或构建一个新的设计 小部件生成器.

相关阅读

• Elementor 图像框:16 种设计,带实时演示和下载
• 20个元素滑块模板:覆盖流,时间线,感言和更多
• Elementor 3D 旋转木马:Coverflow、Flip、Arc 和 Orbit
• 4 元素动画效果扩展 无代码
• Elementor Marquee:无限滚动文本、徽标和勾选