ユニクロ 2016 PC サイトトップ 雪のアニメーション canvas

ユニクロ

おそらく、以下のjsが主要なjs

$('body') .css({'position': 'relative'}) .append('<canvas id="backstage" class="canvas" style="position:fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;display: block;"></canvas>'); var canvas = null, g = null, $id = function(id){ return document.getElementById(id); }, List = [], ELM = new Image(), SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = $(window).height(), INTERVALS = 1000/60, IMG = "http://www.uniqlo.com/jp/images/top/161202/snow_161202.png", reset = function(){ List = []; ELM.src = IMG; ELM.onload = function(){ g.drawImage(ELM, -1000, -1000); }; g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); }, addObject = function(obj){ for(var i=0,len=List.length; i<len+1; i++){ if(List[i] == null){ List[i] = obj; break; } } }; var Snow = function(sx, sy, _image){ var speed = (Math.floor(Math.random() * 3.5) + 1.0) * ((Math.random() * 0.35) + 0.25), x = sx, y = sy, image = new Image(), rnd = (Math.random() * 0.32) + 0.22, h = _image.height * rnd, w = _image.width * rnd; image = _image; this.move = function(){ g.save(); var scale = (Math.random() * 0.1) + 0.01; g.drawImage(_image, x, y, w, h); g.restore(); y = y + speed; if(y > SCREEN_HEIGHT || h < 0 || w < 0){ return false; } return true; }; }; var mainLoop = function(){ g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); g.fillStyle = 'rgb(233,220,210)'; g.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); for(var n=0,nLen=List.length; n<nLen; n++){ var obj = List[n]; if (obj && !obj.move()) { delete List[n]; } } var x_pos = Math.random() * SCREEN_WIDTH, grid = parseInt(SCREEN_WIDTH/3), center = Math.random(); if (x_pos < (grid*0.8)) { x_pos = Math.random() * grid; } else if (center>0.6) { x_pos = (Math.random() * (grid*2)) + grid; } else if (x_pos > grid) { x_pos = (Math.random() * SCREEN_WIDTH) + (grid*2); } if ((Math.random()*10)+1 > 9) { addObject(new Snow(x_pos, 0-Math.random()*50, ELM)); } setTimeout(mainLoop, INTERVALS); }; $(window).resize(function() { var timer; clearTimeout(timer); timer = setTimeout(function(){ SCREEN_WIDTH = window.innerWidth; SCREEN_HEIGHT = window.innerHeight; canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; }, 100); }).load(function(){ canvas = $id('backstage'); canvas.width = SCREEN_WIDTH; canvas.height = SCREEN_HEIGHT; g = canvas.getContext("2d"); reset(); mainLoop(); });

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

同じカテゴリの前後の記事


  1. KATOON.NET
  2. TRASH
  3. ユニクロ 2016 PC サイトトップ 雪のアニメーション canvas