当前位置: 首页 > 知识库问答 >
问题:

javascript - 这个页面伴随scroll上下滑动的动画效果的实现思路是什么?

郭永怡
2024-05-17

疑问页面:
https://www.shiseido.co.jp/sb/wonderland/

可能需要网络辅助才能打开,在移动端展示效果。

当前的效果:

  1. 局部内容随着上下滑动变化不停的显隐变换;
  2. 内容上移,背景下移。

这些的实现思路是怎样的,是否有对应的插件可以使用。

如果上面写的效果有更具体确切的名字,还请指正;如果过有漏掉的效果,谢谢补充啦~

共有3个答案

滑文昌
2024-05-17

这技术叫 视差滚动

常乐
2024-05-17

你可以看看这个插件GSAP,看看能不能满足你的需求
https://www.zhihu.com/tardis/bd/art/621677583?source_id=1001

宰父俊民
2024-05-17

和钉钉官网的动画挺像的 去搜下钉钉官网的实现思路 感觉是一种类型

 类似资料:
  • 本文向大家介绍JavaScript实现滑动门效果,包括了JavaScript实现滑动门效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了JavaScript实现滑动门效果的具体代码,供大家参考,具体内容如下 一、什么是滑动门 首先你要了解什么是滑动门。 生活中我们经常看到一些网站或是商城有一些滑动门的效果 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二、实现滑

  • 本文向大家介绍js实现分享到随页面滚动而滑动效果的方法,包括了js实现分享到随页面滚动而滑动效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现分享到随页面滚动而滑动效果的方法。分享给大家供大家参考。具体如下: 页面向上向下滚动,分享到的模块随着滑动。 要点: 获得页面垂直居中的位置   上代码: 希望本文所述对大家的javascript程序设计有所帮助。

  • 页面滚动到这里的时候,图片固定不动,滚动条可以继续滚动。 缤瑞COOL官网 非常感谢!!

  • 本文向大家介绍Android实现页面滑动切换动画,包括了Android实现页面滑动切换动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现页面滑动切换动画的具体代码,供大家参考,具体内容如下 实现两个页面滑动切换,一些相册的效果也是如此 一个Activity的界面配置文件 activity_main.xml: MainActivity.java: 在res/anim

  • 本文向大家介绍javascript图片滑动效果实现,包括了javascript图片滑动效果实现的使用技巧和注意事项,需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法,具体内容如下,先看一下效果图: 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: css: js操作: 更多关于滑动效果的专题,请点击下方链接查看: javascript滑

  • 本文向大家介绍Android编程实现ViewPager多页面滑动切换及动画效果的方法,包括了Android编程实现ViewPager多页面滑动切换及动画效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考,具体如下: 一、首先,我们来看一下效果图,这是新浪微博的Tab滑动效果。我们可以手势滑动