Altın Konu Web Sitenize Kar Efekti

KERİM ERBAY · 27 Ara 2024

[CODE lang="javascript" title="Kar Yağdırma Ayarlanabilir!"]var snowStorm = (function(window, document) {

// --- Turkmmo KERİM ERBAY ---

this.autoStart = true; // Karın otomatik olarak başlayıp başlamaması.
this.excludeMobile = true; // Cep Telefonları için kasma sorunu GPU vs sorunlar için Devre dışı bırakılabilir.
this.flakesMax = 100; // Toplam kar miktarını sınırlayın (düşme + yapışma)
this.flakesMaxActive = 64; // Tek seferde düşen kar miktarını sınırlayın (daha az = daha düşük CPU kullanımı)
this.animationInterval = 50; // Teorik "kare başına milisaniye" ölçümü. 20 = hızlı + sorunsuz ancak yüksek CPU kullanımı. 50 = daha stabil ama daha yavaş
this.useGPU = true; // Dönüşüm tabanlı donanım hızlandırmayı etkinleştirin, CPU yükünü azaltın.
this.className = null; // CSS Kar elemanlarında daha fazla özelleştirme için sınıf adı
this.excludeMobile = true; // Cep Telefonu için kasma yaparsa aç/kapat
this.flakeBottom = null; // Y ekseni kar sınırı için tamsayı, "tam ekran" kar efekti için 0 veya boş
this.followMouse = true; // Kar hareketi kullanıcının faresine yanıt verebilir
this.snowColor = '#fff'; // Sarı karı yemeyin (ya da kullanmayın?)

this.snowCharacter = '•'; // • = bullet, · bazı sistemlerde vb. karedir.
this.snowStick = true; // Karın tabana "yapışması" gerekip gerekmediği. Kapalıyken asla toplanmaz.
this.targetElement = null; // Karın ekleneceği öğe (null = document.body) - örneğin bir öğe kimliği olabilir. 'myDiv' veya bir DOM düğümü referansı
this.useMeltEffect = true; // Düşen karı geri dönüştürürken (veya nadiren düşerken), tarayıcı destekliyorsa kar "erir" ve söner
this.useTwinkleEffect = false; // Düşerken karın rastgele "titremesine" ve görüş alanından çıkmasına izin verin
this.usePositionFixed = false; // true = kaydırma sırasında kar dikey olarak kaymaz. CPU yükünü artırabilir, varsayılan olarak devre dışıdır - etkinleştirilirse yalnızca desteklendiğinde kullanılır
this.usePixelPosition = false; // Karın üstü/solu ve yüzdeler için piksel değerlerinin kullanılıp kullanılmayacağı. Gövde konum:relative veya targetElement belirtilmişse otomatik olarak etkinleştirilir.

// --- daha az kullanılan bitler ---

this.freezeOnBlur = true; // Yalnızca pencere odaktayken (ön planda) kar yağar. CPU'dan tasarruf sağlar.
this.flakeLeftOffset = 0; // Kabın kenarındaki sol kenar boşluğu/görüntü payı alanı (örn. tarayıcı penceresi). Yatay kaydırma çubukları görüyorsanız bu değerleri artırın.
this.flakeRightOffset = 0; // Kabın kenarında sağ kenar boşluğu/oluk alanı
this.flakeWidth = 8; // kar öğesi için ayrılmış piksel genişliği
this.flakeHeight = 8; // Kar öğesi için ayrılan maksimum piksel yüksekliği
this.vMaxX = 5; // Kar için maksimum X hız aralığı
this.vMaxY = 4; // Kar için maksimum Y hız aralığı
this.zIndex = 0; // Her kar tanesine uygulanan CSS yığınlama sırası
// --- "Bu noktadan sonra içeride kullanıcı tarafından değiştirilecek KOD yok ---

var storm = this,
features,
// UA sniffing ve backCompat görüntü oluşturma modu, sabit konumu vb. kontrol eder.
isIE = navigator.userAgent.match(/msie/i),
isIE6 = navigator.userAgent.match(/msie 6/i),
isMobile = navigator.userAgent.match(/mobile|opera m(ob|in)/i),
isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
noFixed = (isBackCompatIE || isIE6),
screenX = null, screenX2 = null, screenY = null, scrollY = null, docHeight = null, vRndX = null, vRndY = null,
windOffset = 1,
windMultiplier = 2,
flakeTypes = 6,
fixedForEverything = false,
targetElementIsRelative = false,
opacitySupported = (function(){
try {
document.createElement('div').style.opacity = '0.5';
} catch(e) {
return false;
}
return true;
}()),
didInit = false,
docFrag = document.createDocumentFragment();

features = (function() {

var getAnimationFrame;

/**
*
*
* Turkmmo Kerim ERBAY
*/

function timeoutShim(callback) {
window.setTimeout(callback, 1000/(storm.animationInterval || 20));
}

var _animationFrame = (window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
timeoutShim);

// pencereye uygula, Chrome'da "yasadışı başlatma" hatalarını önleyin
getAnimationFrame = _animationFrame ? function() {
return _animationFrame.apply(window, arguments);
} : null;

var testDiv;

testDiv = document.createElement('div');

function has(prop) {

// Özellik desteği TESTi
var result = testDiv.style[prop];
return (result !== undefined ? prop : null);

}

//Yerel Not.
var localFeatures = {

transform: {
ie: has('-ms-transform'),
moz: has('MozTransform'),
opera: has('OTransform'),
webkit: has('webkitTransform'),
w3: has('transform'),
prop: null // Normal özellikler değerleri.
},

getAnimationFrame: getAnimationFrame

};

localFeatures.transform.prop = (
localFeatures.transform.w3 ||
localFeatures.transform.moz ||
localFeatures.transform.webkit ||
localFeatures.transform.ie ||
localFeatures.transform.opera
);

testDiv = null;

return localFeatures;

}());

this.timer = null;
this.flakes = [];
this.disabled = false;
this.active = false;
this.meltFrameCount = 20;
this.meltFrames = [];

this.setXY = function(o, x, y) {

if (!o) {
return false;
}

if (storm.usePixelPosition || targetElementIsRelative) {

o.style.left = (x - storm.flakeWidth) + 'px';
o.style.top = (y - storm.flakeHeight) + 'px';

} else if (noFixed) {

o.style.right = (100-(x/screenX*100)) + '%';
// dikey kaydırma çubukları oluşturmaktan kaçının
o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

} else {

if (!storm.flakeBottom) {

// eğer sabit bir alt koordinat kullanmıyorsanız...
o.style.right = (100-(x/screenX*100)) + '%';
o.style.bottom = (100-(y/screenY*100)) + '%';

} else {

// mutlak zirve.
o.style.right = (100-(x/screenX*100)) + '%';
o.style.top = (Math.min(y, docHeight-storm.flakeHeight)) + 'px';

}

}

};

this.events = (function() {

var old = (!window.addEventListener && window.attachEvent), slice = Array.prototype.slice,
evt = {
add: (old?'attachEvent':'addEventListener'),
remove: (old?'detachEvent':'removeEventListener')
};

function getArgs(oArgs) {
var args = slice.call(oArgs), len = args.length;
if (old) {
args[1] = 'on' + args[1]; // prefix
if (len > 3) {
args.pop(); // Tutma yok
}
} else if (len === 3) {
args.push(false);
}
return args;
}

function apply(args, sType) {
var element = args.shift(),
method = [evt[sType]];
if (old) {
element[method](args[0], args[1]);
} else {
element[method].apply(element, args);
}
}

function addEvent() {
apply(getArgs(arguments), 'add');
}

function removeEvent() {
apply(getArgs(arguments), 'remove');
}

return {
add: addEvent,
remove: removeEvent
};

}());

function rnd(n,min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random()*n)+min;
}

function plusMinus(n) {
return (parseInt(rnd(2),10)===1?n*-1:n);
}

this.randomizeWind = function() {
var i;
vRndX = plusMinus(rnd(storm.vMaxX,0.2));
vRndY = rnd(storm.vMaxY,0.2);
if (this.flakes) {
for (i=0; i<this.flakes.length; i++) {
if (this.flakes.active) {
this.flakes.setVelocities();
}
}
}
};

this.scrollHandler = function() {
var i;
// Mutlak bir alt değer verilmemişse, kar tanelerini pencerenin altına "bağlayın"
scrollY = (storm.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || (noFixed ? document.body.scrollTop : 0), 10));
if (isNaN(scrollY)) {
scrollY = 0; // Netscape 6 kaydırma düzeltmesi
}
if (!fixedForEverything && !storm.flakeBottom && storm.flakes) {
for (i=0; i<storm.flakes.length; i++) {
if (storm.flakes.active === 0) {
storm.flakes.stick();
}
}
}
};

