15 Temmuz 2012 Pazar

Yanıp sönen yazı efekti kodu

bubble-text-effect

Yanıp sönen yazı efekti kodu

Web sayfalarımızda zaman zaman dikkat çekmesini istediğimiz alanlar olabilir. Bu alanları sayfanın diğer kısmından ayırabilmek için html de javascript yardımı ile de yanıp sönen yazı şeklinde gösterebiliriz. Html ve css ile şekillendirdiğimiz yazı yanıp sönme efekti ile daha dikkat çekici olacaktır.
Önizleme:
MeftunMede.Blogspot.com

<script type="text/javascript">
// <![CDATA[
var bgcolour="#ffffff"; // Arka plan rengi
var fgcolour="#663399"; // ön plan rengi
var speed=100; // bubbling hızı, düşük hızlı
var shades=10; // bubble tonlarının sayısı
var bubbcol=new Array();var bubbler,bubbtxt;var bubbchr=new Array();window.onload=function(){if(document.getElementById){for(bubbler=0;bubbler<=shades;bubbler++){bubbtxt="#";for(var i=1;i<6;i+=2){var bg=parseInt(bgcolour.substring(i,i+2),16);bubbtxt+=dechex(Math.floor(bg+(parseInt(fgcolour.substring(i,i+2),16)-bg)*(bubbler/shades)))}
bubbcol[bubbler+1]=bubbtxt;}bubbler=document.getElementById("bubble");bubbtxt=bubbler.firstChild.nodeValue;while (bubbler.childNodes.length) bubbler.removeChild(bubbler.childNodes[0]);for (var i=0; i<bubbtxt.length; i++) {var bubbi=document.createElement("span");bubbi.setAttribute("id", "bubb"+i);bubbi.appendChild(document.createTextNode(bubbtxt.charAt(i)));bubbler.appendChild(bubbi);}bubbler=setInterval ("bubbling()", speed);}}
function dechex(dec){var hex=dec.toString(16);if(dec<16)return"0"+hex;else return hex;}
function bubbling(){for(var i=0;i<bubbtxt.length;i++){var bubbme=document.getElementById("bubb"+i);if(bubbchr[i]){bubbme.style.color=bubbcol[bubbchr[i]];bubbchr[i]=(bubbchr[i]+1)%bubbcol.length}else if(Math.random()<0.75/bubbchr.length)bubbchr[i]=1;}}
// ]]>
</script>
<strong><span style="color="#000066;" id="bubble">MeftunMede.Blogspot.com</span></strong>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Gönderen zaman: Hiç yorum yok:
Etiketler:

Kayarak büyüyen Yazı efekti kodu

Animated Text Script

Kayarak büyüyen Yazı efekti kodu.(Animated Text Script)
Bu Kayarak büyüyen Yazı efekti kodu ile kendi reklam bannerinizi kendiniz hazırlayın.
<body onload="startmotor(0)">
<p><script type="text/javascript">
var size = 25; //Yazı Büyüklüğü
var tekst = new Array() { 
tekst[0] = "Meftun Mede'nin bloğuna hoşgeldiniz."; 
tekst[1] = "Buraya istediğiniz her şeyi yazabilirsiniz."; 
tekst[2] = "Yazı boyutunu değiştirebilirsiniz."; 
tekst[3] = "Ve hızını değiştirebilirsiniz."; 
tekst[4] = "http://MeftunMede.Blogspot.com"; } 
var klaar=0;var s=0;var veran=0;var tel=0;function bereken(i,Lengte){return(size*Math.abs(Math.sin(i/(Lengte/3.14))))}function motor(p){var output="";for(w=0;w<tekst[s].length-klaar+1;w++){q=bereken(w/2+p,16);if(q>size-0.5){klaar++}if(q<5){tel++;if(tel>1){tel=0;if(veran==1){veran=0;s++;if(s==tekst.length){s=0}p=0;if(window.loop){clearInterval(loop)}loop=motor()}}}output+="<font style='font-size: "+q+"pt'>"+tekst[s].substring(w,w+1)+"<\/font>"}for(k=w;k<klaar+w;k++){output+="<font style='font-size: "+size+"pt'>"+tekst[s].substring(k,k+1)+"<\/font>"}idee.innerHTML=output}function startmotor(p){var loop=motor(p);if(window.time){clearInterval(time)}if(klaar==tekst[s].length){klaar=0;veran=1;tel=0;var time=setTimeout("startmotor("+(p+1)+")",2000)}else{var time=setTimeout("startmotor("+(p+1)+")",50)}}
</script></p>
<div id="idee"></div>
</body>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Gönderen zaman: Hiç yorum yok:
Etiketler:

Sitende yapraklar uçsun

Sitende yapraklar uçsun
Sitende yapraklar uçsun
Sitenizde uçuşan yapraklar olsun istiyorsanız bu script'i kullanabilirsiniz.
<script language="JavaScript1.2"> //Pre-load your image below!

grphcs=new Array(6)

