Html'de matrix arka planıyla giriş paneli

8 yıl

Teğmen

Konu Sahibi

Merhaba sadıçlar,

sitemde matrix arka planı ile giriş paneli yapmak istiyorum.

Aynen şunun gibi :

< Resime gitmek için tıklayın >

Şöyle düşündüm sayfada arka planı matrix olarak ayarlarım da html textleri nasıl fotoğraftaki gibi yapabilirim? Daha doğrusu yapabilir miyim?

Html'de böyle bir imkanım var mı?

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

Not : Arkideşler sonradan fark ettim resmin üzerinde reklam varmış (arkaplan olarak - 123rf) Başka bir tane buldum aynı ama sanki bundada biraz var gibi :

< Resime gitmek için tıklayın >

DH forumlarında vakit geçirmekten keyif alıyor gibisin ancak giriş yapmadığını görüyoruz.

Üye olduğunda özel mesaj gönderebilir, beğendiğin konuları favorilerine ekleyip takibe alabilir ve daha önce gezdiğin konulara hızlıca erişebilirsin.

Üye Ol Şimdi Değil

Bir Daha Gösterme

< Bu mesaj bu kişi tarafından değiştirildi Egen ccaann -- 1 Şubat 2018; 21:56:11 >

D

DoubleDragon

8 yıl

Yarbay

Arka planı sabit resim olarak yaptıktan sonra ne anlamı var ki? Matrix'deki gibi aşağı doğru akacak ki güzel görünsün. Yani hareketli olmalıdır.

Ben internetten aradım. JavaScript'le yapılmış Matrix ekranı buldum. Bunu arka plan yaptım. Bunun üzerine login ekranı yerleştirdim. Böylece dediğim gibi aşağı doğru akan hareketli Matrix Login ekranı olmuş oldu.

Senin verdiğin örnekte mavi renk kullanılmış ama ben renk olarak yeşil kullandım. Kodlarla oynayarak mavi veya istediğin renk yapabilirsin. Hadi kolay gelsin.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>Matrix Giriş Ekranı</title> 
 <style> 
 /*basic reset*/ 
 * {margin: 0; padding: 0;} 
 /*adding a black bg to the body to make things clearer*/ 
 body {background: black;} 
 canvas { 
     display: block; 
     position: fixed; 
 	top: 0; 
 	left: 0; 
     z-index: -1000; 
 } 
 #login { 
     width: 400px; 
     background-color: rgba(0,155,0,0.7); 
     padding: 25px; 
     margin: 15% auto; 
     border-radius: 10px; 
 } 
 #login input { 
     height: 40px; 
     width: 375px; 
     font-size: 18px; 
     padding: 5px; 
     margin-bottom: 15px; 
     border-radius: 7px; 
     background-color: rgba(255,255,255,0.5); 
     border: none; 
     color: #000; 
 } 
 #login button { 
     width: 100px; 
     font-size: 18px; 
     display: block; 
     margin: 0 auto; 
     background-color: #009933; 
     border: none; 
     height: 40px; 
 	border-radius: 5px; 
 } 
 </style> 
 </head> 
  
 <body> 
 <form id="login"> 
   <input type="text" name="kullanici" placeholder="Kullanıcı Adı"><br /> 
   <input type="password" name="sifre" placeholder="Şifre"><br /> 
   <button type="button" onclick="alert('My Name Is Neo :)')">Giriş</button> 
 </form> 
  
 <canvas id="c"></canvas> 
  
 <script> 
 var c = document.getElementById("c"); 
 var ctx = c.getContext("2d"); 
  
 //making the canvas full screen 
 c.height = window.innerHeight; 
 c.width = window.innerWidth; 
  
 //chinese characters - taken from the unicode charset 
 var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑"; 
 //converting the string into an array of single characters 
 chinese = chinese.split(""); 
  
 var font_size = 18; 
 var columns = c.width/font_size; //number of columns for the rain 
 //an array of drops - one per column 
 var drops = []; 
 //x below is the x coordinate 
 //1 = y co-ordinate of the drop(same for every drop initially) 
 for(var x = 0; x < columns; x++) 
 	drops[x] = 1;  
  
 //drawing the characters 
 function draw() 
 { 
 	//Black BG for the canvas 
 	//translucent BG to show trail 
 	ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; 
 	ctx.fillRect(0, 0, c.width, c.height); 
 	 
 	ctx.fillStyle = "#0F0"; //green text 
 	ctx.font = font_size + "px arial"; 
 	//looping over drops 
 	for(var i = 0; i < drops.length; i++) 
 	{ 
 		//a random chinese character to print 
 		var text = chinese[Math.floor(Math.random()*chinese.length)]; 
 		//x = i*font_size, y = value of drops[i]*font_size 
 		ctx.fillText(text, i*font_size, drops[i]*font_size); 
 		 
 		//sending the drop back to the top randomly after it has crossed the screen 
 		//adding a randomness to the reset to make the drops scattered on the Y axis 
 		if(drops[i]*font_size > c.height && Math.random() > 0.975) 
 			drops[i] = 0; 
 		 
 		//incrementing Y coordinate 
 		drops[i]++; 
 	} 
 } 
  
 setInterval(draw, 33); 
 </script> 
 </body> 
  
 </html>

