3D旋转木马是一种旋转木马,其滑块移动深度而不是穿过平面:旋转,缩放或绕轨道运行,因此非活动滑块明显地位于活动滑块的后面。在元素器中,您可以从中获取它 图像旋转木马小部件的覆盖流布局的,或者从 专门构建的设计.
4种风格值得你花时间,它们做的工作不同,其中一种会让你的页面变慢,如果你选择错误的内容,没有任何好处。每个的实时演示,再加上将流畅的3D旋转木马与口吃的旋转木马分开的设置。
Coverflow:大多数人的意思
Center slide正对着你方正,两边的滑道在Y轴上旋转开,微缩昏暗,你的眼睛除了中间无处可去。
整个诀窍就到此为止了,这就是为什么 coverflow 在 iTunes 的死亡中幸存下来。外围幻灯片足够可见,足以证明还有更多、足够模糊,以至于你无法阅读它们。人们点击箭头来解决紧张局势。
3种设置完成大部分工作:
- 旋转:侧滑转动多远,超过50° 且邻居变成不可读条子,30到40° 是读作深度而不是失真的范围。
- 深度:他们坐得有多远,推得太远,侧滑缩成缩略图,构图失去平衡。
- 每个视图的幻灯片:coverflow至少需要三个可见或没有“flow。” 桌面上设置为3, 移动设备上设置为1, 跳过尴尬的2。
这款不需要Pro。的 免费图像旋转木马小部件 内置覆盖流布局。
适合: 案例研究、作品集、专辑风格的收藏。
坏: 任何人需要比较的东西。 Coverflow 的构建是为了让你看一件事。
翻转:双面卡
Card在垂直轴上旋转了整整180° ,前面朝外,后面朝内,两面都装有真实的内容。
3D效果大多是装饰,这款不是,每张幻灯片内容加倍,这也是它在团队页面上赢得一席之地的原因,正面照片和名字,背面角色,bio和链接,脚印一样,信息加倍。
人们错的设置是 背面可见性. 留下,中转看到前脸镜面鬼流血,微妙到小编错过,视网膜屏幕明显,关掉。
第二件事:保持翻转低于 600ms。翻转是一种揭示,需要完全秒的揭示会停止感觉响应并开始感觉像加载状态。
适合: 团队网格,之前/之后,规格卡,定价与细节相反。
坏: zai背面会空空如也的任何东西,后面什么都没有的翻转,shi浪费的点击。
要站立卡而不是旋转木马滑梯一样的双面显露?就是 元素器翻转框小部件'的工作。
Arc:在曲线上滑动
滑梯骑着一个圆圈的边缘,圆圈的中心位于褶皱下方。每个圆圈都直立到达弧形顶部,并在离开时倾斜。
Arc是WordPress网站上最不常见的3D风格,这是它的大部分价值,一个访问者已经看到coverflow一百次了,他们没有看到这个。
付出一些回报:倾倒运动意味着幻灯片只能在弧形顶部完全可读,需要在外围清晰可见的内容(价格、日期、规格)将与设计图像和简短标题相抗衡。
适合: 目录、样本列表、菜单、类似物品的集合。
坏: data。如果人们需要一次读取三张幻灯片,请使用网格。
轨道:围绕中心进行圆周运动
物品绕着固定中心绕一整圈。顶部的物品是活跃且全尺寸的;其余的随着它们经过后面而缩小。
Orbit说了一些结构性的东西,而其他布局却没有说:这个循环。一个真正返回到开始的四阶段过程读起来很完美。一个结束的五步入职流程不会。一个圆圈承诺返回,如果你的内容没有返回,人们就会等待一些永远不会到来的东西。
Coverflow当内容是循环的时候使用轨道当是列表的时候使用。
适合: 流程轮、生态系统图、能力图、服务周期。
坏: 有开始和结束的序列。
3D转盘怎么做不会结巴
3D变换在GPU上便宜, 弄错了价格也贵, 四件事将光滑的转盘与简陋的转盘分开, 按照它们咬你的顺序:
- 只有动画变换和不透明度。 动画宽度、高度、顶部或左侧迫使每个帧重新计算布局。变换和不透明度直接到达合成器。这里的每个设计都坚持这两个。
- 盖上图像大小。 3D旋转木马一次性在内存中保存了几个幻灯片,因为它们都是可见的,在任何移动之前,每张400 KB的六个幻灯片是2.4 MB,将它们置于200 KB以下,并服务于WebP。
- 3D内不要堆叠3D。 Coverflow 轨道内部的翻转卡创建嵌套的 3D 上下文,浏览器处理不一致,尤其是 Safari 在不可预测的时刻将内部变换压平。选一个。
- 尊重减少运动。 有些人有前庭障碍,深度动画是常见的触发因素。这里的每一个设计都会在以下情况下消失
prefers-reduced-motion是设置的,如果你自己构建,也要这样做。
Android手机中端手机上测试,而不是在浏览器的设备模拟器中,模拟器调整视口大小,但保留桌面的GPU。这就是“它对我机器没问题”的来源。
3D旋转木马是否会损害页面速度?
Not by itself。transform-based 动画运行在合成器线程上,并且不会阻塞主线程,因此它不会将您的交互移动到 Next Paint 太多。
What does hurt: the images。comes 折叠上方有六个全尺寸幻灯片的转盘是六个渲染阻塞图像请求,与您最大的满足感油漆竞争。Lazy-load所有超过第一个幻灯片,设置明确的宽度和高度,所以没有什么变化,并保持第一个幻灯片的图像在150 KB以下。
3D不是你的问题,有效载荷是。
如果旋转木马根本没有动画化,而不是动画化得很糟糕,那么通常 Swiper 无法初始化而不是转换问题。 刷卡器故障排除指南 涵盖阻止其加载的内容。
常见问题
Elementor 有 3D 转盘吗?
Not nately。elementor的媒体旋转木马(Pro)有一个覆盖流皮肤,可以提供温和的3D效果,但没有翻转,弧线或轨道选项,对于那些你需要一个插件的人,主插件的免费 图片旋转木马 包括覆盖流布局,本页上的四个 Pro 设计涵盖其余部分。
如何在 Elementor 中制作覆盖流旋转木马?
掉 图片旋转木马小部件 到页面上,添加您的图像,然后在旋转木马设置下将布局从标准切换到覆盖流。将每视图幻灯片设置为 3,旋转到 35° 左右,然后打开居中幻灯片,以便活动图像位于中间而不是向左齐平。
Coverflow 和 3D 转盘有什么区别?
Coverflow是3D转盘的一种:侧滑道在Y轴上旋转后退的那种,翻转、弧线和轨道也是3D转盘;它们只是使用不同的轴线和路径,四种都通过深度而不是跨越平面移动滑道。
3D旋转木马在移动设备上工作吗?
是的,有调整。 Coverflow 应降至 768px 以下的每视图一张幻灯片或侧板成为无法使用的条子。Flip 工作原理不变。Arc 和 orbit 需要更宽的视口才能正确读取,因此两者都会回落到手机上的标准水平幻灯片。
Safari中为什么我的3D旋转木马会闪烁?
Safari几乎总是背面可见性,除非你明确地隐藏它,否则它会呈现旋转元素的反面,它会显示为闪烁或重影镜像在旋转中设置 backface-visibility: hidden 在旋转元件上,它停止。
选择哪一个
Coverflow 如果你不确定 这是人们已经理解的样式,免费的图像旋转木马小部件给你没有许可证 如果你的内容真正有两个方面翻转 弧如果你想要的东西 在你的利基的第一页上没有其他人有轨道 只有当你显示的东西实际上是循环 如果部分可能根本不想要旋转木马, 旋转木马与滑块 在动议风格重要之前解决这个问题。
如果您想轮换的是您的最新帖子,请在我们的 Marquee 布局中进行轮换 Elementor 博客模板 在博客页面的顶部放置一个特色帖子旋转木马。
该套装的二十种设计中的八种 在免费插件上导入。免费八个都不是3D的,尽管Keystone功能滑块很接近:推广一个项目运行FLIP位置动画而不是深度变换。
所有二十种设计均采用 小部件生成器,这也是您用来构建自己的工具。如果您正在权衡许可证,则 定价页面 列出每层解锁的内容。
这四个人都有现场演示 元素轮播小部件 page,与其他十六种设计并列,如果宁愿先并排看到全套, 所有二十个滑块模板 通过相同的处理收集在一个地方。
二十个中的每一个都是a 主插件小部件或扩展因此,它们安装的方式与库存小部件相同。对于 a 缩略图条形画廊 而不是3D轨道, 画廊滑块小部件 是现成的选择。
