jquery 视觉差

基础概念

jQuery视觉差（Parallax Scrolling）是一种网页设计技术，通过在滚动页面时改变背景图像的位置或大小，创造出一种深度感和立体感。这种效果可以让网页看起来更加动态和吸引人。

类型

背景图像视觉差：滚动时改变背景图像的位置。
元素视觉差：滚动时改变页面中特定元素的位置或大小。
多层视觉差：结合多个元素和背景图像，创造出复杂的视觉效果。

应用场景

网站首页：用于吸引用户注意力，展示品牌特色。
产品展示页：通过视觉差效果突出产品特点。
游戏页面：增加游戏的互动性和趣味性。

示例代码

以下是一个简单的jQuery视觉差效果的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Parallax Effect</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .parallax {
            /* The image used */
            background-image: url("your-image.jpg");

            /* Set a specific height */
            min-height: 500px; 

            /* Create the parallax scrolling effect */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .content {
            padding: 16px;
        }
    </style>
</head>
<body>

<div class="parallax">
    <div class="content">
        <h1>Welcome to Our Parallax World</h1>
        <p>Scroll down to see the effect.</p>
    </div>
</div>

<div class="content">
    <h1>Content Section</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        $('.parallax').css('background-position', '0 ' + (-scrollTop * 0.5) + 'px');
    });
</script>

</body>
</html>