滚动锚点链接交互动效

教程内容:

设置锚链接交互,选择“滚动至”特定目标,可制作指定滚动区域的交互效果

整体预览

244F2B14-46CA-44C5-B00E-0F78C89CD44D.png

制作画板

这个案例需要制作一个比较长的页面,每一个页面就是一屏,并制作一个导航供链接

331DF9A9-FD35-417A-9DEA-4753DFE5320F.png

在第一屏的左侧制作一下导航

画面滚动时导航需要固定,所以在右侧状态栏勾选一下滚动时固定位置


添加交互

830A1721-ADDD-4730-ADC8-96B79A4BB2DC.png

我们先添加第一屏的交互

点击第一个导航按钮链接至第一屏的素材

制作点击滚动至目标动画

如上图左侧箭头所示,可拖动蓝色标志设定展现的内容,红紫色区域为调整的偏移量

以此类推第二个导航按钮也添加一下滚动至目标动画

37DEBBFC-2661-49D6-82EA-DEF76060C26F.png

按照上面的方法添加完剩下两屏的交互

为了效果更完整,可以给导航每个按钮都添加一下hover状态


添加top按钮


最后在导航下方添加一个top按钮链接到第一屏

需要注意的是top按钮在第一屏是不显示的,所以在第一屏将top按钮的透明度调整为0即可

制作完成

点击前往查看→查看视频教程获取源文件


标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作