this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth - 16 - storm.flakeRightOffset;
screenY = (storm.flakeBottom || window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - storm.flakeRightOffset;
screenY = storm.flakeBottom || document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight;
}
docHeight = document.body.offsetHeight;
screenX2 = parseInt(screenX/2,10);
};

this.resizeHandlerAlt = function() {
screenX = storm.targetElement.offsetWidth - storm.flakeRightOffset;
screenY = storm.flakeBottom || storm.targetElement.offsetHeight;
screenX2 = parseInt(screenX/2,10);
docHeight = document.body.offsetHeight;
};

this.freeze = function() {
// animasyonu duraklat
if (!storm.disabled) {
storm.disabled = 1;
} else {
return false;
}
storm.timer = null;
};

this.resume = function() {
if (storm.disabled) {
storm.disabled = 0;
} else {
return false;
}
storm.timerInit();
};

this.toggleSnow = function() {
if (!storm.flakes.length) {
// ilk Start
storm.start();
} else {
storm.active = !storm.active;
if (storm.active) {
storm.show();
storm.resume();
} else {
storm.stop();
storm.freeze();
}
}
};

this.stop = function() {
var i;
this.freeze();
for (i=0; i<this.flakes.length; i++) {
this.flakes.o.style.display = 'none';
}
storm.events.remove(window,'scroll',storm.scrollHandler);
storm.events.remove(window,'resize',storm.resizeHandler);
if (storm.freezeOnBlur) {
if (isIE) {
storm.events.remove(document,'focusout',storm.freeze);
storm.events.remove(document,'focusin',storm.resume);
} else {
storm.events.remove(window,'blur',storm.freeze);
storm.events.remove(window,'focus',storm.resume);
}
}
};

