パララックスの練習2

2014/02/13

パララックスの練習2

スクロールすると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="icon01">
        <p>icon01</p>
    </div>
</body>
</html>

style.css

@CHARSET "UTF-8";
body{
    background-color:#dddddd;
    height:3000px;
}
#icon01{
    position:absolute;
    width:200px;
    height:200px;
    background-color:#888888;
    top:100px;
    left:-300px;
}

ウインドウ外からスタートするため、#icon01の初期位置をleft:-300pxにします。

function.js

$(function(){
    var li01Pos = ($("#icon01").offset());
    $(window).scroll(function(){
        var y = $(this).scrollTop();//スクロール位置
        $("#icon01").css("top",li01Pos.top + y)
        if(y < 800){
            $("#icon01").css("left",li01Pos.left + y );
        }if(y>1400){
            $("#icon01").css("left",li01Pos.left + y - 600 );
        }
    });
});

offset()で要素の位置を取得します。
.css(“top”,li01Pos.top + y)でスクロール位置に応じてtopのプロパティを増やしていきます。
途中で止まる動作はif文を使用。
1400－800=600px分止まっているので、動き出すときはその分を引かないとicon01がジャンプしたように見えてしまいます。

なんとか目的通りに動くようになりました。これで以上です。

技術

jQuery