見本帳で動きを見て「コードをコピー」→ HTMLに貼るだけ。 Webサイトやブログに「ふわっ」「すっ」とした動きを足せる、コピペ用のCSSアニメーション集です。 ▼ 入っている動き（48種） ・ボタン 8種（リフト／フィル／矢印スライド／シャイン／リング／プレス／スプレッド／波紋） ・カード・画像 8種（ズーム／カードリフト／オーバーレイ／キャプション／白黒→カラー／チルト／フレーム／フォーカス） ・リンク・文字 8種（下線2種／マーカー／入れかわり／矢印／色ワイプ／上下ライン／アイコン回転） ・スクロールで表示 16種（フェード5方向／ズーム2種／ぼかし／フリップ／めくる2種／カラーパネル／見出しライン／順番に表示／カウントアップ／ループ文字） ・小さな動き 8種（ドット／スピナー／スケルトン／パルス／スクロールの合図／メニューボタン／点滅カーソル／スイッチ） ▼ 特長 ・CSSは1ファイル。JavaScriptは約4KBで、jQueryなどのライブラリは不要 ・スクロール表示は data-hcn="fade-up" のように属性をつけるだけ（開始の遅れ・毎回再生も指定可） ・色・速さ・動く距離は CSS変数で一括変更。見本帳で色を試せます ・「アニメーションを減らす」設定の人には動きを止める配慮（prefers-reduced-motion） ・JSが読み込まれなくても、要素が隠れたままにならない作り ・見本帳は日本語・英語の切りかえつき／組み合わせた使用例ページつき ▼ 内容物（zip 約260KB） ・index.html（見本帳）／demo-page.html（使用例ページ） ・css/hcn-motion.css／js/hcn-motion.js ・assets/ 見本用サンプル画像4点 ・使い方ガイド.pdf（A4・7ページ：使い方・48種の一覧表・設定・WordPressでの使い方・よくある質問） ・README_ja.txt／README_en.txt／LICENSE.txt ▼ 使い方 1. css と js のフォルダをサイトのフォルダに入れる 2. <head> に CSS と JS を読み込む2行を追加 3. 見本帳から「コードをコピー」して貼り、文字・画像・リンク先を書きかえる ※ WordPress では「追加CSS」と「カスタムHTML」ブロックで使えます（くわしくはガイドPDF）。 ▼ 動作環境 Chrome（PC・スマホ幅）で確認しています。一部の効果（color-mix() を使うもの）は2023年以降の主なブラウザ向けです。Safari・Firefox の実機では確認していません。 HTML・CSSを少し触れる方向けです。 ▼ 利用規約 ・ご自身のサイト・クライアントのサイトに使えます（商用OK・サイト数無制限・クレジット表記不要） ・コードそのもの（一部改変を含む）を素材・テンプレート・テーマとして再配布・販売することはできません ・使用例ページの店名・数字・文章はすべてサンプルです ・フォント：見本帳の表示に Google Fonts の Zen Maru Gothic／Poppins（SIL Open Font License 1.1・商用利用可）を読み込んでいます。CSS本体はフォントを指定しません ・デジタル商品のため、購入後の返品・返金はできません haconiwa design