热点新闻
像大风车一样的旋转切换,图片背景一起变!
2024-08-03 12:32  浏览:619  搜索引擎搜索“爱农网”
温馨提示:信息一旦丢失不一定找得到,请务必收藏信息以备急用!本站所有信息均是注册会员发布如遇到侵权请联系文章中的联系方式或客服删除!
联系我时,请说明是在爱农网看到的信息,谢谢。
展会发布 发布信息 广告合作 软文发布

点击一下,图片就像大风车一样旋转切换为另一张。




*素材来自Weekend Max Mara《把秋天分享给你》

组件:连续点击-图片顺时针旋转切换(下、有触发区)

编号:11283(组件)

这是之前给大家介绍过的一种连续点击旋转切换玩法,点击后图片以下边中点为圆点旋转切换,看着很有意思。

更有意思的来啦!今天给大家推荐的是连续点击旋转切换的一个升级玩法。

再看下下面两个案例:




*素材来自奔驰铸星培训《想去哪儿就去哪儿,云旅游安排!》

组件:连续点击-图片顺时针旋转切换同时切换背景(下)

编号:11715(组件)




*素材来自五菱商用车《五菱E10「致富小精灵」超级变身show!》

组件:连续点击-图片顺时针旋转切换同时切换背景(下)

编号:11715(组件)

有没有发现有什么区别?

奔驰和五菱这两个案例,点击后不仅图片旋转切换,而且背景图也随之切换,交互效果非常巧妙,让场景变换更加真实具有沉浸感。

这种效果用 iPaiban Pro 黑科技编辑器的「连续点击-图片顺时针旋转切换同时切换背景(下)」组件(编号:11715)轻松实现。

除了以图片下边中点旋转切换的,还有以上、左、右3个方向的,都支持调整触发区和旋转快慢。






组件:连续点击-图片顺时针旋转切换同时切换背景(上)

编号:11719(组件)






组件:连续点击-图片顺时针旋转切换同时切换背景(左)

编号:11720(组件)






组件:连续点击-图片顺时针旋转切换同时切换背景(右)

编号:11721(组件)

以五菱的效果为例,一起来看看教程吧!

详细教程:

工具:iPaiban Pro 黑科技编辑器

组件:连续点击-图片顺时针旋转切换同时切换背景(下)

编号:11715(组件)

第1步:选择组件

登录 iPaiban Pro 编辑器后,点击编辑器右侧「组件」按钮,在「点击」-「旋转切换」分类中找到「连续点击-图片顺时针旋转切换同时切换背景(下)」组件,或者直接在搜索框中搜索组件编号11715,点击选择。






第2步:上传图片素材

①上传图片:点击右侧「+」号分别上传背景图和切换图。每张图片尺寸保持一致,切换图数量需要与背景图保持一致,切换图可以为GIF动图。






②调整图片顺序:上下拖动图片可调整图片顺序。






第3步:设置触发区域

双击编辑区的图片,在弹出的窗口中红色色块表示触发区域,可任意调整位置和大小。






第4步:调整动画参数

右侧滑动滑杆调整图片旋转切换的时间,下方可选择不同的旋转角度。






第5步:导入公众号后台

该组件不支持在编辑器内直接预览,内容编辑完成后继续点击最右侧「预览草稿」扫描二维码在手机预览,效果满意后接着点击「同步至微信后台」就可以了。






使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。

发布人:60fb****    IP:124.223.189***     举报/删稿
展会推荐86685
让朕来说2句
评论
收藏
点赞
转发