Image0=new Image();

Image0.src=grphcs[0]="http://javascriptfreecode.com/images/barg.gif";

Image1=new Image();

Image1.src=grphcs[1]="http://javascriptfreecode.com/images/barg.gif"

Image2=new Image();

Image2.src=grphcs[2]="http://javascriptfreecode.com/images/barg.gif"

Image3=new Image();

Image3.src=grphcs[3]="http://javascriptfreecode.com/images/barg.gif"

Image4=new Image();

Image4.src=grphcs[4]="http://javascriptfreecode.com/images/barg.gif"

Image5=new Image();

Image5.src=grphcs[5]="http://javascriptfreecode.com/images/barg.gif"

Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

Ypos=new Array();

Xpos=new Array();

Speed=new Array();

Step=new Array();

Cstep=new Array();

ns=(document.layers)?1:0;

ns6=(document.getElementById&&!document.all)?1:0;

if (ns){

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");

}

}

else{

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');

}

document.write('</div></div>');

}

WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;

WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;

for (i=0; i < Amount; i++){

 Ypos[i] = Math.round(Math.random()*WinHeight);

 Xpos[i] = Math.round(Math.random()*WinWidth);

 Speed[i]= Math.random()*5+3;

 Cstep[i]=0;

 Step[i]=Math.random()*0.1+0.05;

}

function fall(){

var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;

var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;

var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;

var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < Amount; i++){

sy = Speed[i]*Math.sin(90*Math.PI/180);

sx = Speed[i]*Math.cos(Cstep[i]);

Ypos[i]+=sy;

Xpos[i]+=sx;

if (Ypos[i] > WinHeight){

Ypos[i]=-60;

Xpos[i]=Math.round(Math.random()*WinWidth);

Speed[i]=Math.random()*5+3;

}

if (ns){

document.layers['sn'+i].left=Xpos[i];

document.layers['sn'+i].top=Ypos[i]+hscrll;

}

else if (ns6){

document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);

document.getElementById("si"+i).style.top=Ypos[i]+hscrll;

}

else{

eval("document.all.si"+i).style.left=Xpos[i];

eval("document.all.si"+i).style.top=Ypos[i]+hscrll;

}

Cstep[i]+=Step[i];

}

setTimeout('fall()',20);

}

window.onload=fall

//-->

</script>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Gönderen zaman: Hiç yorum yok:
Etiketler:

Button üzerinde hareketli, değişen yazı kodu

Button üzerinde hareketli, değişen yazı kodu
Button üzerinde hareketli, değişen yazı kodu
Sayfanızda üzerinde kayan yazı olan bir buton (düğme) olsun istiyorsanız bu script'i kullanabilirsiniz.

JavaScript Kayan yazılı buton örneği:

This free script provided by
JavaScript 

