Question

我阅读了stellar.js的文档，示例显示了垂直滚动的工作方式，我尝试了简单的水平滚动视差，但我不确定我哪里出错了。对于称为元素的小对象，我设置了数据 - 恒星比率，而对于背景，我设置了data-background-stellar-js。我已经看过许多垂直滚动的教程，而不是水平的。是否有其他方法可以通过jquery单独实现这一目标？

     <!DOCTYPE html>

<head>
    <title></title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }
        body {
            height:100%;
            margin:0px;
        }
        #bg1 {
            background:red;
        }
        #bg2 {
            background:green;
        }
        #bg3 {
            background:yellow;
        }
        .elements {
            width:40px;
            height:40px;
            background:black;
            position:fixed;
        }
    </style>
</head>

<body>
    <div id="bg1" data-stellar-background-ratio="0.5">
        <div class="elements" data-stellar-ratio="0.5"></div>
    </div>
    <div id="bg2" data-stellar-background-ratio="0.5">
        <div class="elements" data-stellar-ratio="0.5"></div>
    </div>
    <div id="bg3" data-stellar-background-ratio="0.5">
        <div class="elements" data-stellar-ratio="0.5"></div>
    </div>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="stellar.js"></script>
    <script type="text/javascript">
        $(function () {
            $.stellar({
                horizontalScrolling: true,
                verticalOffset: 40
            });
        });
    </script>
</body>

Answer 1

有用的链接：

http://dev.jonraasch.com/scrolling-parallax/docs

http://www.egstudio.biz/easy-parallax-with-jquery/

有很多不同的方法可以做到这一点，甚至可以在没有其他文件的情况下进行。

http://jsfiddle.net/4kG6s/1/

HTML

<div id="background">
</div>

<div id="middleground">
</div>

<div id="foreground">
</div>

CSS

div{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

#background{
    z-index:1;
    background:url('http://placehold.it/100x100&text=Background');
}
#middleground{
    z-index:2;
    background:url('http://placehold.it/250x250&text=Middleground');
    opacity:.5;
}
#foreground{
    z-index:3;
    background:url('http://placehold.it/350x350&text=Foreground');
    opacity:.25;
}

JS

/*
function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}

setInterval(AnimateMe, 1000/60);
*/

var strength1 = 50;
var strength2 = 100;
var strength3 = 200;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = 1* pageX * -1;
    var newvalueY = 1* pageY * -1;
    $('#background').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('#middleground').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('#foreground').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});

希望这一切都有帮助！

Answer 2

试用此代码见demo http://jsfiddle.net/nilesh026/4eBDE/1/

 <html>
 <head>
<title></title>
 <script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jquery.stellar.js"></script>

<style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    body {
        height:100%;
        margin:0px;
    }
    .photo {
        background-attachment: fixed;
        background-position: 50% 0;
        background-repeat: no-repeat;
        height: 450px;
        position: relative;
    }
    #bg1 {
        background:red;
    }
    #bg2 {
        background:green;
    }
    #bg3 {
        background:yellow;
    }
    .elements {
        width:400px;
        height:400px;
        background:black;
        position:fixed;
    }
</style>

<div class="photo" id="bg1" data-stellar-background-ratio="0.5">
    <div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div class="photo" id="bg2" data-stellar-background-ratio="0.5">
   <div class="elements" data-stellar-ratio="0.5"></div>
</div>
<div class="photo" id="bg3" data-stellar-background-ratio="0.5">
   <div class="elements" data-stellar-ratio="0.5"></div>
</div>
<script type="text/javascript">
    $(function () {
        $.stellar({
            horizontalScrolling: true,
            verticalOffset: 40
        });
    });
</script>

使用恒星js的Jquery水平视差效果？

2 个答案: