Detalii Tehnice
🎬 Intro tip Netflix, 100% HTML/CSS/JS — descarcă GRATUIT codul demo acum!
🎬 Intro tip Netflix pentru brandul tău!
Ai văzut celebra animație de intro Netflix? Acum poți avea și tu ceva similar, complet personalizat pentru site-ul sau proiectul tău.
💻 Codul este scris 100% manual în HTML, CSS și JavaScript – fără Figma, fără programe externe. Totul este optimizat pentru performanță și ușor de integrat.
✨ Efecte dinamice • Design modern • Free pentru comunitatea noastră
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>RTEC DESIGN — Intro tip Netflix</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
<style>
:root{
--bg:#05060a; --ink:#e8eef7; --muted:#9aabc4; --red:#ff2c2c; --vio:#8b5cf6; --cyan:#22d3ee; --gold:#f59e0b;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(1200px 800px at 70% -20%, #0b0e18 0%, transparent 60%), #000; color:var(--ink); font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; overflow:hidden}
.stage{position:relative; height:100%; width:100%; display:grid; place-items:center; background:
radial-gradient(1400px 900px at 15% -10%, rgba(255,45,45,.14), transparent 60%),
radial-gradient(1000px 700px at 110% 110%, rgba(34,211,238,.12), transparent 60%),
linear-gradient(#05060a, #000);
animation:bg-flicker 6s ease-in-out forwards;
}
@keyframes bg-flicker{0%,10%{filter:brightness(.85)} 12%{filter:brightness(1)} 15%{filter:brightness(.9)} 18%{filter:brightness(1)} 100%{filter:brightness(1)}}
.stage::after{content:""; position:absolute; inset:0; pointer-events:none; background:
repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 2px);
mix-blend-mode:overlay; opacity:.15; animation:noise .8s steps(3) infinite;}
@keyframes noise{50%{opacity:.1} 100%{opacity:.15}}
#intro{width:min(1080px, 92vw); height:auto; display:block}
.skip{position:fixed; right:18px; top:18px; z-index:10; border:1px solid rgba(255,255,255,.2); color:#dbe7ff; background:rgba(255,255,255,.05); padding:10px 14px; border-radius:999px; font-weight:700; letter-spacing:.2px; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:.95; transition:.2s}
.skip:hover{opacity:1; transform:translateY(-1px)}
.flash{position:fixed; inset:0; pointer-events:none; background:radial-gradient(1600px 900px at 10% 50%, rgba(255,255,255,.25), transparent 60%), radial-gradient(1600px 900px at 90% 50%, rgba(255,255,255,.2), transparent 60%); filter:blur(2px); opacity:0}
.flash.on{animation:flash 550ms ease-out forwards}
@keyframes flash{0%{opacity:0} 20%{opacity:1} 100%{opacity:0}}
.wordmark{font-weight:900; letter-spacing:.32em; fill:#f4f7ff; opacity:0}
.wordmark.show{animation:wm 900ms 2.6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes wm{0%{opacity:0; letter-spacing:.8em} 100%{opacity:1; letter-spacing:.32em}}
.shine{opacity:0}
.shine.show{animation:shine 1200ms 3.0s ease-out forwards}
@keyframes shine{0%{opacity:0; transform:translateX(-60%)} 10%{opacity:1} 100%{opacity:0; transform:translateX(160%)}}
.outro{position:fixed; inset:0; background:#000; pointer-events:none; opacity:0}
.outro.on{animation:fadeout .7s 4.4s ease forwards}
@keyframes fadeout{to{opacity:1}}
</style>
</head>
<body>
<button class="skip" id="skip">Skip intro</button>
<div class="flash" id="flash"></div>
<div class="stage" id="stage">
<svg id="intro" viewBox="0 0 1200 700" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="RTEC DESIGN intro">
<defs>
<linearGradient id="beamA" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#0ea5e9"/>
<stop offset="0.5" stop-color="#ef4444"/>
<stop offset="1" stop-color="#8b5cf6"/>
</linearGradient>
<linearGradient id="beamB" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#ef4444"/>
<stop offset="0.5" stop-color="#f59e0b"/>
<stop offset="1" stop-color="#22d3ee"/>
</linearGradient>
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="10" result="b"/>
<feMerge>
<feMergeNode in="b"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<mask id="Rmask">
<rect width="1200" height="700" fill="#000"/>
<text x="50%" y="58%" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="520" font-weight="900" fill="#fff">R</text>
</mask>
<mask id="WMmask">
<rect width="1200" height="700" fill="#000"/>
<text x="50%" y="88%" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="68" font-weight="900" fill="#fff" letter-spacing="14">RTEC DESIGN</text>
</mask>
</defs>
<rect width="1200" height="700" fill="#000"/>
<g mask="url(#Rmask)">
<g id="beams" filter="url(#glow)">
<g transform="translate(0,0) rotate(-24 600 350)">
<rect class="stripe" x="-1200" y="-100" width="700" height="36" rx="18" fill="url(#beamA)" opacity=".95"/>
</g>
</g>
<g id="finalR" opacity="0">
<rect width="1200" height="700" fill="url(#beamB)"/>
</g>
</g>
<text id="wm" class="wordmark" x="50%" y="88%" text-anchor="middle" font-size="68" font-weight="900" letter-spacing="14">RTEC DESIGN</text>
<g class="shine" id="shine" mask="url(#WMmask)">
<linearGradient id="shineG" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#fff" stop-opacity=".0"/>
<stop offset="0.5" stop-color="#fff" stop-opacity=".9"/>
<stop offset="1" stop-color="#fff" stop-opacity=".0"/>
</linearGradient>
<rect x="-400" y="620" width="400" height="120" fill="url(#shineG)"/>
</g>
</svg>
</div>
<div class="outro" id="outro"></div>
<audio id="tadum" preload="auto"></audio>
<script>
// ------- Config -------
const DURATION = 4800;
const STRIPES = 14;
const STRIPE_GAP = 36;
const STRIPE_WIDTH = 880;
const STRIPE_HEIGHT = 36;
const ENTER_CALLBACK = null;
const SOUND_URL = "";
// ------- Ajutor -------
const svgNS = 'http://www.w3.org/2000/svg';
const beamsGroup = document.querySelector('#beams g');
const finalR = document.getElementById('finalR');
const wm = document.getElementById('wm');
const flash = document.getElementById('flash');
const shine = document.getElementById('shine');
const skip = document.getElementById('skip');
const outro = document.getElementById('outro');
const audio = document.getElementById('tadum');
if(SOUND_URL){ audio.src = SOUND_URL; }
// Construiți mai multe dungi cu animație eșalonată
beamsGroup.innerHTML = '';
for(let i=0;i<STRIPES;i++){
const r = document.createElementNS(svgNS, 'rect');
r.setAttribute('class', 'stripe');
r.setAttribute('x', -1400 - i*40);
r.setAttribute('y', -180 + i*STRIPE_GAP);
r.setAttribute('width', STRIPE_WIDTH);
r.setAttribute('height', STRIPE_HEIGHT);
r.setAttribute('rx', STRIPE_HEIGHT/2);
r.setAttribute('fill', i%2? 'url(#beamA)': 'url(#beamB)');
r.style.opacity = .95;
// Animație CSS per bandă cu decalaj
const delay = 80 * i;
r.style.animation = `sweep 1700ms ${delay}ms cubic-bezier(.2,.8,.1,1) forwards, fadeTail 1300ms ${delay+1200}ms ease-out forwards`;
beamsGroup.appendChild(r);
}
// Cadre cheie prin intermediul unei foi de stil dinamice, astfel încât să se aplice și elementelor SVG
const style = document.createElement('style');
style.textContent = `
@keyframes sweep { from { transform: translateX(-10%) } 60% { transform: translateX(60%) } to { transform: translateX(140%) } }
@keyframes fadeTail { from { opacity: .95 } to { opacity: .12 } }
`;
document.head.appendChild(style);
// Evenimente în cronologie
setTimeout(()=>{ finalR.setAttribute('opacity','1'); flash.classList.add('on'); }, 2100);
setTimeout(()=>{ wm.classList.add('show'); }, 2400);
setTimeout(()=>{
shine.classList.add('show');
}, 3000);
// sunet opțional (necesită un gest al utilizatorului pe multe browsere)
document.addEventListener('click', oncePlay, { capture:true, once:true });
function oncePlay(){ if(audio && SOUND_URL){ audio.volume = 0.9; audio.play().catch(()=>{}); } }
// Butonul Sari peste
skip.addEventListener('click', endIntro);
function endIntro(){
outro.classList.add('on');
setTimeout(()=>{ if(ENTER_CALLBACK) ENTER_CALLBACK(); }, 700);
}
// Încheiere automată după o durată
setTimeout(endIntro, DURATION);
</script>
</body>
</html>
