26-11-2014 Saat: 15:29
Web sayfanızdaki yüklenme işlemlerinizin uçuşan yıldızlardan oluşan bir animasyonla süslenmesini ister misiniz? Georgi tarafından hazırlanan bu şık tasarım sayesinde bir canvas öğesini JavaScript ile süsleyebilir, bu yapıyı oluşturabilirsiniz.
Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.
Birbirinin kopyası yıldızların koordinatlarını yöneterek, perdeye giren ve bir süre sonra çıkan oyuncular misali görünürlükleriyle oynayarak, klasik canvas yapısını etkileyici bir şekilde kullanıyor Georgi’nin JavaScript kodları. Anlaşılır bir şekilde temiz ve sade olarak yazılmış kodlar, bizlere de tasarımı özgünleştirme şansı tanıyor.
Şimdi bu yapıyı oluşturmaya başlıyoruz.
HTML ve CSS Kodları
İhtiyaç duyacağımız içi boş bir canvas tanımı.
Hazırsanız yıldızlardan oluşan yükleniyor animasyonunu birlikte oluşturalım.
Birbirinin kopyası yıldızların koordinatlarını yöneterek, perdeye giren ve bir süre sonra çıkan oyuncular misali görünürlükleriyle oynayarak, klasik canvas yapısını etkileyici bir şekilde kullanıyor Georgi’nin JavaScript kodları. Anlaşılır bir şekilde temiz ve sade olarak yazılmış kodlar, bizlere de tasarımı özgünleştirme şansı tanıyor.
Şimdi bu yapıyı oluşturmaya başlıyoruz.
HTML ve CSS Kodları
İhtiyaç duyacağımız içi boş bir canvas tanımı.
Kod:
<canvas></canvas>
Beraberinde de bu canvas öğesini ekrana düzgün bir şekilde basmamızı sağlayacak CSS tanımları da şöyle :Kod:
body,html{margin:0; padding:0;}
canvas {position:absolute; display: block; top:0;left:0;}
JavaScript Kodları
[color=#6b6b6b][font=Open Sans]Eğer Georgi’nin tasarımında[/font][/color]
yıldızların rengini değiştirmek isterseniz ctx.fillStyle = “#ffeb3b”;yıldızlara border eklemek isterseniz ctx.strokeStyle = ‘rgba(0,0,0,0)';tasarımın arkaplanını değiştirmek isterseniz ctx.fillStyle = ‘#e91e63′;alanlarını değiştirmeniz gerekmektedir.
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Circle (x, y, radius) {
this
.x = x;
this
.y = y;
this
.radius = radius;
this
.angle = 0;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Star (x, y, rotation) {
this
.x = x;
this
.y = y;
this
.length = 15;
this
.scaleX = .1;
this
.scaleY = .1;
this
.rotation = rotation;
this
.angle = Math.random() * 360;
this
.vx = 0;
this
.vy = 0;
this
.alpha = 1;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
Star.prototype.draw =
function
(ctx) {
ctx.save();
ctx.globalAlpha =
this
.alpha;
ctx.translate(
this
.x,
this
.y);
ctx.rotate(
this
.rotation * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(24,0);
ctx.lineTo(24,24);
ctx.lineTo(0,24);
ctx.closePath();
ctx.scale(
this
.scaleX,
this
.scaleY);
ctx.strokeStyle =
'rgba(0,0,0,0)'
;
ctx.lineCap =
'butt'
;
ctx.lineJoin =
'miter'
;
ctx.miterLimit = 4;
ctx.save();
ctx.fillStyle =
"#ffeb3b"
;
ctx.beginPath();
ctx.moveTo(12,0.89);
ctx.lineTo(15.609,8.204);
ctx.lineTo(23.682,9.377);
ctx.lineTo(17.842,15.071);
ctx.lineTo(19.22,23.11);
ctx.lineTo(12,19.315);
ctx.lineTo(4.78,23.11);
ctx.lineTo(6.159,15.071);
ctx.lineTo(0.318,9.377);
ctx.lineTo(8.39,8.204);
ctx.lineTo(12,0.89);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
};
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Square(x, y) {
this
.x = x;
this
.y = y;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
canvas = document.querySelector(
'canvas'
),
ctx = canvas.getContext(
'2d'
),
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
stars = [],
circle =
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Circle(W / 2, H / 2, 110),
square =
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Square(W / 2, H / 2);
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
animateRect(square) {
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
star, counter = 0;
square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047));
square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047));
circle.angle++;
stars.push(
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Star(square.x, square.y, Math.random() * 360));
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
moveStars() {
for[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(
var[ltr][color=#000000][color=#000000]
[/color][/color][/ltr]
i = 0; i < stars.length; i++) {
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
star = stars[i];
if[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(star.scaleX <= 1) {
star.scaleX += .05;
star.scaleY += .05;
}
if[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(star.alpha >= .05) {
star.alpha -= .015;
}
else[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
if[ltr][color=#000000][color=#000000]
[/color][/color][/ltr]
(star.alpha < .1) {
stars.splice(stars[i], 1);
}
star.vx = Math.sin(star.angle) * .5;
star.vy = Math.cos(star.angle) * .5;
star.angle += .1;
star.x += star.vx;
star.y += star.vy;
star.draw(ctx);
}
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
(
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle =
'#e91e63'
;
ctx.fillRect(0, 0, W, H);
animateRect(square);
moveStars();
}());
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Circle (x, y, radius) {
this
.x = x;
this
.y = y;
this
.radius = radius;
this
.angle = 0;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Star (x, y, rotation) {
this
.x = x;
this
.y = y;
this
.length = 15;
this
.scaleX = .1;
this
.scaleY = .1;
this
.rotation = rotation;
this
.angle = Math.random() * 360;
this
.vx = 0;
this
.vy = 0;
this
.alpha = 1;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
Star.prototype.draw =
function
(ctx) {
ctx.save();
ctx.globalAlpha =
this
.alpha;
ctx.translate(
this
.x,
this
.y);
ctx.rotate(
this
.rotation * Math.PI / 180);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(24,0);
ctx.lineTo(24,24);
ctx.lineTo(0,24);
ctx.closePath();
ctx.scale(
this
.scaleX,
this
.scaleY);
ctx.strokeStyle =
'rgba(0,0,0,0)'
;
ctx.lineCap =
'butt'
;
ctx.lineJoin =
'miter'
;
ctx.miterLimit = 4;
ctx.save();
ctx.fillStyle =
"#ffeb3b"
;
ctx.beginPath();
ctx.moveTo(12,0.89);
ctx.lineTo(15.609,8.204);
ctx.lineTo(23.682,9.377);
ctx.lineTo(17.842,15.071);
ctx.lineTo(19.22,23.11);
ctx.lineTo(12,19.315);
ctx.lineTo(4.78,23.11);
ctx.lineTo(6.159,15.071);
ctx.lineTo(0.318,9.377);
ctx.lineTo(8.39,8.204);
ctx.lineTo(12,0.89);
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();
ctx.restore();
};
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Square(x, y) {
this
.x = x;
this
.y = y;
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
canvas = document.querySelector(
'canvas'
),
ctx = canvas.getContext(
'2d'
),
W = canvas.width = window.innerWidth,
H = canvas.height = window.innerHeight,
stars = [],
circle =
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Circle(W / 2, H / 2, 110),
square =
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Square(W / 2, H / 2);
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
animateRect(square) {
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
star, counter = 0;
square.x = W / 2 + (circle.radius * Math.cos(circle.angle * .047));
square.y = H / 2 + (circle.radius * Math.sin(circle.angle * .047));
circle.angle++;
stars.push(
new[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
Star(square.x, square.y, Math.random() * 360));
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
moveStars() {
for[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(
var[ltr][color=#000000][color=#000000]
[/color][/color][/ltr]
i = 0; i < stars.length; i++) {
var[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
star = stars[i];
if[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(star.scaleX <= 1) {
star.scaleX += .05;
star.scaleY += .05;
}
if[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
(star.alpha >= .05) {
star.alpha -= .015;
}
else[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
if[ltr][color=#000000][color=#000000]
[/color][/color][/ltr]
(star.alpha < .1) {
stars.splice(stars[i], 1);
}
star.vx = Math.sin(star.angle) * .5;
star.vy = Math.cos(star.angle) * .5;
star.angle += .1;
star.x += star.vx;
star.y += star.vy;
star.draw(ctx);
}
}
[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6] [/color][/font][/color][/ltr]
(
function[ltr][color=#6b6b6b][font=Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace][color=#b9bdb6]
[/color][/font][/color][/ltr]
drawFrame(){
window.requestAnimationFrame(drawFrame, canvas);
ctx.fillStyle =
'#e91e63'
;
ctx.fillRect(0, 0, W, H);
animateRect(square);
moveStars();
}());
