Webleb - UI Elements - Metehan'ın bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Etkileyici 3D Giriş</title>

</head>

<body>

</div>

</div>

</div>

<h1>Geleceğe Hoş Geldiniz</h1>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<span>Giriş Yap</span>

</button>

</form>

<a href="#" class="option" id="forgot-password">Şifremi Unuttum</a>

<a href="#" class="option" id="register-btn">Kayıt Ol</a>

</div>

<h2>Yeni Hesap Oluştur</h2>

<label for="new-username">Kullanıcı Adı</label>

</div>

<label for="email">E-posta</label>

</div>

<label for="new-password">Şifre</label>

</div>

<label for="confirm-password">Şifreyi Tekrarla</label>

</div>

<span>Hesap Oluştur</span>

</button>

</form>

<a href="#" id="back-to-login" class="option">Giriş Sayfasına Dön</a>

</div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;700&display=swap');

:root {

--primary-color: #00f7ff;

--secondary-color: #9c27b0;

--tertiary-color: #00ff9d;

--bg-dark: #050b24;

--text-light: #ffffff;

--highlight: rgba(0, 247, 255, 0.2);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Rajdhani', sans-serif;

height: 100vh;

overflow: hidden;

color: var(--text-light);

background: var(--bg-dark);

perspective: 1000px;

}

#bg-canvas {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

}

.container {

position: relative;

z-index: 10;

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 2rem;

}

/* Logo Styles */

.logo-container {

display: flex;

gap: 3rem;

transform-style: preserve-3d;

animation: logoFloat 8s ease-in-out infinite;

}

.logo {

width: 100px;

height: 100px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.logo:hover {

transform: scale(1.2) rotate(15deg);

}

.bot {

width: 100%;

height: 100%;

position: absolute;

background-size: contain;

background-repeat: no-repeat;

background-position: center;

transform-style: preserve-3d;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

filter: drop-shadow(0 0 10px currentColor);

}

.bot-1 {

color: var(--primary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300f7ff' d='M50 10C30 10 20 25 20 40v20c0 15 10 30 30 30s30-15 30-30V40c0-15-10-30-30-30zm-10 25a5 5 0 100 10 5 5 0 000-10zm20 0a5 5 0 100 10 5 5 0 000-10zm5 25H35s0 15 15 15 15-15 15-15z'/%3E%3C/svg%3E");

animation: pulse 3s ease-in-out infinite;

}

.bot-2 {

color: var(--secondary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%239c27b0' d='M50 10c-22 0-30 18-30 30v15c0 20 15 35 30 35s30-15 30-35V40c0-12-8-30-30-30zm-15 30a7 7 0 100 14 7 7 0 000-14zm30 0a7 7 0 100 14 7 7 0 000-14zM35 65h30s-5 20-15 20-15-20-15-20z'/%3E%3C/svg%3E");

animation: float 4s ease-in-out infinite;

}

.bot-3 {

color: var(--tertiary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300ff9d' d='M30 20h40v60H30V20zm5 15a5 5 0 1010 0 5 5 0 00-10 0zm20 0a5 5 0 1010 0 5 5 0 00-10 0zM40 60h20v10H40V60z'/%3E%3C/svg%3E");

animation: rotate 5s linear infinite;

}

/* Login Container */

.login-container, .register-container {

background: rgba(7, 15, 45, 0.6);

backdrop-filter: blur(10px);

border-radius: 20px;

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);

padding: 3rem;

width: 90%;

max-width: 500px;

transform-style: preserve-3d;

transform: perspective(1000px) rotateX(5deg);

transition: transform 0.5s ease, opacity 0.5s ease;

animation: containerFloat 6s ease-in-out infinite;

}

.login-container:hover {

transform: perspective(1000px) rotateX(0deg);

}

.login-container h1, .register-container h2 {

font-family: 'Orbitron', sans-serif;

text-align: center;

margin-bottom: 2rem;

font-weight: 700;

font-size: 2rem;

background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);

}

.register-container h2 {

font-size: 1.8rem;

}

/* Form Styles */

.input-group {

position: relative;

margin-bottom: 2rem;

}

.input-group input {

width: 100%;

padding: 15px;

background: transparent;

border: none;

border-bottom: 2px solid rgba(255, 255, 255, 0.3);

color: var(--text-light);

font-size: 1.1rem;

font-family: 'Rajdhani', sans-serif;

letter-spacing: 1px;

transition: all 0.3s ease;

z-index: 1;

position: relative;

}

.input-group label {

position: absolute;

top: 15px;

left: 15px;

color: rgba(255, 255, 255, 0.6);

font-size: 1.1rem;

transition: all 0.3s ease;

pointer-events: none;

}

.input-group input:focus,

.input-group input:valid {

border-bottom-color: var(--primary-color);

outline: none;

}

.input-group input:focus + label,

.input-group input:valid + label {

top: -10px;

left: 0;

font-size: 0.85rem;

color: var(--primary-color);

font-weight: 500;

}

.input-highlight {

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));

transition: width 0.3s ease;

}

