1

私はstellar.jsのドキュメントを読み、例は垂直スクロールがどのように機能するかを示しています.単純な水平スクロール視差で手を試しましたが、どこが間違っているのかわかりません. 要素と呼ばれる小さなオブジェクトの場合は、data-stellar-ratio を設定し、背景の場合は 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>

4

2 に答える 2

4

便利なリンク：

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");
});

これがすべて役立つことを願っています!

于 2013-02-08T04:59:01.013 に答える
1

このコードを試す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>

于 2013-02-08T05:02:39.070 に答える