Effect Keren JavaScript
Kali ini saya akan share source code efek mengetik pada html menggunakan java script gan...tapi saya sekalian mau share javascript yang tulisanya mengikuti kursor dan yang lainya Terus gunanya apa gan:v?..gunanya buat mempercantik blog,situs atau script deface kalian..oke langsung aje dah
Silahkan copy scriptLalu pastekan ke body htmlnya gan
1. Java script efek mengetik dalam kotak..kalian bisa mengatur ukuran kotaknya dan mengatur kecepatan mengetiknya gan
</script>
</body>
<form name="news">
<textarea cols="40" name="news2" rows="3" wrap="virtual"></textarea></form>
<script type="text/javascript">
//<![CDATA[
var newsText = new Array();
newsText[0] = "..../silahkan ganti dengan kata kata mu gan ";
newsText[1] = "....R0sX_010 Was Here;)";
newsText[2] = "....<[Knowledge is not illusion)]>";
newsText[3] = ".....I am here cause just test my skill for my hobby";
newsText[4] = "....Dont sad Just happy and enjoy it ";
newsText[5] = "//I hope for my life and my way always good and succes...";
newsText[6] = "...I am sad boy ";
newsText[7] = "..I am alone";
newsText[8] = "....I am silent";
newsText[9] = " ....//Not Found!";
var ttloop = 1; // diulang-ulang teksnya ganti dengan 1 (1 = True; 0 = False)
var tspeed = 75; // Typing speed in milliseconds (larger number = slower)
var tdelay = 10; // Time delay between newsTexts in milliseconds
// ------------- NO EDITING AFTER THIS LINE -------------
var dwAText, cnews=0, eline=0, cchar=0, mxText;
function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}
doNews()
//]]>
</script>
2.Selanjutnya javascript efek mengetik di tempat...kalian bisa mengatur kecepatan mengetik dan berhenti ngetiknya gan
<script language="JavaScript">
var text=".....Terimakasih sudah berkunjubg ea gan:)";
var delay=100;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <b><div 0px="" 12px="" arial="" color:="" aqua="" font:="" id="textDestination" margin:="" style="background-color:grey;"></div></b> <script language="JavaScript">
javascript:startTyping(text, 35, "textDestination");
</script>
3.efek Tulisan megikuti kursor gan..kalian bisa mengatur ukuran tulisanya dan kecepatan kursornya gan
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: lime;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
;(function(){
// System Error.." hehehe... (QUOTED STRING)
var msg = "Ini pesanya gan silahkan di edit..makasih udah mampir ke blog ane ea mhank";
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 15;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.2;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.6;
// Edit aje lah
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>
4.Java script alert gan
Alert biasa:<body> <script> alert("Hello agan"); </script>
Alert dengan memasukan kata kata
<script>
var nama = prompt("Masukan nick name anda mastah:");
if(nama != ""){
document.getElementById("name").innerHTML = "welcome master " + nama;
}
</script>
5.Java script tombol...saat kalian menekan tombolnya maka akan menuju ke suatus alamat url...kalian juga bisa mengubah gambarnya gan
Dan mengubah alamat url tombolnya
<gv-axyp35ikftbncw.dv.googlehosted.com style="position: fixed; bottom: 0px; left: 10px;width:90px;height:100px;"><a href="https://ngarayw.blogspot.com/?m=1" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4g_k55TG-py_OwpeNMmPZKUnbQvddkZAtCKslGaJpbQn-axzYMa6dpZSOofgLrGSqpSx0D3AoImjDFiZ0Kp2UxeB0B-ZI9zuQmEnCqsOUCBRLLeDUN70p4_x9KJU96B1GgE3Xh7XfVvUU/s1600/tenor%252831%2529.gif" title="Hacked" alt="animasi bergerak gif" /></a><small><center><a href="https://ngarayw.wordpress.com" target="_blank">Welcome mastah</a></center></small></gv-axyp35ikftbncw.dv.googlehosted.com>
Oke sekian gan semoga bermanfaat..jangan lupa
Post a Comment for "Effect Keren JavaScript"
Post a Comment