ITPub博客

首页 > IT职业 > IT职场 > 使用CSS和JavaScript创建基本的视差滚动效果(3)

使用CSS和JavaScript创建基本的视差滚动效果(3)

原创 IT职场 作者:cenfeng 时间:2019-07-26 14:09:46 0 删除 编辑

 一种横跨屏幕水平移动的parallaxing鱼

所以我们现在有一个带有两个平行气泡的页面,每个气泡与滚动相比都以较低的速率移动。没有逻辑规定相对于文档滚动的程度,页面上的气泡应该精确到位。

对于下一个对象,我们将是parallaxing,让我们对它进行排列,使对象从窗口的左边缘向右滑动,与滚动条同步。当滚动条位于最顶部时,对象位于左边缘,逐渐移动,直到滚动条位于最右端,此时对象将位于右边缘。鱼对象的位置与其他图层的位置相似,但靠近窗口的左侧和底部。

演示:   带有parallaxing气泡和鱼的页面

CSS:

1
2
3
4
五
6
7
8
9
10
11
12
13
14
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >#bubbles1,#bubbles2,#fish {</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  宽度:100%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  身高:100%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  顶部:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  左:0;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  位置:固定;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  z-index:-1;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  background:url(bubbles1.png)5%50%不重复;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
#鱼{</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  左:-100%;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
  background:url(fish.png)对90%不重复;</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
}</font></font>



来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69933200/viewspace-2651849/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    125
  • 访问量
    129472