this.show = function() {
var i;
for (i=0; i<this.flakes.length; i++) {
this.flakes.o.style.display = 'block';
}
};

this.SnowFlake = function(type,x,y) {
var s = this;
this.type = type;
this.x = x||parseInt(rnd(screenX-20),10);
this.y = (!isNaN(y)?y:-rnd(screenY)-12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // vX/vY için "amplifikasyon" (pul boyutu/tipine göre)
this.vAmp = this.vAmpTypes[this.type] || 1;
this.melting = false;
this.meltFrameCount = storm.meltFrameCount;
this.meltFrames = storm.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10+(this.type/5)*10);
this.o = document.createElement('div');
this.o.innerHTML = storm.snowCharacter;
if (storm.className) {
this.o.setAttribute('class', storm.className);
}
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything?'fixed':'absolute');
if (storm.useGPU && features.transform.prop) {
// GPU ile hızlandırılmış kar.
this.o.style[features.transform.prop] = 'translate3d(0px, 0px, 0px)';
}
this.o.style.width = storm.flakeWidth+'px';
this.o.style.height = storm.flakeHeight+'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.cursor = 'default';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);

this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
// güvenlik kontrolü
return false;
}
storm.setXY(s.o, s.x, s.y);
};

this.stick = function() {
if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom+'px';
} else {
s.o.style.display = 'none';
s.o.style.bottom = '0%';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};

this.vCheck = function() {
if (s.vX>=0 && s.vX<0.2) {
s.vX = 0.2;
} else if (s.vX<0 && s.vX>-0.2) {
s.vX = -0.2;
}
if (s.vY>=0 && s.vY<0.2) {
s.vY = 0.2;
}
};

this.move = function() {
var vX = s.vX*windOffset, yDiff;
s.x += vX;
s.y += (s.vY*s.vAmp);
if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X ekseni kaydırma kontrolü
s.x = 0;
} else if (vX < 0 && s.x-storm.flakeLeftOffset < -storm.flakeWidth) {
s.x = screenX-storm.flakeWidth-1; // flakeWidth;
}
s.refresh();
yDiff = screenY+scrollY-s.y+storm.flakeHeight;
if (yDiff<storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) {
// ~1/1000 her karede havada erime şansı
s.melting = true;
s.melt();
// yalnızca bir kareyi aşamalı olarak eritin
// s.melting = false;
}
if (storm.useTwinkleEffect) {
if (s.twinkleFrame < 0) {
if (Math.random() > 0.97) {
s.twinkleFrame = parseInt(Math.random() * 8, 10);
}
} else {
s.twinkleFrame--;
if (!opacitySupported) {
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
} else {
s.o.style.opacity = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 0 : 1);
}
}
}
}
};

