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

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

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

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

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

CSS：

"vertical-align: inherit;" > "vertical-align: inherit;" >＃bubbles1，＃bubbles2，＃fish { "vertical-align: inherit;" > "vertical-align: inherit;" >
 宽度：100％; "vertical-align: inherit;" > "vertical-align: inherit;" >
 身高：100％; "vertical-align: inherit;" > "vertical-align: inherit;" >
 顶部：0; "vertical-align: inherit;" > "vertical-align: inherit;" >
 左：0; "vertical-align: inherit;" > "vertical-align: inherit;" >
 位置：固定; "vertical-align: inherit;" > "vertical-align: inherit;" >
 z-index：-1; "vertical-align: inherit;" > "vertical-align: inherit;" >
 background：url（bubbles1.png）5％50％不重复; "vertical-align: inherit;" > "vertical-align: inherit;" >
}
"vertical-align: inherit;" > "vertical-align: inherit;" >
＃鱼{ "vertical-align: inherit;" > "vertical-align: inherit;" >
 左：-100％; "vertical-align: inherit;" > "vertical-align: inherit;" >
 background：url（fish.png）对90％不重复; "vertical-align: inherit;" > "vertical-align: inherit;" >
}

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

转载于:http://blog.itpub.net/69933200/viewspace-2651849/