入力すると下のデモ・コード・AIプロンプトが全て即座に書き換わります。
<div class="reveal-wrap"> <div class="reveal-line">FORM FOLLOWS FUNCTION</div> </div>
.reveal-wrap {
overflow: hidden;
padding: 0.5rem 0;
cursor: pointer;
}
.reveal-line {
font-family: 'Oswald', sans-serif;
font-size: 5rem;
font-weight: 600;
letter-spacing: 0.1em;
color: #1A1A1A;
transform: translateY(110%);
transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.reveal-wrap:hover .reveal-line {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-line { transform: translateY(0); transition: none; }
}Implement a "Reveal Mask" text effect. Behavior: - Text starts hidden below a clipping mask (translateY: 110%). - On hover (or scroll into view), text slides up to translateY: 0. - Easing: cubic-bezier(0.65, 0, 0.35, 1), duration 0.7s. - Use overflow:hidden on a wrapper, transform on the inner text. - For multi-line: stagger transition-delay per line (0.1s, 0.2s...). Constraints: - Pure CSS only (no JS unless triggering on scroll). - Respect prefers-reduced-motion (disable transform, show text immediately). Output: HTML + CSS in 2 separate code blocks.
Create a CSS-only "Reveal Mask" text reveal: Structure: - Wrapper div with overflow: hidden - Inner element with the text content Animation: - Initial: transform: translateY(110%) — text hidden below mask - On wrapper:hover (or .visible class added by IntersectionObserver): transform: translateY(0) - Transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1) Multi-line support: - Each line has its own wrapper. - Stagger via transition-delay: 0.1s × index. A11y: - @media (prefers-reduced-motion: reduce): instant show, no transition. Generate complete HTML + CSS.
Build a React component <RevealMask> with these props: - children: ReactNode - delay?: number (default 0, in seconds) - triggerOnView?: boolean (default true) Behavior: - Wrapper has overflow: hidden. - Inner span starts with translateY(110%). - When triggerOnView=true: use IntersectionObserver to add .revealed class. - When triggerOnView=false: only animate on hover. Tailwind: - Wrapper: overflow-hidden inline-block - Inner: inline-block translate-y-full transition-transform duration-700 ease-[cubic-bezier(0.65,0,0.35,1)] - Revealed state: translate-y-0 - Apply transition-delay via inline style from `delay` prop. Honor prefers-reduced-motion via window.matchMedia.
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
テキストが下から立ち上がるように現れる。マスクで切り取られた領域から、文字が建築の柱のように顕在化する。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。