Canvasパララックス２

by nekosmash

HTML

<script src="http://dl.dropbox.com/u/63305355/easeljs-0.4.2.min.js"></script>
<script src="http://dl.dropbox.com/u/63305355/tweenjs-0.2.0.min.js"></script>
<script src="http://dl.dropbox.com/u/63305355/jquery.mousewheel.js"></script>
<script src="http://dl.dropbox.com/u/63305355/jquery.easie.js"></script>
<div id="wrapper">
<canvas></canvas>
</div>

<div id="contents">
    <div id="c01" class="section">
        <h2>SECTION 01</h2>
        <p>HTML5を使用した</p>
    </div>
    <div id="c02" class="section">
        <h2>SECTION 02</h2>
        <p>パララックス</p>
    </div>
    <div id="c03" class="section">
        <h2>SECTION 03</h2>
        <p>を作ってみました</p>
    </div>
    <div id="c04" class="section">
        <h2>SECTION 04</h2>
        <p>なかなかいかす</p>
    </div>
    <div id="c05" class="section">
        <h2>SECTION 05</h2>
        <p>感じにはなったかな？</p>
    </div>
    <div id="c06" class="section">
        <h2>SECTION 06</h2>
        <p>スムーススクロールもつけてます</p>
    </div>
</div>

CSS

html{
    min-height: 100%;
    overflow: auto;
    position:relative;
    z-index: 1;
    background:#002;
}

body{
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: relative;
    z-index: 1;
}

body > #wrapper{
    height: auto;
    overflow: auto;
    position: fixed;
    z-index: 1;
    width: 100%;
    height:100%;
    min-height:100%;
}

canvas{
    z-index: 1;
    position: fixed;
}

#contents {
position: relative;
z-index: 5;
}

div.section {
    padding: 20px;
    height: 800px;
    margin-bottom: 1px;
    margin:0 100px;
    background:rgba(255,255,255,0.8);
    
}

JavaScript

var stage;
var shapes = new Array();

window.onload = function() {

    $("canvas").attr({height:$("#wrapper").height()});
    $("canvas").attr({width:$("#wrapper").width()});

    stage = new Stage($("canvas")[0]);
    
    CreateDraw(25);
    
};

function CreateDraw(count){

    
    for(var i=0;i<count;i++){
        
        var randX = Math.floor(Math.random()*$(window).width());
        var randY = Math.floor(Math.random()*$(window).height());
        var color1 = Math.floor(Math.random()*255);
        var color2 = Math.floor(Math.random()*155);
        var color3 = Math.floor(Math.random()*255);        
        var g = new Graphics();
        g.beginRadialGradientFill(
            [Graphics.getRGB(255,255,255,1.0),
             Graphics.getRGB(color1,color2,color3,0)],
            [.6,.8], 0, 0, 0, 0, 0, 3*(i+10))
        .drawCircle(0,0,3*(i+50));
    
        var s = new Shape(g);
        s.compositeOperation ="lighter";    
        s.x = randX;
        s.y = randY;
        s.scaleX = $(window).width()/400;
        s.scaleY = $(window).width()/400;
        s.alpha = .4;
        
        shapes[i]=s;
        
        stage.addChild(s);
        stage.update();
        
    }
};

var scrollPosition = 0;

$(window).scroll(function (evt) {

    var scrollDeff = $(window).scrollTop()-scrollPosition;
    scrollPosition = $(window).scrollTop();
    
    for (var shape in shapes){
        shapes[shape].y = shapes[shape].y + scrollDeff/(shape*2);
    }
    
    //描画！
    stage.update();
    
});

$(window).resize(function() {
    $("canvas").attr({height:$("#wrapper").height()});
    $("canvas").attr({width:$("#wrapper").width()});
    stage = new Stage($("canvas")[0]);
    CreateDraw(25);
});


$(function() {
    var scrolly = 0;
    var speed = 100;
    var end;
    
    var agent = navigator.userAgent;
    if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
        return;
    }
    
   ...