使用jQuery实现简单视差（Parallax）效果

Parallax（视差）滚动是计算机图形里面的一个特别技巧，通过前景、背景图片的速度差来营造图层交错的感觉。

jquery, parallax

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3717
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="bg"></div>
<section>
    <div class="black">
        <h1>Simple Parallax Effect</h1>
        <h2>An Interactive Codepen by Scott Marshall</h2>
        <h3>What is Parallax</h3>
        <p>Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D video game and adding to the immersion.</p>
        <h3>How it's Created</h3>
        <p>You might be expecting a huge tutorial on Parallax Scrolling but actually this effect has little to no syntax and is easy to achieve in a matter of minutes. Within minutes you can create an amazing effect like the one you see on this page.
            <p>It's created with a little bit of Css and Jquery the effect is simple. To achieve you must first create a div with the following attributes:</p>
            <ul>
                <li>position : fixed;</li>
                <li>width: 100%;</li>
                <li>height: 300%;</li>
                <li>background: ( your image url );</li>
                <li>top: 0;</li>
                <li>left: 0;</li>
            </ul>
            <p>So why should we use this syntax and why is it valid? We must set the div to the fixed position so that the image background remains fixed. Secondly we set the width to 100% to cover the document and set the height a little larger to compensate
                for the scrolled effect. Next we set the top and left positions to 0 so that the background image is set to top left. After this syntax is applied you can set the background image you would like to have a scroll effect for.</p>
            <h3>The JQuery</h3>
            <p>Like the Css there is not much to expect for the Jquery the syntax is simple and completes the parallax effect so that you can start creating amazing looking pages! </p>
            <p>For the JQuery we will be using the Jquery Scroll Function. First we create a new function which is called parallax. In this function we create a variable which is equal to the top of the browser window. Last but not least we change the css
                so the when the window is scrolled the background image in negatively scrolled by a certain amount of pixels. This effect can be sped up or slowed down.</p>
    </div>
    <div class="white">
        <h1>Scroll Down for Demo</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis orci quis massa consequat consequat. Vestibulum vel velit vitae justo mattis tempus sed id ex. Donec tempus bibendum dolor nec bibendum. Suspendisse potenti. Suspendisse diam
            mauris, consequat non nulla id, tempor ultricies mi. Proin ullamcorper tortor sit amet quam interdum elementum. Sed convallis urna in faucibus pretium.

<p>Nunc rhoncus aliquet sem, sit amet facilisis purus convallis at. Nam semper tortor id leo varius, vitae pharetra neque volutpat. Donec tempor commodo pretium. Fusce porta, est vel consectetur sollicitudin, magna elit fringilla nisl, sed feugiat
                ipsum tortor sed nunc. Aenean ac maximus mi. In non dui pharetra, ullamcorper elit at, bibendum sem. Fusce eu libero sodales nisi mattis finibus sed ut metus. Vivamus mollis tortor mauris. Sed quam orci, bibendum finibus neque et, suscipit
                varius turpis.</p>
    </div>
</section>

Parallax（视差）滚动是计算机图形里面的一个特别技巧，通过前景、背景图片的速度差来营造图层交错的感觉。

jquery, parallax

编辑器支持Emmet

快捷键

Parallax（视差）滚动是计算机图形里面的一个特别技巧，通过前景、背景图片的速度差来营造图层交错的感觉。

jquery, parallax

jQuery.parallax实现剪纸效果鼠标视差动效

使用jQuery.PFold.js插件实现的纸张折叠展开效果 - 图片详情

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：