01 — LYRIC STAGE × THREE.JS
歌詞ステージ
を全部いじる
<yura-lyric-stage> 一つの中身です。右のパネルで世界・カメラ・つなぎ・装飾を切り替えると、その場で組み直されます。
説明文はライブラリ自身が持っている言語化です。
夜明けの色を
覚えてる
ひかりが走る
遠く とおく
ことばより先に
もう一度 歌おう
02 — THEMES
テーマ
配色(行ごとに切り替わる複数のパターン)・書体・質感・3Dの世界・よく使う動きのセット。クリックすると、このページ全体とステージがそのテーマになります。
03 — TEXT MOTION
文字の表現
登場・保持・退場・配置。歌詞にも、ページの見出し(data-yura-text)にも同じ名前で使えます。すべて繰り返し再生しています。
04 — SITE EFFECTS
サイトの演出
すべて HTML の属性だけ。このページ自体も yuraSite() 1行で動いています(見出しの登場、上端の進行バー、カーソル、配色の切り替え)。
帯(マーキー)
data-yura-marqueeSCROLL FASTER✦速くスクロールすると加速して傾く✦
上に戻すと逆走します。
数え上げ
data-yura-counter0 / 0
画面に入った瞬間に 0 から数え上げ。桁区切りは閲覧者の言語に合わせます。
吸い付くボタン + カーソル
data-yura-magnetic / data-yura-cursorポインタに引き寄せられ、カーソルが大きくなって文字を表示します(マウスのある端末のみ)。
時間差の登場
data-yura-stagger1
2
3
4
子要素を一つずつ。カードや一覧に。
視差(パララックス)
data-yura-parallaxDEPTH
スクロールすると奥行きがあるようにずれます。
05 — SCROLL TO PLAY · data-yura-scrub
スクロールが再生ボタン
このセクションの間はページ全体の配色も切り替わります(data-yura-scheme)。