.input-group input:focus ~ .input-highlight,

.input-group input:valid ~ .input-highlight {

width: 100%;

}

/* Button Styles */

.login-button {

font-family: 'Orbitron', sans-serif;

position: relative;

width: 100%;

padding: 15px;

margin-top: 1rem;

background: transparent;

border: 2px solid var(--primary-color);

border-radius: 30px;

color: var(--text-light);

font-size: 1.1rem;

font-weight: 500;

letter-spacing: 2px;

text-transform: uppercase;

cursor: pointer;

overflow: hidden;

transition: all 0.4s ease;

z-index: 1;

}

.login-button span {

position: relative;

z-index: 1;

transition: all 0.4s ease;

}

.button-effect {

position: absolute;

top: 50%;

left: 50%;

width: 10px;

height: 10px;

background: var(--primary-color);

border-radius: 50%;

transform: translate(-50%, -50%) scale(0);

transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

z-index: 0;

}

.login-button:hover {

box-shadow: 0 0 20px rgba(0, 247, 255, 0.5);

}

.login-button:hover .button-effect {

transform: translate(-50%, -50%) scale(20);

}

.login-button:hover span {

color: var(--bg-dark);

}

/* Options */

.options, .back-option {

display: flex;

justify-content: space-between;

margin-top: 1.5rem;

}

.back-option {

justify-content: center;

}

.option {

color: rgba(255, 255, 255, 0.7);

text-decoration: none;

font-size: 0.9rem;

transition: all 0.3s ease;

cursor: pointer;

}

.option:hover {

color: var(--primary-color);

text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);

}

/* Kayıt formu için özel stillemeler */

.register-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

visibility: hidden;

transition: opacity 0.5s ease, visibility 0.5s;

z-index: 5;

}

.register-container.active {

opacity: 1;

visibility: visible;

}

.register-button {

background: linear-gradient(90deg, var(--tertiary-color), var(--secondary-color));

border: none;

}

.register-button span {

font-weight: 600;

}

/* Animations */

@keyframes pulse {

0%, 100% { transform: scale(1); opacity: 1; }

50% { transform: scale(1.1); opacity: 0.8; }

}

@keyframes float {

0%, 100% { transform: translateY(0) rotateY(0); }

50% { transform: translateY(-10px) rotateY(180deg); }

}

@keyframes rotate {

0% { transform: rotateZ(0); }

100% { transform: rotateZ(360deg); }

}

@keyframes logoFloat {

0%, 100% { transform: translateY(0) rotateX(10deg); }

50% { transform: translateY(-20px) rotateX(-10deg); }

}

@keyframes containerFloat {

0%, 100% { transform: perspective(1000px) rotateX(5deg) translateY(0); }

50% { transform: perspective(1000px) rotateX(5deg) translateY(-10px); }

}

/* Responsive Styles */

