这是一款简单的网页背景滚动视觉差特效。该背景视觉差特效使用几句简单javascript语句即可完成,在页面滚动时,背景图片和网页元素可以形成滚动视觉差效果。
使用方法
HTML结构
在<body>
中放置你需要的HTML元素。
<body> <div> <!--可以是任何内容--> </div> </body>
CSS样式
将<body>
元素的高度设置为2倍,背景图片的background-size属性设置为cover
,background-attachment属性设置为固定fixed
。
body { font-family: 'Ubuntu Mono', sans-serif; height: 200%; width: 100%; background-image: url('img/bg.jpg'); background-attachment: fixed; background-size: cover; }
页面中的块级元素使用绝对定位。
div { position: absolute; top: 40%; left: 20%; color: white; font-size: 1.2em; text-shadow: #000 1px 1px 1px; width: 1000px; height: 200px; padding: 20px; background-color: rgba(0, 0, 0, 0.7); border-radius: 6px; }
javaScript
制作页面背景视觉差效果的javascript代码非常简单:通过监听window对象的onscroll
事件,在页面滚动时修改body
元素的backgroundPosition
样式。
function parallax() { window.onscroll = function() { var speed = 5.0; document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px " +(-window.pageYOffset/speed)+"px"; } }
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!