首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

网页滚屏特效原理剖析

效果图

效果图

原理解析

1、首先确定是满屏,那么哪种方式能够是满屏呢,很显然,fixed布局可以满屏布局。posiiton:fixed;

2、然后就是每一屏100%宽度,依次从上往下排列。

3、那么这个布局如果完成的话,就可以在每一屏布局自己想要的UI了。

4、当滚动鼠标的时候,fixed容器属性top每次往上移动-100%。top:-100%;

5、监听鼠标滚轮向上向下事件,通过jquery.animate更改top值,就可以实现上下滚屏

原理图

主要代码

1、html代码截图

html源码

2、js源码截图

js源码截图

3、css代码不在贴出,代码太长,主要的布局是container采用fixed布局,其余的每一屏采用relative布局,然后依次从上往下开始排列各屏。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190412A0ABQC00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券