f114a34a62
- Hero: Magnetic Field design (ripple rings, field curves, attract animations) - H1: เปลี่ยนเป็น 'เป้าหมายของเราคือการเพิ่มกำไรให้ลูกค้า', กำไร เน้นขอบดำ - Site: ทุก eyebrow แปลเป็นไทย - Buttons: text สีดำทุกหน้าแม้ใน dark section - Yellow text: เพิ่ม -webkit-text-stroke ขอบดำทุก element - Service pages: light/light/dark pattern, process-grid แถวเดียว - Logo: อัพเดทใหม่ - Demos: เพิ่ม 5 hero design concepts (orbital, energy flow, holographic, constellation, magnetic)
180 lines
6.9 KiB
HTML
180 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>C: Holographic 3D — Hologram Sci-Fi</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600;800;900&display=swap');
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
font-family: 'Kanit', system-ui, sans-serif;
|
|
background: #020810;
|
|
color: #fff; overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
|
}
|
|
|
|
.demo { position: relative; width: 700px; height: 600px; }
|
|
canvas#holoCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
|
.scene {
|
|
position: relative; width: 100%; height: 100%;
|
|
transform-style: preserve-3d; perspective: 1200px;
|
|
transition: transform 0.2s ease-out;
|
|
}
|
|
|
|
.node {
|
|
position: absolute;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; text-align: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Center hologram */
|
|
.holo-core {
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 170px; height: 170px;
|
|
background: radial-gradient(circle at 40% 35%, rgba(0,255,255,0.15), rgba(0,200,255,0.05));
|
|
border: 2px solid rgba(0,255,255,0.5);
|
|
box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08), inset 0 0 30px rgba(0,255,255,0.05);
|
|
z-index: 10;
|
|
animation: holoPulse 2.5s ease-in-out infinite;
|
|
}
|
|
@keyframes holoPulse {
|
|
0%, 100% { border-color: rgba(0,255,255,0.5); box-shadow: 0 0 50px rgba(0,255,255,0.2), 0 0 100px rgba(0,200,255,0.08); }
|
|
50% { border-color: rgba(0,255,255,0.8); box-shadow: 0 0 70px rgba(0,255,255,0.35), 0 0 120px rgba(0,200,255,0.15); }
|
|
}
|
|
.holo-core .label { font-size: 2.8rem; font-weight: 900; color: #0ff; text-shadow: 0 0 20px rgba(0,255,255,0.5); }
|
|
.holo-core .sub { font-size: 0.7rem; color: rgba(0,255,255,0.5); margin-top: 4px; font-weight: 600; }
|
|
|
|
/* Scanline effect */
|
|
.holo-core::after {
|
|
content: ''; position: absolute; inset: 0; border-radius: 50%;
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.03) 2px, rgba(0,255,255,0.03) 4px);
|
|
pointer-events: none; z-index: 1;
|
|
}
|
|
|
|
/* Satellites - holographic */
|
|
.holo-sat {
|
|
width: 115px; height: 115px;
|
|
background: rgba(0,255,255,0.04);
|
|
border: 1.5px solid rgba(0,255,255,0.35);
|
|
box-shadow: 0 0 25px rgba(0,255,255,0.1), inset 0 0 20px rgba(0,255,255,0.04);
|
|
z-index: 5;
|
|
left: 50%; top: 50%;
|
|
}
|
|
.holo-sat::after {
|
|
content: ''; position: absolute; inset: 0; border-radius: 50%;
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,255,0.02) 2px, rgba(0,255,255,0.02) 4px);
|
|
pointer-events: none;
|
|
}
|
|
.holo-sat:nth-child(2) { transform: translate(-50%,-50%) translate3d(-220px,-140px,-80px); animation: hfloat1 5s ease-in-out infinite; }
|
|
.holo-sat:nth-child(3) { transform: translate(-50%,-50%) translate3d(180px,-20px,-30px); animation: hfloat2 6s ease-in-out infinite; }
|
|
.holo-sat:nth-child(4) { transform: translate(-50%,-50%) translate3d(-100px,210px,-100px); animation: hfloat3 5.5s ease-in-out infinite; }
|
|
@keyframes hfloat1 { 0%,100%{transform:translate(-50%,-50%) translate3d(-220px,-140px,-80px)} 50%{transform:translate(-50%,-50%) translate3d(-230px,-155px,-100px)} }
|
|
@keyframes hfloat2 { 0%,100%{transform:translate(-50%,-50%) translate3d(180px,-20px,-30px)} 50%{transform:translate(-50%,-50%) translate3d(195px,-35px,-55px)} }
|
|
@keyframes hfloat3 { 0%,100%{transform:translate(-50%,-50%) translate3d(-100px,210px,-100px)} 50%{transform:translate(-50%,-50%) translate3d(-115px,225px,-130px)} }
|
|
|
|
.holo-sat .tag { font-size: 0.9rem; font-weight: 800; color: #0ff; text-shadow: 0 0 10px rgba(0,255,255,0.4); }
|
|
.holo-sat .desc { font-size: 0.65rem; color: rgba(0,255,255,0.5); margin-top: 3px; }
|
|
|
|
.title {
|
|
position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
|
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.2em;
|
|
color: rgba(0,255,255,0.4); z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<span class="title">C. Holographic 3D — Hologram Sci-Fi</span>
|
|
<div class="demo">
|
|
<canvas id="holoCanvas"></canvas>
|
|
<div class="scene" id="scene">
|
|
<div class="node holo-core" data-node="center">
|
|
<span class="label">กำไร</span>
|
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
|
</div>
|
|
<div class="node holo-sat" data-node="mkt">
|
|
<span class="tag">Marketing</span>
|
|
<span class="desc">เพิ่มรายได้</span>
|
|
</div>
|
|
<div class="node holo-sat" data-node="ai">
|
|
<span class="tag">AI</span>
|
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
|
</div>
|
|
<div class="node holo-sat" data-node="biz">
|
|
<span class="tag">Business<br>Knowledge</span>
|
|
<span class="desc">ลดความเสี่ยง</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('holoCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
const scene = document.getElementById('scene');
|
|
|
|
function resize() {
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
canvas.width = rect.width;
|
|
canvas.height = rect.height;
|
|
}
|
|
resize(); window.addEventListener('resize', resize);
|
|
|
|
let t = 0;
|
|
function draw() {
|
|
t++;
|
|
const rect = canvas.parentElement.getBoundingClientRect();
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
const center = document.querySelector('[data-node="center"]');
|
|
const sats = document.querySelectorAll('.holo-sat');
|
|
if (!center) { requestAnimationFrame(draw); return; }
|
|
|
|
const cr = center.getBoundingClientRect();
|
|
const cx = cr.left + cr.width/2 - rect.left;
|
|
const cy = cr.top + cr.height/2 - rect.top;
|
|
|
|
sats.forEach((sat, i) => {
|
|
const pr = sat.getBoundingClientRect();
|
|
const px = pr.left + pr.width/2 - rect.left;
|
|
const py = pr.top + pr.height/2 - rect.top;
|
|
const dx = px - cx, dy = py - cy;
|
|
const dist = Math.sqrt(dx*dx + dy*dy);
|
|
|
|
// Hologram beam line (dotted)
|
|
ctx.beginPath();
|
|
ctx.setLineDash([4, 8]);
|
|
ctx.lineDashOffset = -t * 2;
|
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
|
ctx.lineTo(px - (dx/dist)*58, py - (dy/dist)*58);
|
|
ctx.strokeStyle = 'rgba(0,255,255,0.3)';
|
|
ctx.lineWidth = 1.5;
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
|
|
// Glow nodes at intervals
|
|
for (let j = 0; j < 5; j++) {
|
|
const phase = ((t * 0.02 + j/5 + i*0.33) % 1);
|
|
const x = cx + (dx/dist)*85 + dx * (1 - 85/dist - 58/dist) * phase;
|
|
const y = cy + (dy/dist)*85 + dy * (1 - 85/dist - 58/dist) * phase;
|
|
const alpha = Math.sin(phase * Math.PI);
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 2, 0, Math.PI*2);
|
|
ctx.fillStyle = `rgba(0,255,255,${0.6 * alpha})`;
|
|
ctx.fill();
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-8}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*8}deg)`;
|
|
});
|
|
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|