手淘装修案例分享

当前位置:首页 > 干货·资讯·问答·素材 > 手淘装修案例分享

新版手淘装修实现侧边缩略图卡盘嵌套下移入场动画模块案例参考

适用保健品及化妆品等行业手淘装修模块效果参考,像品牌店铺那种点击缩略图或卡盘按钮切换海报的同时还有下移入场动画模块效果如何实现?下移动画适合放上面轮播产品的赠品信息或活动信息等。让买家一眼能看出除了购买主产品,还能得到哪些赠品。今天给大家卡盘轮播嵌套坠落下移入场动画或缩放动画效果模块案例,样式新颖又实用,平时和活动都适用,希望能给你带来一些不一样的设计灵感哦。

直接通过以下视频来了解一下功能模块样式及效果。


不少运营或设计师都可以发现同行店铺的页面装修得非常好看,但自己的店铺又不知道如何实现,或没有人带你实现,导致想要的视觉一直无法在店铺呈现,现在能刷到这篇软文的同学也不算迟,小编来一一给大家讲解。可以利用疯狂自由模块轻松实现,高阶设计师爱用模块,可以利用配套工具自由组合搭配哦。

侧边卡盘动画效果,店铺热销产品不知如何凸出显示,可以直接左侧制作缩略图按钮,右边切换海报图,下方可加入动画利益点说明赠品等活动信息呈现更直观,这样的模块你有在装修使用上了吗?

QQ截图2022122813470222.png

那么我们要先准备好哪些图片呢,有参考尺寸吗?模块整体尺寸是:1200宽,高2000以内,首先设计师准备好轮播图,动画图,缩略小图等,像视频中是1200x1791的背景图尺寸,轮播图:1200x1791px 下移动画图1102x334px 缩略按钮图:可以单独做,每组两种,此案例中是和轮播图做在一起了。

1.png

把准备好的图上传到图片空间即可,命好名称。

那么模块怎么要在店铺装修上呈现呢?我们打开手淘首页装修后台,左侧已购小程序栏目中找到多层叠卡模块,把模块拖到右边的容器中。:如果店铺没有这个模块的可以到淘宝装修市场登入店铺主号订购 疯狂混搭自由工具模块链接:https://zx.taobao.com/detail.html?articleCode=zx_000033042模块在市场已上架多年,放心使用。

疯狂的美工混搭自由模块,高阶设计师都爱用的模块,想要装修效果与众不同可借助模块来实现更多创意特效,利用配套工具自由组合搭配。

模块配置已做好,喜欢的可以直接套用换成自己图片即可:

配置地址1:https://www.fkdmg.com/xcx/tools/?tdid=333

配置地址2:https://www.fkdmg.com/xcx/tools/?tdid=332 

视频中两个案例都有对应的配置,实现方法类似,就是动画的参数设置的不一样。

使用流程小编也简单的给整理了一份:

第一步:打开配置地址后可以看得到做好的一个模板,可以直接套用,左边的竖排按钮位置此案例中没有单独做,为了按钮能被点击,直接在图片上方设置了文字点击框,把文本这些参数全设置了透明的。如果是按这个模板的尺寸来做图,此区域不用动,直接按设置好的用就行。

2.png

第二步:那么轮播图以及动画怎么换呢,鼠标选中右边的轮播内容,右边可以看到自定义编辑框,点进去进入子层级。第一组的换完,后面组的一样的步骤。要加链接可以在子层级里画热区或组件上加上对应的链接地址。

3.png

进入子层级后,选中轮播图,把轮播图换成自己的图片地址。

4.png

第三步,下面的入场动画也要换成自己的图,入场动画是用了开场动画组件,动效设置那设置了垂直的移动参数。

5.png

由于入场动画是在轮播图下方图层,我们要换图片地址,那右上角图层管理点开,可以先把上面的轮播图层隐藏,换好地址再打开。

6.png

7.png

开场动画进入子层级换成自己图即可。要加链接左侧拖热区组件画上热区把对应的无线链接加上即可。

8.png

动效设置参数说明:这个没有固定的,你看自己需求,比如要动画从上面往下入场那就设置垂直移动参数,写数值,500或300都行,反之如果要从下到上就写-500或-300就OK。如果要从左往右或从右往左出场,就设置左右移动值200或-200就OK,具体看自己要呈现的效果做微调即可。

9.png

每一项内容做好之后生成代码装店铺即可,进入装修后台——已购小程序栏目——单品表达——小程序混搭模块拖到容器中,粘贴上代码保存上就把效果装修出来啦。

10.png

具体操作也有视频教程参考学习:tab卡盘动画系列案例操作流程https://www.fkdmg.com/article/7271.html可点这个链接直达。

化妆品、护肤品,保健品,等类目都适用的一个搭配轮播动画模块效果,喜欢这样效果的可以直接使用起来。

有任何疑问都可以联系客服专员沟通:旺旺:juehackr,微信:fkdmg_com

以上就是今天要分享的所有内容了,关注疯狂的美工官网,网站上每天会分享不同装修经验,网站上也有大量美工装修教程学习。

QQ截图202212281347022.png

疯狂的美工官方微信二维码

转载说明:欢迎转载本站所有文章,如需转载请注明来源于《疯狂的美工装修助手网站》。

本文链接:https://www.mgzxzs.com/stanli/8864.html

相关内容

  • 波浪
  • 波浪
  • 波浪
  • 波浪