@media (max-width: 768px) {

.logo-container {

gap: 1.5rem;

}

.logo {

width: 70px;

height: 70px;

}

.login-container {

padding: 2rem;

}

.login-container h1 {

font-size: 1.6rem;

}

@media (max-width: 480px) {

.logo-container {

gap: 1rem;

}

.logo {

width: 50px;

height: 50px;

}

.login-container {

padding: 1.5rem;

}

.login-container h1 {

font-size: 1.4rem;

}

JS

// Arkaplan için Three.js kurulumu

let scene, camera, renderer;

let particles = [];

let clock = new THREE.Clock();

// DOM yüklendiğinde çalış

document.addEventListener('DOMContentLoaded', () => {

initThreeJS();

animate();

setupFormInteractions();

setupLogoInteractions();

setupRegistrationForm();

});

// Three.js başlatma

function initThreeJS() {

// Sahne oluştur

scene = new THREE.Scene();

// Kamera ayarla

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 50;

// Renderer ayarla

renderer = new THREE.WebGLRenderer({

canvas: document.getElementById('bg-canvas'),

antialias: true,

alpha: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

// Işık ekle

const ambientLight = new THREE.AmbientLight(0x404040);

scene.add(ambientLight);

const pointLight = new THREE.PointLight(0x00f7ff, 2, 300);

pointLight.position.set(0, 0, 25);

scene.add(pointLight);

// Parçacıklar ekle

addParticles();

// Ekran boyutu değiştiğinde güncelle

window.addEventListener('resize', onWindowResize);

}

// Parçacıklar ekle

function addParticles() {

// Parçacık materyali

const particleGeometry = new THREE.SphereGeometry(0.2, 8, 8);

const createParticle = (color) => {

const material = new THREE.MeshPhongMaterial({

color: color,

transparent: true,

opacity: Math.random() * 0.5 + 0.2,

emissive: color,

emissiveIntensity: 0.5

});

const mesh = new THREE.Mesh(particleGeometry, material);

// Rastgele konum

mesh.position.x = Math.random() * 100 - 50;

mesh.position.y = Math.random() * 100 - 50;

mesh.position.z = Math.random() * 50 - 25;

// Rastgele hareket

mesh.velocity = {

x: (Math.random() - 0.5) * 0.05,

y: (Math.random() - 0.5) * 0.05,

z: (Math.random() - 0.5) * 0.02

};

mesh.baseScale = Math.random() * 0.8 + 0.5;

mesh.scale.set(mesh.baseScale, mesh.baseScale, mesh.baseScale);

scene.add(mesh);

particles.push(mesh);

};

// Farklı renklerde parçacıklar

const colors = [0x00f7ff, 0x9c27b0, 0x00ff9d];

// 150 parçacık oluştur

for (let i = 0; i < 150; i++) {

const colorIndex = Math.floor(Math.random() * colors.length);

createParticle(colors[colorIndex]);

}

// Parçacıkları güncelle

function updateParticles() {

const delta = clock.getDelta();

particles.forEach(particle => {

// Hareket

particle.position.x += particle.velocity.x;

particle.position.y += particle.velocity.y;

particle.position.z += particle.velocity.z;

// Pulsing efekti

const pulseScale = particle.baseScale + Math.sin(Date.now() * 0.001 + Math.random() * 10) * 0.1;

particle.scale.set(pulseScale, pulseScale, pulseScale);

// Sınırlar dışına çıktığında geri döndür

if (Math.abs(particle.position.x) > 50) {

particle.velocity.x *= -1;

}

if (Math.abs(particle.position.y) > 50) {

particle.velocity.y *= -1;

}

if (Math.abs(particle.position.z) > 25) {

particle.velocity.z *= -1;

}

});

}

// Ekran boyutunu ayarla

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

// Animasyon döngüsü

function animate() {

requestAnimationFrame(animate);

// Kamera hafif hareket

camera.position.x = Math.sin(Date.now() * 0.0002) * 3;

camera.position.y = Math.cos(Date.now() * 0.0001) * 2;

camera.lookAt(scene.position);

// Parçacıkları güncelle

updateParticles();

// Render

renderer.render(scene, camera);

}

// Form etkileşimleri

function setupFormInteractions() {

const form = document.getElementById('login-form');

const inputs = document.querySelectorAll('input');

const loginButton = document.querySelector('.login-button');

// Input focus efektleri

inputs.forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.style.transform = 'translateZ(20px)';

});

input.addEventListener('blur', function() {

this.parentElement.style.transform = 'translateZ(0)';

});

// Buton hover efekti

loginButton.addEventListener('mouseenter', function() {

const buttonEffect = this.querySelector('.button-effect');

buttonEffect.style.opacity = '1';

});

loginButton.addEventListener('mouseleave', function() {

const buttonEffect = this.querySelector('.button-effect');

buttonEffect.style.opacity = '0';

});

// Form gönderim efekti

form.addEventListener('submit', function(e) {

e.preventDefault();

// Giriş animasyonu

const username = document.getElementById('username').value;

loginButton.innerHTML = `<span>Hoş Geldin, ${username}!</span>`;

loginButton.disabled = true;

document.querySelectorAll('.input-group').forEach(group => {

group.style.opacity = '0.5';

group.style.pointerEvents = 'none';

});

// Sayfayı yeniden yüklemeden önce geçiş animasyonu

setTimeout(() => {

// Geçiş efekti

const transition = document.createElement('div');

transition.style.position = 'fixed';

transition.style.top = '0';

transition.style.left = '0';

transition.style.width = '100%';

transition.style.height = '100%';

transition.style.backgroundColor = 'var(--primary-color)';

transition.style.opacity = '0';

transition.style.zIndex = '9999';

transition.style.transition = 'opacity 1s ease';

document.body.appendChild(transition);

// Geçiş animasyonu

setTimeout(() => {

transition.style.opacity = '0.8';

setTimeout(() => {

// Burada normalde bir redirect olacaktı

// Şimdilik sayfayı yenileyelim

alert('Giriş başarılı! Ana sayfaya yönlendiriliyorsunuz...');

// location.reload(); // Gerçek senaryoda burası redirect olacak

}, 1000);

}, 100);

}, 1500);

});

// Kayıt ol butonuna tıklandığında kayıt formunu göster

document.getElementById('register-btn').addEventListener('click', function(e) {

e.preventDefault();

showRegisterForm();

});

}

// Kayıt formunu ayarla

function setupRegistrationForm() {

const loginContainer = document.querySelector('.login-container');

const registerForm = document.getElementById('register-form');

const registerBtn = document.getElementById('register-btn');

const backToLoginBtn = document.getElementById('back-to-login');

const signupForm = document.getElementById('signup-form');

// Kayıt formunu göster

function showRegisterForm() {

// Login formunu kapat

loginContainer.style.opacity = '0';

setTimeout(() => {

loginContainer.style.display = 'none';

// Kayıt formunu göster

registerForm.style.display = 'block';

setTimeout(() => {

registerForm.style.opacity = '1';

registerForm.classList.add('active');

}, 50);

}, 500);

}

// Giriş formuna geri dön

function hideRegisterForm() {

registerForm.style.opacity = '0';

registerForm.classList.remove('active');

setTimeout(() => {

registerForm.style.display = 'none';

// Giriş formunu tekrar göster

loginContainer.style.display = 'block';

setTimeout(() => {

loginContainer.style.opacity = '1';

}, 50);

}, 500);

}

// Geri dön butonuna tıklandığında

backToLoginBtn.addEventListener('click', function(e) {

e.preventDefault();

hideRegisterForm();

});

// Kayıt formunu gönderme

signupForm.addEventListener('submit', function(e) {

e.preventDefault();

// Şifre doğrulama

const password = document.getElementById('new-password').value;

const confirmPassword = document.getElementById('confirm-password').value;

if (password !== confirmPassword) {

alert('Şifreler eşleşmiyor!');

return;

}

// Kayıt animasyonu

const username = document.getElementById('new-username').value;

const registerButton = this.querySelector('.register-button');

registerButton.innerHTML = `<span>Hesabınız Oluşturuluyor...</span>`;

registerButton.disabled = true;

document.querySelectorAll('#signup-form .input-group').forEach(group => {

group.style.opacity = '0.5';

group.style.pointerEvents = 'none';

});

// Başarılı kayıt efekti

setTimeout(() => {

registerButton.innerHTML = `<span>Hoş Geldin, ${username}!</span>`;

// Geçiş efekti

setTimeout(() => {

// Geçiş efekti

const transition = document.createElement('div');

transition.style.position = 'fixed';

transition.style.top = '0';

transition.style.left = '0';

transition.style.width = '100%';

transition.style.height = '100%';

transition.style.backgroundColor = 'var(--tertiary-color)';

transition.style.opacity = '0';

transition.style.zIndex = '9999';

transition.style.transition = 'opacity 1s ease';

document.body.appendChild(transition);

// Geçiş animasyonu

setTimeout(() => {

transition.style.opacity = '0.8';

setTimeout(() => {

alert('Kayıt başarılı! Ana sayfaya yönlendiriliyorsunuz...');

// location.reload(); // Gerçek senaryoda burası redirect olacak

}, 1000);

}, 100);

}, 1500);

}, 2000);

});

}

// Logo etkileşimleri

function setupLogoInteractions() {

const logos = document.querySelectorAll('.logo');

logos.forEach(logo => {

logo.addEventListener('mouseenter', function() {

const bot = this.querySelector('.bot');

// 3D "float" efekti

bot.style.transform = 'translateZ(40px) rotateY(10deg)';

bot.style.filter = 'drop-shadow(0 0 20px currentColor)';

// İçindeki robotun pulsating efekti

bot.style.animation = 'none';

void bot.offsetWidth; // Reflow

bot.style.animation = 'pulse 0.6s infinite';

});

logo.addEventListener('mouseleave', function() {

const bot = this.querySelector('.bot');

bot.style.transform = '';

bot.style.filter = '';

// Orijinal animasyona geri dön

if (bot.classList.contains('bot-1')) {

bot.style.animation = 'pulse 3s ease-in-out infinite';

} else if (bot.classList.contains('bot-2')) {

bot.style.animation = 'float 4s ease-in-out infinite';

} else if (bot.classList.contains('bot-3')) {

bot.style.animation = 'rotate 5s linear infinite';

}

});

// Tıklama efekti

logo.addEventListener('click', function() {

const bot = this.querySelector('.bot');

// Botların hepsini döndür

document.querySelectorAll('.bot').forEach(b => {

b.style.transform = 'scale(0.8)';

setTimeout(() => {

b.style.transform = '';

}, 300);

});

// Random renkler belirle

const colors = ['#00f7ff', '#9c27b0', '#00ff9d', '#ff7700', '#ff00d4'];

const randomColor = colors[Math.floor(Math.random() * colors.length)];

// Geçici renk değişimi

bot.style.color = randomColor;

bot.style.filter = `drop-shadow(0 0 30px ${randomColor})`;

setTimeout(() => {

bot.style.color = '';

bot.style.filter = '';

}, 1000);

});

}

Metehan'ın bir kodu

Recommended