Bu mesaja 2 cevap geldi.

E

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Arka planı sabit resim olarak yaptıktan sonra ne anlamı var ki? Matrix'deki gibi aşağı doğru akacak ki güzel görünsün. Yani hareketli olmalıdır.

Ben internetten aradım. JavaScript'le yapılmış Matrix ekranı buldum. Bunu arka plan yaptım. Bunun üzerine login ekranı yerleştirdim. Böylece dediğim gibi aşağı doğru akan hareketli Matrix Login ekranı olmuş oldu.

Senin verdiğin örnekte mavi renk kullanılmış ama ben renk olarak yeşil kullandım. Kodlarla oynayarak mavi veya istediğin renk yapabilirsin. Hadi kolay gelsin.

<!DOCTYPE html> 
 <html> 
 <head> 
 <meta charset="UTF-8"> 
 <title>Matrix Giriş Ekranı</title> 
 <style> 
 /*basic reset*/ 
 * {margin: 0; padding: 0;} 
 /*adding a black bg to the body to make things clearer*/ 
 body {background: black;} 
 canvas { 
     display: block; 
     position: fixed; 
 	top: 0; 
 	left: 0; 
     z-index: -1000; 
 } 
 #login { 
     width: 400px; 
     background-color: rgba(0,155,0,0.7); 
     padding: 25px; 
     margin: 15% auto; 
     border-radius: 10px; 
 } 
 #login input { 
     height: 40px; 
     width: 375px; 
     font-size: 18px; 
     padding: 5px; 
     margin-bottom: 15px; 
     border-radius: 7px; 
     background-color: rgba(255,255,255,0.5); 
     border: none; 
     color: #000; 
 } 
 #login button { 
     width: 100px; 
     font-size: 18px; 
     display: block; 
     margin: 0 auto; 
     background-color: #009933; 
     border: none; 
     height: 40px; 
 	border-radius: 5px; 
 } 
 </style> 
 </head> 
  
 <body> 
 <form id="login"> 
   <input type="text" name="kullanici" placeholder="Kullanıcı Adı"><br /> 
   <input type="password" name="sifre" placeholder="Şifre"><br /> 
   <button type="button" onclick="alert('My Name Is Neo :)')">Giriş</button> 
 </form> 
  
 <canvas id="c"></canvas> 
  
 <script> 
 var c = document.getElementById("c"); 
 var ctx = c.getContext("2d"); 
  
 //making the canvas full screen 
 c.height = window.innerHeight; 
 c.width = window.innerWidth; 
  
 //chinese characters - taken from the unicode charset 
 var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑"; 
 //converting the string into an array of single characters 
 chinese = chinese.split(""); 
  
 var font_size = 18; 
 var columns = c.width/font_size; //number of columns for the rain 
 //an array of drops - one per column 
 var drops = []; 
 //x below is the x coordinate 
 //1 = y co-ordinate of the drop(same for every drop initially) 
 for(var x = 0; x < columns; x++) 
 	drops[x] = 1;  
  
 //drawing the characters 
 function draw() 
 { 
 	//Black BG for the canvas 
 	//translucent BG to show trail 
 	ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; 
 	ctx.fillRect(0, 0, c.width, c.height); 
 	 
 	ctx.fillStyle = "#0F0"; //green text 
 	ctx.font = font_size + "px arial"; 
 	//looping over drops 
 	for(var i = 0; i < drops.length; i++) 
 	{ 
 		//a random chinese character to print 
 		var text = chinese[Math.floor(Math.random()*chinese.length)]; 
 		//x = i*font_size, y = value of drops[i]*font_size 
 		ctx.fillText(text, i*font_size, drops[i]*font_size); 
 		 
 		//sending the drop back to the top randomly after it has crossed the screen 
 		//adding a randomness to the reset to make the drops scattered on the Y axis 
 		if(drops[i]*font_size > c.height && Math.random() > 0.975) 
 			drops[i] = 0; 
 		 
 		//incrementing Y coordinate 
 		drops[i]++; 
 	} 
 } 
  
 setInterval(draw, 33); 
 </script> 
 </body> 
  
 </html>

