Question

我刚开始学习视差，这就是我所拥有的

<!DOCTYPE HTML>
<html>
<head>
    <title> test parallax </title>
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <style type="text/css">
    body,ul,li,div,h1{
        margin: 0;
            padding: 0;
    }

    body{
        background: url(2.jpg);
    }
    #kotakgede{
        width: 960px;
        height: 2000px;
        margin: auto;
        position: relative;
    }

   .kotak1,.kotak2{
        width: 500px;
        height: 300px
    }

   .kotak1{
        background: red;
        position: absolute;
        top: 200px;
        display: inline-block;
    }

   .kotak2{
        background: blue;
        top: 800px;
        position: absolute;
        right: 0;
    }

</style>
</head>
<body>
    <div id="kotakgede" >
     <div data-speed='10' class='kotak1 parallax'><h1>Kotak Satu</h1></div>
     <div class='parallax kotak2' data-speed='100'><h1>Kotak Dua</h1></div>
    </div>

<script type="text/javascript">
    $('.parallax').each(function(){
    var $bgobj = $(this);

    $(window).scroll(function() {
        var posisi = -( ( $(window).scrollTop() - $bgobj.offset().top) / $bgobj.data('speed')); 

        var koordinat = '50% '+ posisi + 'px';

        $bgobj.css({ 'top': koordinat });
    }); 
});
</script>
</body>
</html>

当我在div上定义一个背景图片并更改bgobj.css后，它的作品是backgroundPosition，但我想要的是一个使用视差的小盒子，所以我使用＆＃39; top＆＃39;定位，但现在它不起作用

请帮助

Answer 1

您将背景图片放入<body>而不是<div>并创建奇怪的字符串变量： '50% '+ posisi + 'px'。

如何视差保证金最高值

1 个答案: