SHEET 04 · SEA COMPONENT
海と魚
saba-sea は saba.css とは独立した optional の component です。海 (背景と帯の模様)、雰囲気 (魚の描画方式と帯の色)、魚 (種類) を body の data 属性で選びます。帯の上で pointer を動かす、または click / tap すると魚が反応します。
取り込み方
src/saba-sea.css と src/saba-sea.js を saba.css と同じく利用側 repository へ vendor し、body に属性を書きます。JavaScript が背景と帯の DOM を生成するため、HTML 側に要素を置く必要はありません。
<link rel="stylesheet" href="assets/vendor/saba.css">
<link rel="stylesheet" href="assets/vendor/saba-sea.css">
<body data-sea="tide" data-sea-style="pixel" data-fish="saba">
...
<script src="assets/vendor/saba-sea.js" defer></script>
</body>魚なし版は data-fish="none" にします (背景だけが残ります)。data-sea を外すと component は何もしません。属性を後から変えた場合は window.sabaSea.setup() を呼びます。