Merhaba arkideş,

çok güzel olmuş. Çok teşekkür ederim. Tam istediğim gibi olmuş bende yeşil istiyordum. Sadece başka bir input ekleyeceğim zaman sorun olur mu ve javascript kodlarını anlamakta biraz zorluk çekiyorum başka bir sorun yok ?

Gerçekten çok iyi olmuş. Çok teşekkür ederim sadıç.

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

Bu mesaja 1 cevap geldi.

D

DoubleDragon

8 yıl

Yarbay

Formun içine ne istiyorsan ekleyebilirsin Matrix animasyonu ile hiç bir ilgisi yok. Matrix animasyonunu ilgilendiren kısmı <canvas id="c"></canvas> yazan kısım ve <script>...</script> tagları arasındaki JavaScript kodlarıdır. Önceki mesajımda dediğim gibi bu kodları hazır buldum. Her yerini ben de anlamıyorum. Bu animasyonu arka plan yapmak için CSS olarak

canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
}

yaptım. Ben bunu bulduğum yerde bu kodlar arka plan olarak kullanılmıyordu. Bu şekilde yaparak arka plan olarak kullanmış olduk. Bu animasyon bundan ibarettir. Bu şekilde herhangi bir sayfanın arka planı olarak da kullanabilirsin.

Diğer CSS kodları login formunu ekranın ortasına denk getirmek için yazdım. Biraz acele yaptım. Hatalı yerler olabilir. Sen kendi isteğine göre değiştirebilirsin.

Form kısmı da bildiğin form işte...

Nasıl bir form istiyorsan yapabilirsin.

Bu mesaja 2 cevap geldi.

Bu mesajda bahsedilenler: @Egen ccaann

E

Egen ccaann

8 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Formun içine ne istiyorsan ekleyebilirsin Matrix animasyonu ile hiç bir ilgisi yok. Matrix animasyonunu ilgilendiren kısmı <canvas id="c"></canvas> yazan kısım ve <script>...</script> tagları arasındaki JavaScript kodlarıdır. Önceki mesajımda dediğim gibi bu kodları hazır buldum. Her yerini ben de anlamıyorum. Bu animasyonu arka plan yapmak için CSS olarak

canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
}

yaptım. Ben bunu bulduğum yerde bu kodlar arka plan olarak kullanılmıyordu. Bu şekilde yaparak arka plan olarak kullanmış olduk. Bu animasyon bundan ibarettir. Bu şekilde herhangi bir sayfanın arka planı olarak da kullanabilirsin.

Diğer CSS kodları login formunu ekranın ortasına denk getirmek için yazdım. Biraz acele yaptım. Hatalı yerler olabilir. Sen kendi isteğine göre değiştirebilirsin.

Form kısmı da bildiğin form işte... Nasıl bir form istiyorsan yapabilirsin.

Merhaba,

çok teşekkür ederim. Eğer bir sorun çıkarsa yazarım.

İyi günler dilerim.

E

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

Formun içine ne istiyorsan ekleyebilirsin Matrix animasyonu ile hiç bir ilgisi yok. Matrix animasyonunu ilgilendiren kısmı <canvas id="c"></canvas> yazan kısım ve <script>...</script> tagları arasındaki JavaScript kodlarıdır. Önceki mesajımda dediğim gibi bu kodları hazır buldum. Her yerini ben de anlamıyorum. Bu animasyonu arka plan yapmak için CSS olarak

canvas {
display: block;
position: fixed;
top: 0;
left: 0;
z-index: -1000;
}

yaptım. Ben bunu bulduğum yerde bu kodlar arka plan olarak kullanılmıyordu. Bu şekilde yaparak arka plan olarak kullanmış olduk. Bu animasyon bundan ibarettir. Bu şekilde herhangi bir sayfanın arka planı olarak da kullanabilirsin.

Diğer CSS kodları login formunu ekranın ortasına denk getirmek için yazdım. Biraz acele yaptım. Hatalı yerler olabilir. Sen kendi isteğine göre değiştirebilirsin.

Form kısmı da bildiğin form işte... Nasıl bir form istiyorsan yapabilirsin.

Merhaba,

ben script kodlarında sadece isimleri değiştirerek şöyle bir şey yaptım ama olmadı (arkaplan olmuyor sadece öğeler kararıyor) :

