0
Şu anda bir Shooting Star komut dosyası kullanıyorum Web sitesinde çekim yıldızlarını rastgele hale getirmek için çevrimiçi buldum. Bir çekim yıldızı görünür web sayfasından çıktığında, kaydırma çubukları görünür ve bir süreliğine tüm sayfayı yeniden boyutlandırır. Bu oldukça sık görülür. Web sayfasının kenarına ulaştıktan sonra çekim yıldızının kendisini silmesinin bir yolu var mı, yoksa belki de web sayfası çekim yıldızlarından etkilenmeyecek mi? İşte komut dosyası var web sitesi var: http://codepen.io/manufosela/pen/Gymih İşte kod: Bir elemanın içeriği, boyutlarının ötesine gittiğindeKomut Dosyası Yeniden Boyutlandır Web Sayfası
<html>
<head>
<title>Shooting star Example</title>
<meta charset="utf-8">
<meta name="author" content="@manufosela">
</head>
<body class="stars">
<h1>SHOOTING STARS...</h1>
<div id="ShootingStarParams"></div>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ShootingStarClass.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var shootingStarObj = new ShootingStar("body");
shootingStarObj.launch();
});
</script>
</body>
</html>
body { color:#FFF; height:600px; width:99%; height:95%; color:#FFF; }
.stars {
z-index: 0; position: absolute; /* width: 420em; height: 70em; */
background-image: url(http://www.14denoviembre.es/img/hori.png), url(http://www.14denoviembre.es/img/stars_5.png); background-repeat: repeat-x,repeat-x repeat-y;
transform:translate3D(0em, 0em, 0); animation: stars 21s ease; transform-style: preserve-3d;
}
(function(){
/**
author: @manufosela
2013/08/27 copyleft 2013
ShootingStar class Main Methods:
launch: launch shooting stars every N seconds received by param. 10 seconds by default.
launchStar: launch a shooting star. Received options object by param with:
- dir (direction between 0 and 1)
- life (between 100 and 400)
- beamSize (between 400 and 700)
- velocity (between 2 and 10)
**/
ShootingStar = function(id) {
this.n = 0;
this.m = 0;
this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
this.options = {};
id = (typeof id != "undefined")?id:"";
this.capa = ($(id).lenght > 0)?"body":id;
this.wW = $(this.capa).innerWidth();
this.hW = $(this.capa).innerHeight();
};
ShootingStar.prototype.addBeamPart = function(x, y) {
this.n++;
var name = this.getRandom(100, 1);
$("#star"+name).remove();
$(this.capa).append("<div id='star"+name+"'></div>");
$("#star"+name).append("<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>");
if (this.n > 1) $("#haz" + (this.n - 1)).css({ color:"rgba(255,255,255,0.5)" });
$("#haz" + this.n).css({ top: y + this.n, left: x + (this.n * this.options.dir) });
}
ShootingStar.prototype.delTrozoHaz = function() {
this.m++;
$("#haz" + this.m).animate({opacity:0}, 75);
if (this.m >= this.options.beamSize) { $("#ShootingStarParams").fadeOut("slow"); }
}
ShootingStar.prototype.getRandom = function(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
ShootingStar.prototype.toType = function (obj) {
if (typeof obj === "undefined") { return "undefined"; /* consider: typeof null === object */ }
if (obj === null) { return "null"; }
var type = Object.prototype.toString.call(obj).match(/^\[object\s(.*)\]$/)[1] || '';
switch (type) {
case 'Number': if (isNaN(obj)) { return "nan"; } else { return "number"; }
case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
}
if (typeof obj === "object") { return "object"; }
return undefined;
}
ShootingStar.prototype.launchStar = function(options) {
if (this.toType(options) != "object") { options = {}; }
this.options = $.extend({}, this.defaultOptions, options);
this.n=0;
this.m=0;
var i=0, l=this.options.beamSize,
x=this.getRandom(this.wW - this.options.beamSize - 100, 100), y=this.getRandom(this.hW - this.options.beamSize - 100, 100),
self = this;
for(; i<l; i++) { setTimeout(function(){ self.addBeamPart(x, y); }, self.options.life + (i * self.options.velocity)); }
for(i=0; i<l; i++) { setTimeout(function(){ self.delTrozoHaz() }, self.options.beamSize + (i * self.options.velocity)); }
$("#ShootingStarParams").html("Launching shooting star. PARAMS: wW: " + this.wW + " - hW: " + this.hW + " - life: " + this.options.life + " - beamSize: " + this.options.beamSize + " - velocity: " + this.options.velocity);
$("#ShootingStarParams").fadeIn("slow");
}
ShootingStar.prototype.launch = function(everyTime) {
if (this.toType(everyTime) != "number") { everyTime = 10; }
everyTime = everyTime * 1000;
this.launchStar();
var self = this;
setInterval(function() {
var options = {
dir: (self.getRandom(1, 0))?1:-1,
life: self.getRandom(400, 100),
beamSize: self.getRandom(700, 400),
velocity: self.getRandom(10, 4)
}
self.launchStar(options);
}, everyTime);
}
})();