<style type='text/css'>
.stHeadliner{font-family:lucida console, courier new, monospace;font-size:11pt;font-weight:700;font-style:italic;background:red;color:#FFF;}
</style>
<script type="text/javascript">
// Büyüyen başlık için milisaniye gecikme.
growWait=90
// Genişleyen başlık için milisaniye cinsinden gecikme.
expandWait=120
// Başlık kaydırma için milisaniye gecikme
scrollWait=100
// Başlık kaydırma bölgesi karakter sayısı.
scrollWidth=40
// Kullanmak istediğiniz gibi satır sayısı, kadar belirtin.
lineMax=4
lines=new Array(lineMax)
// Satırları (Metin görüntülemek için, url, etkisi, beklenecek süre) tanımlayın
lines[1]=new Line("En yeni Javascript Kodlar", "http://meftunmede.blogspot.com", Expand, 2000)
lines[2]=new Line("En yeni içerikler", "http://meftunmede.blogspot.com", Scroll, 1000)
lines[3]=new Line("İstemediğin kadar!", "www.meftunapart.com", Static, 2500)
lines[4]=new Line("Hepsi burada!", "buraya link at", Grow, 3000)
// Diğer bazı değişkenler (sadece değişmez)
lineText=""
timerID=null
timerRunning=false
spaces=""
charNo=0
charMax=0
charMiddle=0
lineNo=0
lineWait=0
// Çizgi nesne tanımlayın.
function Line(text, url, type, wait) {
this.text=text
this.url=url
this.Display=type
this.wait=wait}
// N karakter c bir dize doldurun.
function StringFill(c, n) {
s=""
while (--n >= 0) {
s+=c
}
return s
}
function Static() {
document.formDisplay.buttonFace.value=this.text
timerID=setTimeout("ShowNextLine()", this.wait)
}
function Grow() {
lineText=this.text
lineWait=this.wait
charMax=lineText.length
TextGrow()
}
function TextGrow() {
if (charNo <= charMax) {
document.formDisplay.buttonFace.value=lineText.substring(0, charNo)
charNo++
timerID=setTimeout("TextGrow()", growWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}
function Expand() {
lineText=this.text
charMax=lineText.length
charMiddle=Math.round(charMax / 2)
lineWait=this.wait
TextExpand()
}
function TextExpand() {
if (charNo <= charMiddle) {
document.formDisplay.buttonFace.value=lineText.substring(charMiddle - charNo, charMiddle + charNo)
charNo++
timerID=setTimeout("TextExpand()", expandWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}
function Scroll() {
spaces=StringFill(" ", scrollWidth)
lineText=spaces+this.text
charMax=lineText.length
lineText+=spaces
lineWait=this.wait
TextScroll()
}
function TextScroll() {
if (charNo <= charMax) {
document.formDisplay.buttonFace.value=lineText.substring(charNo, scrollWidth+charNo)
charNo++
timerID=setTimeout("TextScroll()", scrollWait)
}
else {
charNo=0
timerID=setTimeout("ShowNextLine()", lineWait)
}
}
function StartHeadliner() {
StopHeadliner()
timerID=setTimeout("ShowNextLine()", 1000)
timerRunning=true
}
function StopHeadliner() {
if (timerRunning) {
clearTimeout(timerID)
timerRunning=false
}
}
function ShowNextLine() {
(lineNo < lineMax) ? lineNo++ : lineNo=1
lines[lineNo].Display()
}
function GotoUrl(url)
{
top.location.href=url
}
</script>
<center>
<form name="formDisplay">
<input class="stHeadLiner" type="button" name="buttonFace" value="** HAZIR HTML KODLAR **" onClick="GotoUrl(lines[lineNo].url)"></INPUT>
</form></center>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://meftunmede.blogspot.com">JavaScript
</a></font></p>
<Body onLoad="StartHeadliner()" onUnload="StopHeadliner()">

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Gönderen zaman: Hiç yorum yok:
Etiketler:

Haber , Mesaj , Duyuru Kodu

Haber, Mesaj, Duyuru Kodu

Haber,Mesaj ,Duyuru Kodu

Aşağıdaki kodu kendinize göre özelleştirip sitenize ekleyerek duyurularınızı, heberlerinizi, manşet mesajlarınızı yayınlayabilirsiniz.

Önizleme:
Blogumuzda hemen hemen her aradığınız şeyi bulabilir ve sitenize uygulayabilirsiniz. Sizlere, görselliğe ve sıkmayan çeşitliliğe önem verilmesi ilkemiz olmuştur.

<script language="JavaScript1.2">
/*
visit http://MeftunMede.Blogspot.com
*/
var delay=3000 //Mesaj değişim arasındaki gecikme (milisaniye olarak) ayarlayın.
var fcontent=new Array()
begintag='<font size=2>' //Bu yazı tipi bildirimleri gibi açılış etiketi, ayarlayın.
fcontent[0]="<b>Meftun MEDE..:</b><br>Sitemize Hoşgeldiniz. Ziyaretinizden dolayı teşekkür ederiz.<br><br>Şimdi yeniliklerle karşınızdayız."
fcontent[1]="Blogumuzda hemen hemen her aradığınız şeyi bulabilir ve sitenize uygulayabilirsiniz. Sizlere, görselliğe ve sıkmayan çeşitliliğe önem verilmesi ilkemiz olmuştur."
fcontent[2]="Filmler, Yemek tarifleri, programlar, Blogger eklentileri ve anlatımlar, temalar, widgetler, Html kodları, her türlü konuda rehber adresiniz... MeftunMede.Blogspot.com"
closetag='</font>'
var fwidth=150 //kaydıraç genişliği ayarlayın.
var fheight=150 //kaydıraç yüksekliği ayarlayın.
///Bu bölümü düzenlemeye gerek yok/////////////////
var ie4=document.all&&!document.getElementById
var ns4=document.layers
var DOM2=document.getElementById
var faderdelay=0
var index=0
if (DOM2)
faderdelay=2000
//içeriğini değiştirmek için çalışır.
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb(255,255,255)"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
colorfade()
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
else if (ns4){
document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
document.fscrollerns.document.fscrollerns_sub.document.close()
}
index++
setTimeout("changecontent()",delay+faderdelay)
}
frame=20;
hex=255 // İlk renk değeri.
function colorfade() {
// 20 kare solma süreci
if(frame>0) {
hex-=12; // renk değerini artırma
document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")"; // Renk değeri ayarlayın.
frame--;
setTimeout("colorfade()",20);
}
else{
document.getElementById("fscroller").style.color="rgb(0,0,0)";
frame=20;
hex=255
}
}
if (ie4||DOM2)
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';padding:2px"></div>')
window.onload=changecontent
</script>
<ilayer id="fscrollerns" width=&{fwidth}; height=&{fheight};><layer id="fscrollerns_sub" width=&{fwidth}; height=&{fheight}; left=0 top=0></layer></ilayer>

Kodu denemek için Online html editor'ü kullanabilirsiniz.
Gönderen zaman: Hiç yorum yok:
Etiketler:
Kaydol: Kayıtlar (Atom)