YURA — ALL FEATURES

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-marquee
SCROLL FASTER✦速くスクロールすると加速して傾く✦

上に戻すと逆走します。

数え上げ

data-yura-counter
0 / 0

画面に入った瞬間に 0 から数え上げ。桁区切りは閲覧者の言語に合わせます。

吸い付くボタン + カーソル

data-yura-magnetic / data-yura-cursor
近づいてみる →

ポインタに引き寄せられ、カーソルが大きくなって文字を表示します(マウスのある端末のみ)。

時間差の登場

data-yura-stagger
1
2
3
4

子要素を一つずつ。カードや一覧に。

視差(パララックス)

data-yura-parallax
DEPTH

スクロールすると奥行きがあるようにずれます。

ボタンとリンク

class="yura-btn" / "yura-link"
ホバーで満ちる下線が引かれるリンク

クラスを付けるだけの定番パーツ。

05 — SCROLL TO PLAY · data-yura-scrub

スクロールが再生ボタン

このセクションの間はページ全体の配色も切り替わります(data-yura-scheme)。

スクロールすると

一行ずつ

歌詞が進む

戻せば

巻き戻る

06 — FULL DEMOS

完成例

組み合わせた実例。それぞれ別のコマンドで開けます。