Master Addons 的浮动效果元素器扩展程序,您可以为网站上的任何元素添加流畅的交互式动画,通过翻译、旋转和缩放等简单自定义,您可以创建微妙的 浮动运动或动态 3D 效果。
在本教程中,我们将探讨如何使用这些定制选项将您的元素变为现实,并展示定位扩展如何帮助微调放置以获得完美的外观。到最后,您将准备好为您的网站创建引人注目的浮动动画。
如何使用浮动效应元素器扩展
在输入浮动效果选项之前,您必须确保启用扩展。
只需转到仪表板上的主插件即可。进入扩展选项卡并切换"浮动效果"扩展。简单!
启用后,您可以导航到站点上任何元素的高级选项卡并向下滚动以找到“漂浮效果”扩展名。切换它,您将看到以下自定义选项。
1、翻译一下
X和Y轴上移动一个元素,通过调整X轴上的平移,元素会左右移动,同样,调整Y轴会使元素上下移动,将两个轴结合起来产生3D浮动效果,为你的元素增加深度和运动。
2、旋转
通过此选项,您可以沿着 X、Y 和 Z 轴旋转元素。这使您的元素具有更动态、旋转的效果。
您还可以调整旋转的持续时间和延迟,从而实现更平滑或更戏剧性的过渡。
3、规模化
比例效应让您沿着 X 和 Y 轴拉伸或缩小元素,这会创建一个生长/收缩动画,使您的元素看起来膨胀或收缩。与其他效果一样,您可以调整持续时间和延迟来控制动画的时机。
通过结合这三个定制选项,您可以创建无尽的浮动效果变化,从微妙的动作到更复杂、引人注目的动画。
我们建议您检查 outelementor Pro 的功能 还有。您可以将 Elementor pro 和 主插件 创建您想要的任何类型的网站。
结合效果
最强大的功能之一 漂浮效果 extension 是将翻译、旋转和缩放相结合,实现独特而动态的动画的能力,通过对这些效果进行分层,您可以创建从微妙的浮动运动到完整的 3D 交互元素的任何内容。
翻译和轮换相结合: 将平移与旋转配对会产生流畅的旋转效果,并在屏幕上移动。例如,您可以在原地旋转的同时让元件对角线漂浮,从而产生更具动态性的 3D 错觉。
结合翻译和规模: (translation)和缩放(scaling)两种方式同时使用,使元素可以同时移动和改变大小,这可以随着元素在屏幕上漂移而产生膨胀或收缩的浮动效果。
结合所有三个: 为了获得终极的浮动效果,结合平移、旋转和缩放。这允许复杂的动画,元素同时移动、旋转和生长/收缩,赋予其引人入胜的多维外观。
当你尝试这些组合时,可能性是无限的。以不同的值来玩耍持续时间和延迟以调整速度和时间,为任何元素创建真正自定义的浮动动画。
在图像上创建浮动效果
我们希望,到目前为止您知道如何调整 Floating Effects 扩展的不同设置。
作为奖励,我们将向您展示如何使用一些图像创建一个很棒的部分 漂浮效果 並 定位扩展:
您可以观看下面的视频,向您展示完整的流程。
首先,选择让我们选择一些用于创建我们部分的图像。
然后,我们添加一个全宽 Flexbox 或网格,适用于 3 列和 2 行,并将所有图像(如以下屏幕截图)排列在适当的框内。
Now,我们重点来讲讲位置和浮动效应,我们建议从定位开始,在实现浮动效应之前,仔细查看您的设计,并精确定位所有图像和粒子。
Master Addons定位扩展来准确定位图像, 首先,在位置扩展内选择‘Relative’, 然后,根据需要继续对齐您的图像或任何其他元素。
我们已经完成了所有图像的定位,附上的屏幕截图说明了当前的排列。
最后,我们将浮动效果应用于所需的图像,我们将平移 X 和 Y 效果应用于第一列和第三列的图像,旋转 Z 效果已专门应用于个人资料图片,请参阅以下 GIF 文件以查看当前的视觉结果。
的 漂浮效果 extension 为您的网站上的动画元素提供了无穷无尽的可能性,通过简单而强大的翻译、旋转和缩放自定义选项,您可以创建动态的、引人注目的浮动效果,让访问者与之结合 定位延伸、您完全控制元素的移动和放置,以实现真正定制的设计。
不要害怕尝试不同的设置和组合,为您的网站找到完美的浮动效果,只要稍微发挥创意,您就可以提升您的网页设计,创造更具互动性的用户体验。
如果您在此扩展程序中遇到任何问题,请随时在此处发表评论或通过我们的方式与我们联系 网站联系表.