this.animate = function() {
// ana animasyon döngüsü
// hareket etme, durumu kontrol etme, ölme vb.
s.move();
};

this.setVelocities = function() {
s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1);
s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1);
};

this.setOpacity = function(o,opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};

this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.setOpacity(s.o,s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px';
s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px';
s.meltFrame++;
} else {
s.recycle();
}
}
};

this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything?'fixed':'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o,1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize+'px';
s.o.style.lineHeight = (storm.flakeHeight+2)+'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10);
s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};

this.recycle(); // set up x/y coords etc.
this.refresh();

};

this.snow = function() {
var active = 0, flake = null, i, j;
for (i=0, j=storm.flakes.length; i<j; i++) {
if (storm.flakes.active === 1) {
storm.flakes.move();
active++;
}
if (storm.flakes.melting) {
storm.flakes.melt();
}
}
if (active<storm.flakesMaxActive) {
flake = storm.flakes[parseInt(rnd(storm.flakes.length),10)];
if (flake.active === 0) {
flake.melting = true;
}
}
if (storm.timer) {
features.getAnimationFrame(storm.snow);
}
};

this.mouseMove = function(e) {
if (!storm.followMouse) {
return true;
}
var x = parseInt(e.clientX,10);
if (x<screenX2) {
windOffset = -windMultiplier+(x/screenX2*windMultiplier);
} else {
x -= screenX2;
windOffset = (x/screenX2)*windMultiplier;
}
};

this.createSnow = function(limit,allowInactive) {
var i;
for (i=0; i<limit; i++) {
storm.flakes[storm.flakes.length] = new storm.SnowFlake(parseInt(rnd(flakeTypes),10));
if (allowInactive || i>storm.flakesMaxActive) {
storm.flakes[storm.flakes.length-1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};

this.timerInit = function() {
storm.timer = true;
storm.snow();
};

this.init = function() {
var i;
for (i=0; i<storm.meltFrameCount; i++) {
storm.meltFrames.push(1-(i/storm.meltFrameCount));
}
storm.randomizeWind();
storm.createSnow(storm.flakesMax); // ilk partiyi yeniden oluştur
storm.events.add(window,'resize',storm.resizeHandler);
storm.events.add(window,'scroll',storm.scrollHandler);
if (storm.freezeOnBlur) {
if (isIE) {
storm.events.add(document,'focusout',storm.freeze);
storm.events.add(document,'focusin',storm.resume);
} else {
storm.events.add(window,'blur',storm.freeze);
storm.events.add(window,'focus',storm.resume);
}
}
storm.resizeHandler();
storm.scrollHandler();
if (storm.followMouse) {
storm.events.add(isIE?document:window,'mousemove',storm.mouseMove);
}
storm.animationInterval = Math.max(20,storm.animationInterval);
storm.timerInit();
};

this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
// yüklü ve çalışıyor
return true;
}
if (typeof storm.targetElement === 'string') {
var targetID = storm.targetElement;
storm.targetElement = document.getElementById(targetID);
if (!storm.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"');
}
}
if (!storm.targetElement) {
storm.targetElement = (document.body || document.documentElement);
}
if (storm.targetElement !== document.documentElement && storm.targetElement !== document.body) {
// Ekran boyutları yerine öğeyi almak için işleyiciyi yeniden eşleyin
storm.resizeHandler = storm.resizeHandlerAlt;
//ve piksel konumlandırmayı zorla etkinleştirme
storm.usePixelPosition = true;
}
storm.resizeHandler(); // sınırlayıcı kutu elemanlarını al
storm.usePositionFixed = (storm.usePositionFixed && !noFixed && !storm.flakeBottom); // pozisyon:sabit kullanılıp kullanılmayacağı
if (window.getComputedStyle) {
// gövdenin veya kullanıcı tarafından belirlenen kar üst öğesinin göreceli olarak konumlandırılıp konumlandırılmadığını belirlemeye çalışın.
try {
targetElementIsRelative = (window.getComputedStyle(storm.targetElement, null).getPropertyValue('position') === 'relative');
} catch(e) {
// oh bitti
targetElementIsRelative = false;
}
}
fixedForEverything = storm.usePositionFixed;
if (screenX && screenY && !storm.disabled) {
storm.init();
storm.active = true;
}
};

function doDelayedStart() {
window.setTimeout(function() {
storm.start(true);
}, 20);
// Temizleme
storm.events.remove(isIE?document:window,'mousemove',doDelayedStart);
}

function doStart() {
if (!storm.excludeMobile || !isMobile) {
doDelayedStart();
}
// Temizleme
storm.events.remove(window, 'load', doStart);
}

// karı başlatmak için kancalar
if (storm.autoStart) {
storm.events.add(window, 'load', doStart, false);
}

return this;

}(window, document));
[/CODE]

