ile kodlanmıştır.
Bir bloga nasıl uçan nesne eklenebileceğini merak ettiğim seneler aklıma geldi. Yani küçük bir ikon ve web sitenizde sürekli olarak hareket hâlinde. Ancak o zamanlar bu konu hakkında pek bilgi bulamamış idim. Bugün ise bu konu ile ilgili olarak sorunsuz olarak çalışan bazı kodlar paylaşıyor olacağım. Böylelikle, JavaScript ile blogunuza uçan bir nesne ekleyebileceksiniz. Bu dilerseniz küçük bir futbol topu olabilir, dilerseniz küçük bir nesneye ait görsel olabilir. Yani uygun bulduğunuz bir ikonu kullanabilirsiniz. Bu tercih sizlere ait. Blogunuza farklılık katmak istiyorsanız, bu işlemi denemeyi düşünebilirsiniz. Dilerseniz, hemen ilgili adımlara göz atıyor olacağız.
JavaScript Kullanarak Blogunuza Uçan Nesne (Obje) Ekleyin
Temanızda yer alan aşağıdaki kodu bulun.
<head>
Yukarıdaki kodun ardından, aşağıdaki kodu ekleyin.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
animateDiv();
});
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.ucanesne').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.ucanesne').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed;
}
</script>
Temanızdaki CSS bölümüne aşağıdaki kodu ekleyin.
div.ucanesne {
width:10px;
height:10px;
background-image:url(ucan-nesne.png);
position:fixed;
left:0px;
top:0px;
}
Tekrar temanızda yer alan aşağıdaki kodu bulun.
</body>
Yukarıdaki kodun hemen öncesine, aşağıdaki kodu ekleyin.
<div class="ucanesne"></div>
Böylelikle, blogunuzda hareketli bir nesne meydana gelecektir. Yukarıdaki işlem, Blogger üzerinde denendi ve sorunsuz olarak çalışıyor. Dolayısı ile diğer yazılımlarda da muhtemelen sorunsuz olarak çalışacaktır. Ancak gerekirse, temanıza göre CSS kodunu elbette güncelleyebilirsiniz.
Bilgi: CSS kodundaki "ucan-nesne.png" dosyasını kendinize göre değiştirmeyi unutmayın.
Not: Uçan nesne ikonu olarak ise, aşağıda yer alan görseli kullanabilirsiniz.
Yorum bulunmamaktadır.