パララックスの練習1

2014/02/13

パララックスの練習1

はじめまして、小山田です。

未経験でWebの世界に飛び込んだので分からないことだらけ。
一つずつWebの知識と技術を身につけていきたいと思いますのでよろしくお願いします。

ではさっそく一つ目。

初めてjQueryに挑戦。
スクロールすると画面上のicon01が左へスライドしていく動きを作っていきます。
まず、
http://jquery.com/download/
からjQueryのファイルをダウンロードしてきて、HTMLファイルに読み込ませます。
記述の順番はcssファイル→jQueryファイル→自作のjsファイルです。

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>

icon01のみ入れておきました。

style.css

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

#icon01の大きさと色、初期位置を設定。

function.js

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

jQueryは$(function(){});の中に書いていきます。
$(“要素”)と書くことで、中の要素に対してアクションを行います。

.offset()はjQueryのAPIの一つ。先に書いた要素の位置を取得します。さらに.topや.leftをつなげると、それぞれの値を出します。

.css(プロパティ,値)は指定した要素のプロパティを任意の値に設定します。

※jQueryにはほかにもたくさんのAPIがあるので、その都度リファレンスで機能を確認していくとよいです。

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

技術

jQuery