<script type="text/javascript"> 
 	 
 	var tuval = document.getElementById("tuval"); 
 	var tuval2d = tuval.getContext("2d"); 
  
 	tuval.height = window.innerHeight; 
 	tuval.width = window.innerWidth; 
  
 	var karakterler = "10"; 
  
 	karakterler = karakterler.split(""); 
  
 	var yaziboyutu = 18; 
 	var sutun = tuval.width / yaziboyutu; 
  
 	var damla = []; 
  
 	for (var i = 0; i < sutun; i++) { 
 		damla[i] = 1; 
 	} 
  
 	function cekmek(){ 
  
 		tuval2d.fillStyle = "rgba(0, 0, 0, 0.05)"; 
 		tuval2d.fillRect(0, 0, tuval.width, tuval.height); 
  
 		tuval2d.fillStyle = "#0F0"; 
 		tuval2d.font = yaziboyutu + "px arial"; 
  
 		for (var ii = 0; i < damla.length; i++) { 
  
 			var yazi = karakterler[Math.floor(Math.random() * karakterler.length)]; 
  
 			tuval2d.fillText(yazi, ii * yaziboyutu, damla[ii] * yaziboyutu); 
  
 			if (damla[ii]*yaziboyutu > tuval.height && Math.random() > 0.975) { 
  
 				damla[ii] = 0; 
  
 			} 
  
 			damla[ii]++; 
  
 		} 
  
 	} 
  
 	setInterval(cekmek, 33); 
  
 </script>

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

Bu mesaja 1 cevap geldi.

D

DoubleDragon

7 yıl

Yarbay

cekmek() fonksiyonunun içinde

