Yeni Kayıt
Konudaki Resimler
< Bu mesaj bu kişi tarafından değiştirildi Egen ccaann -- 1 Şubat 2018; 21:56:11 > |
Html'de böyle bir imkanım var mı?
Hızlı 
Bildirim
Html'de matrix arka planıyla giriş paneli
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
Giriş
Mesaj
-
-
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>
-
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.
-
Egen ccaann
E
kullanıcısına yanıt
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.
-
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.
-
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.
-
Egen ccaann
E
kullanıcısına yanıt
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?
-
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 :
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 >
-
Egen ccaann
E
kullanıcısına yanıt
canvas'ın z-index değerini 1000 yapmışsın. Animasyon, formun önüne geçiyor. -1000 yap düzelir. -
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. -
Egen ccaann
E
kullanıcısına yanıt
Anladım sadıç. Açtığın konuya cevap yazdım. Uygula bakalım düzeldi mi? -
DoubleDragon
D
kullanıcısına yanıt
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
-
krmgnydn123456abdül
K
kullanıcısına yanıt
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.
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
