パララックスの練習3

2014/02/13

パララックスの練習3

幅が固定されたページの外からicon01がスライドしてくる動きを作っていきます。
その際、ページの外ではicon01が見えないようにします。

index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="function.js"></script>
    <title>Parallaxの練習</title>
</head>
<body>
<div id="wrapper">
    <div id="icon01">
        <p>icon01</p>
    </div>
</div>
</body>
</html>

wrapperの中にicon01が入った形を作りました。

style.css

#wrapper{
    background-color:#dddddd;
    height:3000px;
    width:800px;
    margin:0 auto;
    overflow:hidden;
}
#icon01{
    position:relative;
    width:200px;
    height:200px;
    background-color:#888888;
    top:100px;
    left:-300px;
}

wrapper幅を固定し、中央揃えにします。
wrapperにoverflow:hiddenを設定することで、icon01がwrapperの外で見えないようにします。
icon01のpositionをrelativeにすると、親要素であるwrapperを基準にして位置が決まります。
これでウィンドウの大きさに左右されずにicon01を動かすことができます。

function.js

$(function(){
    var li01Pos = ($("#icon01").offset());//最初の位置
    $(window).scroll(function(){
        var y = $(this).scrollTop();
        $("#icon01").css("top",li01Pos.top + y)
        if(y < 600){
            $("#icon01").css("left", y -300 );
        }if(y > 1200){
            $("#icon01").css("left", + y - 900 );
        }
    });
});

offset()はウィンドウの左上を基準にして位置を取得するため、leftのプロパティを変更するために使うと、正しい動作が得られません。
初期値である-300pxにyを足していくとうまくいきました。

これで以上です。

技術

jQuery