10TL.NET ** › Ana Kategori: Destek-Yönetim-Kurallar › MyBB Destek › Grafik - İstek Bölümü › Tasarımınızı Düzenleyin v
Yıldızlarla Yükleniyor Animasyonu (Spinner)
     
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Gösterim Stili
Yıldızlarla Yükleniyor Animasyonu (Spinner)
abdullahozturk İzinli
Create your own
Yorum Sayısı: 4,225
Konu Sayısı: 616
Üyelik Tarihi: 07-10-2014
Rep Puanı: 203
Teşekkürler: 6
9 mesaj içinde 281 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: abdullahozturk
SanalPara (SP): 331 SP
#1
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ı.

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();
}());
Ara
Cevapla PGM
Teşekkür verenler:
Point1234 İzinli
Grafiker
Yorum Sayısı: 2,829
Konu Sayısı: 282
Üyelik Tarihi: 11-09-2013
Teşekkürler: 0
0 mesaj içinde 0 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: Point1234
SanalPara (SP): 6 SP
#2
26-11-2014 Saat: 15:36
Önizleme Ekleyin.
Ara
Cevapla PGM
Teşekkür verenler:
#Power Çevrimdışı
ETERNITY TOO SHORT
Yorum Sayısı: 11,535
Konu Sayısı: 641
Üyelik Tarihi: 27-09-2013
Rep Puanı: 522
Teşekkürler: 7
129 mesaj içinde 934 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: #Power
SanalPara (SP): 1,302 SP
#3
26-11-2014 Saat: 15:42
Caps olursa bi zahmet :)
Ara
Cevapla PGM
Teşekkür verenler:
The Legend Çevrimdışı
Emektar Üye
Yorum Sayısı: 4,509
Konu Sayısı: 419
Üyelik Tarihi: 10-10-2013
Rep Puanı: 178
Teşekkürler: 0
1 mesaj içinde 163 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: The Legend
SanalPara (SP): 974 SP
#4
26-11-2014 Saat: 16:33
Caps veya Önizleme eklerseniz daha iyi olur yinede teşekkürler .. 
WWW Ara
Cevapla PGM
Teşekkür verenler:
abdullahozturk İzinli
Create your own
Yorum Sayısı: 4,225
Konu Sayısı: 616
Üyelik Tarihi: 07-10-2014
Rep Puanı: 203
Teşekkürler: 6
9 mesaj içinde 281 teşekkür verildi.

Kullanıcı Adı Değişiklikleri: abdullahozturk
SanalPara (SP): 331 SP
#5
26-11-2014 Saat: 19:50
Koddostundan önizleyin ne üşengeçsiniz yaa :D
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi


Online Shopping App
Online Shopping - E-Commerce Platform
Online Shopping - E-Commerce Platform
Feinunze Schmuck Jewelery Online Shopping