for (var ii = 0; i < damla.length; i++) {

satırında hata var.

for (var ii = 0; ii < damla.length; ii++) {

şeklinde düzeltince çalışıyor.

Fakat sadece 0 ve 1 sayıları akıyor. Bence güzel olmamış. Madem sayıların akmasını istiyorsun.

var karakterler = "0123456789";

şeklinde yapsaydın. Hiç olmasa bütün sayılar aksaydı.

Değişken isimlerini değiştirip neden Türkçe yaptın ki? Başkasına gösterip ben yaptım mı diyeceksin köftehor?

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @Egen ccaann

E

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

cekmek() fonksiyonunun içinde

for (var ii = 0; i < damla.length; i++) {

satırında hata var.

for (var ii = 0; ii < damla.length; ii++) {

şeklinde düzeltince çalışıyor.

Fakat sadece 0 ve 1 sayıları akıyor. Bence güzel olmamış. Madem sayıların akmasını istiyorsun.

var karakterler = "0123456789";

şeklinde yapsaydın. Hiç olmasa bütün sayılar aksaydı.

Değişken isimlerini değiştirip neden Türkçe yaptın ki? Başkasına gösterip ben yaptım mı diyeceksin köftehor?

Merhaba,

dediğiniz gibi yaptım. Kodlar akıyor onda sorun yok ama öğeler kararıyor hiç gözükmüyor :

< Resime gitmek için tıklayın >

Kodlar şu şekilde :

<!DOCTYPE html>
<html>
<head>
	<title>Giriş</title>
</head>
<body>

<form id="giris" name="giris" method="post" action="">
	<input type="text" class="kuladt" name="kulad" placeholder="Kullanıcı Adı">
	<input type="password" class="sifret" name="sifre" placeholder="Şifre">
	<input type="checkbox" name="benihatirla">
	<label style="position: relative;color: black;top: -5px;"><b>Beni hatırla</b></label>
	<div id="butonlar">
		<input type="submit" name="girisb" value="Giriş" style="position: relative;top: 50px;left: -140px;">
		<input type="button" name="iptalb" value="İptal" style="position: relative;top: 10px;left: 140px;">
	</div>

	<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=131329441&url=#" onmousemove="this.style.color = 'black'" onmouseout="this.style.color = 'blue'" style="position: relative;top: -80px;left: 150px;text-decoration: none;color: blue;" data-href="#" onmousemove="this.style.color = 'black'" onmouseout="this.style.color = 'blue'" style="position: relative;top: -80px;left: 150px;text-decoration: none;color: blue;">Şifremi unuttum</a>

	<a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=131329441&url=#" onmousemove="this.style.color = 'black'" onmouseout="this.style.color = 'blue'" style="position: relative;top: -50px;left: 67.5px;text-decoration: none;color: blue;" data-href="#" onmousemove="this.style.color = 'black'" onmouseout="this.style.color = 'blue'" style="position: relative;top: -50px;left: 67.5px;text-decoration: none;color: blue;">Kayıt ol</a>

</form>

<canvas id="tuval"></canvas>

<style type="text/css">
	
	*{

		margin: 0;
		padding: 0;

	}

	body{

		background: black;

	}

	canvas{

		display: block;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000;

	}

	#giris{

		width: 400px;
		background-color: rgba(0, 155, 0, 0.7);
		padding: 25px;
		margin: 15% auto;
		border-radius: 10px;

	}

	input.kuladt, input.sifret{

		height: 40px;
		width: 375px;
		font-size: 18px;
		padding: 5px;
		margin-bottom: 15px;
		border-radius: 7px;
		background-color: rgba(255, 255, 255, 0.5);
		border: none;
		color: #000;
	}

	#giris button{

		width: 100px;
		font-size: 18px;
		display: block;
		margin: 0 auto;
		background-color: #009933;
		border: none;
		height: 40px;
		border-radius: 5px;

	}

</style>

<script type="text/javascript">
	
	var tuval = document.getElementById("tuval");
	var tuval2d = tuval.getContext("2d");

	tuval.height = window.innerHeight;
	tuval.width = window.innerWidth;

	var karakterler = "10";

	karakterler = karakterler.split("");

	var yaziboyutu = 18;
	var sutun = tuval.width / yaziboyutu;

	var damla = [];

	for (var i = 0; i < sutun; i++) {
		damla[i] = 1;
	}

	function cekmek(){

		tuval2d.fillStyle = "rgba(0, 0, 0, 0.05)";
		tuval2d.fillRect(0, 0, tuval.width, tuval.height);

		tuval2d.fillStyle = "#0F0";
		tuval2d.font = yaziboyutu + "px arial";

		for (var ii = 0; ii < damla.length; ii++) {

			var yazi = karakterler[Math.floor(Math.random() * karakterler.length)];

			tuval2d.fillText(yazi, ii * yaziboyutu, damla[ii] * yaziboyutu);

			if (damla[ii]*yaziboyutu > tuval.height && Math.random() > 0.975) {

				damla[ii] = 0;

			}

			damla[ii]++;

		}

	}

	setInterval(cekmek, 33);

</script>

</body>
</html>

0 ve 1 rakamlarını kodlar 0 ve 1 lere dönüştüğü için öyle yaptım.

Türkçe daha iyi anlamak için yaptım. Ayıpya nasıl yapıldığını anlamaya çalışıyorum.Yotum satırlarınında birazını çevirdim

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

< Bu mesaj bu kişi tarafından değiştirildi Egen ccaann -- 11 Şubat 2018; 8:59:47 >
Bu mesaja 1 cevap geldi.

D

DoubleDragon

7 yıl

Yarbay

canvas'ın z-index değerini 1000 yapmışsın. Animasyon, formun önüne geçiyor. -1000 yap düzelir.

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @Egen ccaann

E

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

quote:

Orijinalden alıntı: DoubleDragon

canvas'ın z-index değerini 1000 yapmışsın. Animasyon, formun önüne geçiyor. -1000 yap düzelir.

Sadıç dediğin gibi yaptım oldu. Teşekkür ederim. Şimdi ise başka bir sorun yaşıyorum (matrix giriş ekranının altında siyah yer var telefonlarda yeni açtığım konuda bakabilirsin.

Lütfen yardım edin.

Cevaplarınız için şimdiden çok teşekkür ederim.

İyi günler dileğiyle.

Not : sadıç arkadaşımın biraz daha samimi hali kardeşim gibi.

Bu mesaja 1 cevap geldi.

D

DoubleDragon

7 yıl

Yarbay

Anladım sadıç. Açtığın konuya cevap yazdım. Uygula bakalım düzeldi mi?

Bu mesajda bahsedilenler: @Egen ccaann

K

krmgnydn123456abdül

5 yıl

Er

sadıç acaba çıkan giriş paneline şöyle bir özellik ekleyebilirmiyiz. Kullanıcı adı ve şifre doğruysa bizi herhangi bir yere yönlendirse öyle bir şeyolurmu

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @DoubleDragon

D

DoubleDragon

5 yıl

Yarbay

Tabi ki olur. Ben bu animasyonu hazır buldum. Üzerine kullanıcı giriş formu ekledim. Yani bu animasyonu arkaplan olarak kullanmış olduk.

Siz de aynı şekilde bu animasyonu bir giriş formunun arkaplanı olarak kullanmak istiyorsanız, bu kodların üzerine gereken şifre kontrol kodlarını yazıp kullanabilirsiniz veya başka hazır giriş formu bulup bu animasyonu arkaplan olarak ekleyebilirsiniz.

Bu mesajda bahsedilenler: @krmgnydn123456abdül