Youtube videoları için bazı sahnelerde animasyonlar yapmamız gerekiyor. Bende çok after effects bilgim olmadığı için kendi çapımda yapay zeka ile animasyonlar oluşturdum.
Kodları, yeni metin belgesi açıp xxx.htm olarak kaydederseniz açılır. Sonrasında video kaydını başlatıp reji kısmını kesip videolarda kullanabilirsiniz.
https://youtube.com/shorts/1zI7C0aOp...TyVZ8CfoLailuy
Kodları, yeni metin belgesi açıp xxx.htm olarak kaydederseniz açılır. Sonrasında video kaydını başlatıp reji kısmını kesip videolarda kullanabilirsiniz.
https://youtube.com/shorts/1zI7C0aOp...TyVZ8CfoLailuy
Örnek Tema 1- )
Örnek Tema 2-)
Kodlar:
1-)
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kişiselleştirilebilir Zihin Haritası</title>
<style>
:root {
--bg-color: #050505;
--card-bg: rgba(255, 255, 255, 0.05);
--card-border: rgba(255, 255, 255, 0.1);
--accent: #ffcc00;
}
body {
margin: 0;
background-color: var(--bg-color);
color: white;
font-family: 'Inter', sans-serif;
overflow: hidden;
height: 100vh;
perspective: 1500px;
}
/* YÖNETİM PANELİ */
#admin-panel {
position: fixed;
top: 20px;
left: 20px;
z-index: 9999;
background: rgba(20, 20, 20, 0.8);
backdrop-filter: blur(15px);
padding: 20px;
border-radius: 15px;
border: 1px solid var(--card-border);
display: flex;
flex-direction: column;
gap: 10px;
width: 250px;
}
input, textarea {
background: rgba(255,255,255,0.05);
border: 1px solid var(--card-border);
color: white;
padding: 10px;
border-radius: 5px;
outline: none;
}
button {
background: var(--accent);
color: black;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: transform 0.2s;
}
button:active { transform: scale(0.95); }
/* SAHNE VE KARTLAR */
#scene {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.card {
position: absolute;
width: 200px;
background: var(--card-bg);
backdrop-filter: blur(10px);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
cursor: move;
transition: border-color 0.3s;
}
.card:hover { border-color: var(--accent); }
.card h3 { margin: 0 0 8px 0; color: var(--accent); font-size: 1rem; }
.card p { margin: 0; font-size: 0.8rem; opacity: 0.8; line-height: 1.4; }
@keyframes float {
0%, 100% { transform: translate3d(0,0,0); }
50% { transform: translate3d(10px, -15px, 20px); }
}
</style>
</head>
<body>
<div id="admin-panel">
<h2 style="margin:0; font-size: 1rem;">Yeni Kart Ekle</h2>
<input type="text" id="titleInput" placeholder="Başlık (Örn: Hook)">
<textarea id="textInput" placeholder="Açıklama..."></textarea>
<button onclick="addNewCard()">Sahneye Fırlat</button>
<small style="opacity:0.5; font-size: 10px;">*Silmek için karta çift tıkla.</small>
</div>
<div id="scene"></div>
<script>
const scene = document.getElementById('scene');
const tInput = document.getElementById('titleInput');
const xInput = document.getElementById('textInput');
function addNewCard(title = null, text = null) {
const cardTitle = title || tInput.value || "Başlıksız";
const cardText = text || xInput.value || "İçerik girmediniz.";
const card = document.createElement('div');
card.className = 'card';
// Rastgele konum ve derinlik
const x = Math.random() * 80 + 10;
const y = Math.random() * 80 + 10;
const z = Math.floor(Math.random() * 600) - 300;
card.style.left = `${x}%`;
card.style.top = `${y}%`;
card.style.transform = `translateZ(${z}px)`;
card.style.zIndex = Math.floor(z + 500);
// Animasyon
const dur = 5 + Math.random() * 5;
card.style.animation = `float ${dur}s ease-in-out infinite`;
card.innerHTML = `<h3>${cardTitle}</h3><p>${cardText}</p>`;
// Çift tıklama ile silme özelliği
card.ondblclick = () => card.remove();
scene.appendChild(card);
// Inputları temizle
tInput.value = "";
xInput.value = "";
}
// Başlangıçta birkaç örnek kart atalım
addNewCard("RETENTION", "İzleyiciyi videoda tutmak için open loop kullan.");
addNewCard("EDİTİNG", "Jump cut'ları müzik ritmine göre ayarla.");
// Fare hareketi ile 3D Bakış
document.addEventListener('mousemove', (e) => {
const rotateX = (window.innerHeight / 2 - e.clientY) / 50;
const rotateY = (e.clientX - window.innerWidth / 2) / 50;
scene.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
</script>
</body>
</html>2-)<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Master Reji V25 - Reveal Pro</title>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;900&family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
<style>
:root { --bg: #050505; --neon: #39ff14; --gold: #ffcc00; --panel-w: 300px; }
body, html { margin: 0; padding: 0; background: var(--bg); color: white; font-family: 'Montserrat', sans-serif; overflow: hidden; height: 100vh; width: 100vw; user-select: none; }
#ui-layer {
position: fixed; top: 0; left: 0; width: var(--panel-w); height: 100vh;
background: rgba(10, 10, 12, 0.98); backdrop-filter: blur(30px);
padding: 20px; z-index: 100000; border-right: 1px solid #333; box-sizing: border-box;
display: flex; flex-direction: column;
}
#stage-container { position: absolute; inset: 0; overflow: hidden; background: #000; perspective: 2000px; }
#stage { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform-origin: 0 0; }
#stage.smooth-move { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
/* KART ANİMASYONU */
.card {
position: absolute; min-width: 240px; background: #0d0d0d; border-radius: 12px;
border: 2px solid rgba(255,255,255,0.1); z-index: 10; cursor: grab;
transform: scale(0); opacity: 0; pointer-events: none;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, border-color 0.4s;
}
/* Kart Göründüğünde */
.card.is-visible { transform: scale(1); opacity: 1; pointer-events: auto; }
.card-content { padding: 30px; pointer-events: none; text-align: center; }
.card h2 { margin: 0; font-family: 'Exo 2'; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; color: #fff; }
/* VURGU */
.card.highlight-focus {
z-index: 5000 !important; border-color: var(--gold) !important;
box-shadow: 0 0 80px rgba(255, 204, 0, 0.4);
transform: scale(1.1) translateZ(500px) !important;
}
/* ÇİZGİ ANİMASYONU */
#svg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.neon-line {
fill: none; stroke: var(--neon); stroke-width: 2; opacity: 0.3;
stroke-dasharray: 1000; stroke-dashoffset: 1000;
transition: stroke-dashoffset 1s ease-in-out, opacity 0.5s;
}
.line-visible { stroke-dashoffset: 0; opacity: 0.4; }
/* PANEL BUTONLARI */
#node-list { flex-grow: 1; overflow-y: auto; margin-top: 10px; }
.node-item { background: #111; margin-bottom: 12px; padding: 12px; border-radius: 8px; border: 1px solid #222; transition: 0.3s; }
.node-item.is-hidden { opacity: 0.5; border-style: dashed; }
.node-input { width: 100%; background: #000; border: 1px solid #333; color: var(--neon); padding: 8px; margin-bottom: 8px; border-radius: 4px; box-sizing: border-box; font-family: 'Exo 2'; font-size: 11px; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.cam-btn { cursor: pointer; background: #1a1a1a; color: #ccc; border: 1px solid #333; padding: 6px 2px; font-size: 9px; font-weight: bold; border-radius: 4px; text-transform: uppercase; }
.cam-btn:hover { border-color: var(--neon); color: #fff; }
.active-reveal { background: var(--neon) !important; color: black !important; border: none; }
</style>
</head>
<body oncontextmenu="return false;">
<div id="ui-layer">
<div style="font-family:'Exo 2'; font-size: 16px; color: var(--neon); text-align: center; margin-bottom: 15px; font-weight: 900;">REJİ REVEAL V25</div>
<button class="cam-btn" style="background:#333; color:white; margin-bottom:10px;" onclick="hideAllNodes()">⏹ TÜMÜNÜ GİZLE</button>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom: 10px;">
<button class="cam-btn" onclick="resetView()">2D PLAN</button>
<button class="cam-btn" style="border-color:var(--gold)" onclick="set3DView()">3D MODU</button>
</div>
<button class="cam-btn" style="background:var(--neon); color:black; height:40px; font-size:11px;" onclick="addNode('BAŞLIKSIZ')">+ YENİ ANA DAL</button>
<div id="node-list"></div>
</div>
<div id="stage-container">
<div id="stage">
<div id="inner-overlay" onclick="resetView()"></div>
<svg id="svg-canvas"></svg>
<div id="cards-container"></div>
</div>
</div>
<script>
let nodes = [];
let focusedId = null;
let cam = { x: 0, y: 0, rotX: 0, rotZ: 0, scale: 1 };
let isOrbiting = false, isPanning = false, isDraggingNode = false, activeNode = null;
function applyCamera(smooth = false) {
const stage = document.getElementById('stage');
stage.classList.toggle('smooth-move', smooth);
stage.style.transform = `scale(${cam.scale}) rotateX(${cam.rotX}deg) rotateZ(${cam.rotZ}deg) translate(${cam.x}px, ${cam.y}px)`;
}
// --- MOUSE KONTROLLERİ ---
window.addEventListener('mousedown', e => {
const card = e.target.closest('.card');
if (card && e.button === 0 && !focusedId) {
isDraggingNode = true;
activeNode = nodes.find(n => `card-${n.id}` === card.id);
} else if (e.button === 2) isOrbiting = true;
else if (e.button === 1 || (e.button === 0 && e.altKey)) isPanning = true;
});
window.addEventListener('mousemove', e => {
if (isDraggingNode && activeNode) {
activeNode.x += e.movementX / cam.scale;
activeNode.y += e.movementY / cam.scale;
updateUI();
} else if (isOrbiting) {
cam.rotZ -= e.movementX * 0.3; cam.rotX += e.movementY * 0.3;
cam.rotX = Math.max(-10, Math.min(80, cam.rotX));
applyCamera();
} else if (isPanning) {
cam.x += e.movementX / cam.scale; cam.y += e.movementY / cam.scale;
applyCamera();
}
});
window.addEventListener('mouseup', () => { isDraggingNode = isOrbiting = isPanning = false; activeNode = null; });
window.addEventListener('wheel', e => {
const delta = e.deltaY > 0 ? 0.9 : 1.1;
cam.scale = Math.max(0.1, Math.min(5, cam.scale * delta));
applyCamera();
}, { passive: false });
// --- TEMEL FONKSİYONLAR ---
function focusNode(id) {
const n = nodes.find(n => n.id === id);
if(!n.visible) return; // Gizli karta vurgu yapılmaz
focusedId = id;
document.body.classList.add('focused');
const panelWidth = 300;
const targetX = panelWidth + ((window.innerWidth - panelWidth) / 2);
cam.scale = 1.8; cam.rotX = 15; cam.rotZ = -5;
cam.x = (targetX / cam.scale) - n.x - 120;
cam.y = (window.innerHeight / 2 / cam.scale) - n.y - 45;
applyCamera(true);
updateUI();
}
function resetView() {
focusedId = null; document.body.classList.remove('focused');
cam = { x: 0, y: 0, rotX: 0, rotZ: 0, scale: 1 };
applyCamera(true); updateUI();
}
function set3DView() {
focusedId = null;
cam = { x: 200, y: 150, rotX: 40, rotZ: 20, scale: 0.6 };
applyCamera(true); updateUI();
}
// --- GÖSTER / GİZLE SİSTEMİ ---
function addNode(title, parentId = null) {
const id = 'n-' + Date.now();
const parent = nodes.find(n => n.id === parentId);
nodes.push({
id, title, parentId,
x: parent ? parent.x + 380 : 400,
y: parent ? parent.y + (Math.random()*100-50) : 300,
visible: true
});
updateUI();
}
function toggleNode(id) {
const n = nodes.find(n => n.id === id);
if(n) {
n.visible = !n.visible;
updateUI();
}
}
function hideAllNodes() {
nodes.forEach(n => n.visible = false);
resetView();
updateUI();
}
function deleteNode(id) {
nodes = nodes.filter(n => n.id !== id && n.parentId !== id);
updateUI();
}
function updateUI() {
const list = document.getElementById('node-list');
const svg = document.getElementById('svg-canvas');
const container = document.getElementById('cards-container');
list.innerHTML = '';
svg.innerHTML = '';
nodes.forEach(node => {
// SIDEBAR
const item = document.createElement('div');
item.className = `node-item ${node.visible ? '' : 'is-hidden'}`;
item.innerHTML = `
<input class="node-input" type="text" value="${node.title}" oninput="updateNodeTitle('${node.id}', this.value)">
<div class="btn-grid">
<button class="cam-btn ${node.visible ? 'active-reveal' : ''}" onclick="toggleNode('${node.id}')">${node.visible ? 'GİZLE' : 'GÖSTER'}</button>
<button class="cam-btn" onclick="addNode('YENİ', '${node.id}')">+ DAL</button>
<button class="cam-btn" style="color:var(--gold)" onclick="focusNode('${node.id}')">VURGU</button>
<button class="cam-btn" style="color:#ff4444" onclick="deleteNode('${node.id}')">SİL</button>
</div>`;
list.appendChild(item);
// KARTLAR
let card = document.getElementById(`card-${node.id}`);
if(!card) {
card = document.createElement('div');
card.id = `card-${node.id}`;
card.className = 'card';
card.innerHTML = `<div class="card-content"><h2>${node.title}</h2></div>`;
container.appendChild(card);
}
card.style.left = node.x + 'px';
card.style.top = node.y + 'px';
// Görünürlük sınıfları
if(node.visible) card.classList.add('is-visible');
else card.classList.remove('is-visible');
if(focusedId === node.id) card.classList.add('highlight-focus');
else card.classList.remove('highlight-focus');
// ÇİZGİLER
if (node.parentId) {
const p = nodes.find(n => n.id === node.parentId);
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute('class', `neon-line ${node.visible && p.visible ? 'line-visible' : ''}`);
const d = `M ${p.x+240} ${p.y+45} C ${p.x+320} ${p.y+45} ${node.x-80} ${node.y+45} ${node.x} ${node.y+45}`;
path.setAttribute('d', d);
svg.appendChild(path);
}
});
}
function updateNodeTitle(id, val) {
const n = nodes.find(n => n.id === id);
if(n) {
n.title = val.toUpperCase();
document.querySelector(`#card-${id} h2`).innerText = n.title;
}
}
addNode("STRATEJİ MERKEZİ");
</script>
</body>
</html>