CSS:

body { background:#000000; }

Bu kod sayesinde, web sitenize Turkmmo Gibi kar yağdırma efekti yapabileceksiniz. JavaScript tabanlı bir kar yağışı efekti uygular. Kar tanelerinin sayısı, animasyon hızı, GPU hızlandırması gibi çeşitli parametrelerin yanı sıra erime ve yanıp sönme gibi efektlerin özelleştirilmesine olanak tanır. Ana özellikleri ve işlevselliği şu şekilde özetlenebilir:

Ana Özellikler
Özelleştirme Seçenekleri:

flakesMax: Maksimum kar tanesi sayısını kontrol eder.

flakesMaxActive: Aktif olarak düşen kar tanelerinin sayısını sınırlar.

animationInterval: Animasyon hızını ayarlar.

snowColor ve snowCharacter: Kar tanelerinin renk ve görünümünü tanımlar.

useMeltEffect ve useTwinkleEffect: Kar tanelerinin erime ve yanıp sönme efektlerini etkinleştirir.

Performans Optimizasyonları:

GPU hızlandırma (useGPU) daha akıcı animasyonlar için desteklenir.

freezeOnBlur, tarayıcı sekmesi etkin olmadığında efekti durdurarak CPU kaynaklarını korur.

Duyarlı Davranış:

Pencere boyutlandırma ve kaydırmaya uyum sağlar.

Mobil cihazlar için özelleştirilebilir davranış (excludeMobile).

Gelişmiş Kontroller:

targetElement: Kar yağışının sayfanın belirli bir kısmına sınırlanmasına olanak tanır.

flakeBottom: Kar yağışının Y eksenindeki sınırını belirler.

followMouse: Kar tanelerinin fare imlecine göre hareket etmesini sağlayarak etkileşim ekler.

Uygulama Özellikleri
Nesne Tabanlı Tasarım:

Kar taneleri, konumlandırma, animasyon ve geri dönüşüm işlemlerini yöneten nesneler olarak temsil edilir (this.SnowFlake).

Olay Yönetimi:

Tarayıcılar arası uyumluluğu sağlamak için olay dinleyicilerinin eklenmesi ve kaldırılması için soyutlama kullanır.

Rastgelelik:

Kar tanelerinin başlangıç konumu, hızı ve hareketi, doğal bir görünüm eklemek için rastgele değerlerle kontrol edilir.

Animasyon:

requestAnimationFrame API'si, akıcı ve verimli animasyonlar için kullanılır.

Geri Dönüşüm:

Kar taneleri ekranın altına ulaştığında yeniden kullanılır, böylece bellek kullanımı optimize edilir.

Kullanım Talimatları

Scripti Dahil Et: Kodu web sayfanıza dahil edin; bunu satır içi veya harici bir script dosyası olarak yapabilirsiniz.

Parametreleri Özelleştirin: Tasarımınıza uygun şekilde flakesMax, snowColor gibi ayarları düzenleyin.

Başlatma: Kar yağışı efektini başlatmak için snowStorm.start() çağrısını yapın. Açıp kapatmak için snowStorm.toggleSnow() kullanabilirsiniz.

Hedef Eleman Ekleyin: Kar yağışını belirli bir alanda sınırlamak istiyorsanız, bir DOM öğesini targetElement olarak atayın.