/* ================================================ scrollreveal.css — Scroll In/Out Animation วางใน ================================================ */ /* ── base state: ซ่อนก่อน ── */ .sr { opacity: 0; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), filter 0.7s cubic-bezier(0.4, 0, 0.2, 1); } /* ── visible: แสดง ── */ .sr.in-view { opacity: 1; transform: none !important; filter: none !important; } /* ───────────────────── DIRECTIONS ───────────────────── */ /* fade up (default) */ .sr, .sr-up { transform: translateY(40px); } /* fade down */ .sr-down { transform: translateY(-40px); } /* fade left */ .sr-left { transform: translateX(-50px); } /* fade right */ .sr-right { transform: translateX(50px); } /* zoom in */ .sr-zoom { transform: scale(0.88); filter: blur(4px); } /* zoom out */ .sr-zoomout { transform: scale(1.08); filter: blur(4px); } /* flip ซ้ายขวา */ .sr-flip { transform: rotateY(25deg) translateX(-30px); filter: blur(2px); } /* ───────────────────── DELAYS ───────────────────── */ .sr-d1 { transition-delay: 0.10s; } .sr-d2 { transition-delay: 0.20s; } .sr-d3 { transition-delay: 0.30s; } .sr-d4 { transition-delay: 0.45s; } .sr-d5 { transition-delay: 0.60s; } /* ───────────────────── SPEED ───────────────────── */ .sr-fast { transition-duration: 0.4s; } .sr-slow { transition-duration: 1.1s; } .modal.fade .modal-dialog { transition: transform .15s ease-out !important; }