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)
198 lines
6.6 KiB
HTML
198 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>E: Magnetic Field — สนามแม่เหล็ก</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: #060a12;
|
|
color: #fff; overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center; min-height: 100vh;
|
|
}
|
|
|
|
.demo { position: relative; width: 700px; height: 600px; }
|
|
canvas#magCanvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
|
|
.scene {
|
|
position: relative; width: 100%; height: 100%;
|
|
transform-style: preserve-3d;
|
|
transition: transform 0.3s ease-out;
|
|
}
|
|
|
|
.node {
|
|
position: absolute;
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; text-align: center;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Magnet core */
|
|
.magnet {
|
|
left: 50%; top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 170px; height: 170px;
|
|
background: radial-gradient(circle at 40% 35%, #3a2000, #0d0500);
|
|
border: 3px solid #fed400;
|
|
box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1);
|
|
z-index: 10;
|
|
animation: magnetPulse 2s ease-in-out infinite;
|
|
}
|
|
@keyframes magnetPulse {
|
|
0%, 100% { box-shadow: 0 0 0 12px rgba(254,212,0,0.1), 0 0 60px rgba(254,212,0,0.3), 0 0 140px rgba(254,180,0,0.1); }
|
|
50% { box-shadow: 0 0 0 18px rgba(254,212,0,0.15), 0 0 80px rgba(254,212,0,0.4), 0 0 160px rgba(254,180,0,0.15); }
|
|
}
|
|
.magnet .label { font-size: 2.6rem; font-weight: 900; color: #fed400; }
|
|
.magnet .sub { font-size: 0.7rem; color: rgba(254,212,0,0.5); margin-top: 4px; font-weight: 600; }
|
|
|
|
/* Attracted nodes */
|
|
.attract {
|
|
width: 105px; height: 105px;
|
|
background: rgba(254,212,0,0.04);
|
|
border: 1.5px solid rgba(254,212,0,0.3);
|
|
box-shadow: 0 0 20px rgba(254,212,0,0.08);
|
|
z-index: 5;
|
|
left: 50%; top: 50%;
|
|
animation: attract 3s ease-in-out infinite alternate;
|
|
}
|
|
.attract:nth-child(2) {
|
|
transform: translate(-50%,-50%) translate3d(-200px,-150px,-60px);
|
|
animation-name: attract1;
|
|
}
|
|
.attract:nth-child(3) {
|
|
transform: translate(-50%,-50%) translate3d(170px,-20px,-25px);
|
|
animation-name: attract2;
|
|
}
|
|
.attract:nth-child(4) {
|
|
transform: translate(-50%,-50%) translate3d(-100px,190px,-70px);
|
|
animation-name: attract3;
|
|
}
|
|
|
|
@keyframes attract1 {
|
|
0% { transform: translate(-50%,-50%) translate3d(-220px,-160px,-80px); }
|
|
100% { transform: translate(-50%,-50%) translate3d(-185px,-140px,-50px); }
|
|
}
|
|
@keyframes attract2 {
|
|
0% { transform: translate(-50%,-50%) translate3d(185px,-25px,-35px); }
|
|
100% { transform: translate(-50%,-50%) translate3d(155px,-15px,-20px); }
|
|
}
|
|
@keyframes attract3 {
|
|
0% { transform: translate(-50%,-50%) translate3d(-120px,210px,-90px); }
|
|
100% { transform: translate(-50%,-50%) translate3d(-90px,180px,-60px); }
|
|
}
|
|
|
|
.attract .tag { font-size: 0.9rem; font-weight: 800; color: #fff; }
|
|
.attract .desc { font-size: 0.65rem; color: rgba(255,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(255,255,255,0.4); z-index: 100;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<span class="title">E. Magnetic Field — สนามแม่เหล็กดึงดูด</span>
|
|
<div class="demo">
|
|
<canvas id="magCanvas"></canvas>
|
|
<div class="scene" id="scene">
|
|
<div class="node magnet" data-node="center">
|
|
<span class="label">กำไร</span>
|
|
<span class="sub">เป้าหมายของทุกธุรกิจ</span>
|
|
</div>
|
|
<div class="node attract" data-node="mkt">
|
|
<span class="tag">Marketing</span>
|
|
<span class="desc">เพิ่มรายได้</span>
|
|
</div>
|
|
<div class="node attract" data-node="ai">
|
|
<span class="tag">AI</span>
|
|
<span class="desc">ลดต้นทุนและเวลา</span>
|
|
</div>
|
|
<div class="node attract" data-node="biz">
|
|
<span class="tag">Business<br>Knowledge</span>
|
|
<span class="desc">ลดความเสี่ยง</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const canvas = document.getElementById('magCanvas');
|
|
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 nodes = document.querySelectorAll('.attract');
|
|
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;
|
|
|
|
// Magnetic field lines (ripple waves)
|
|
for (let r = 0; r < 4; r++) {
|
|
const radius = 95 + r * 30 + (t * 0.02) % 30;
|
|
const alpha = Math.max(0, 0.25 - r * 0.06 - ((t * 0.02) % 30) / 120);
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, 0, Math.PI*2);
|
|
ctx.strokeStyle = `rgba(254,212,0,${alpha})`;
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Connection lines with magnetic field arcs
|
|
nodes.forEach((node, i) => {
|
|
const pr = node.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);
|
|
|
|
// Main connection
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
|
ctx.lineTo(px - (dx/dist)*53, py - (dy/dist)*53);
|
|
ctx.strokeStyle = `rgba(254,212,0,0.4)`;
|
|
ctx.lineWidth = 2;
|
|
ctx.stroke();
|
|
|
|
// Field curve arcs on both sides
|
|
for (let side = -1; side <= 1; side += 2) {
|
|
const offset = side * 15;
|
|
const midX = cx + dx * 0.5 + (-dy/dist) * offset;
|
|
const midY = cy + dy * 0.5 + (dx/dist) * offset;
|
|
ctx.beginPath();
|
|
ctx.moveTo(cx + (dx/dist)*85, cy + (dy/dist)*85);
|
|
ctx.quadraticCurveTo(midX, midY, px - (dx/dist)*53, py - (dy/dist)*53);
|
|
ctx.strokeStyle = `rgba(254,212,0,0.1)`;
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
}
|
|
});
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
document.addEventListener('mousemove', e => {
|
|
scene.style.transform = `rotateX(${(e.clientY/window.innerHeight-0.5)*-6}deg) rotateY(${(e.clientX/window.innerWidth-0.5)*6}deg)`;
|
|
});
|
|
|
|
draw();
|
|
</script>
|
|
</body>
|
|
</html>
|