状況を整理
最初に、読者が置かれている状況を短く示す。
SCROLL STORY PACK 01
スクロール連動
3種類セット
カードを重ねる。横へ送る。現在地を示す。長いページで情報の順番を見せる3種類です。
2,980円税込・買い切り
- 形式
- JavaScript / CSS
- 外部ライブラリ
- なし
- 操作
- 通常の縦スクロール
01 / STACK
Sticky Stack
カードを一枚ずつ重ねます。サービス、実績、採用情報を順番に見せる動きです。
方法を見せる
次に、何をどう変えるのかを具体的に見せる。
次へつなぐ
最後に、相談や購入へ進む理由を残す。
02 / REEL
Horizontal Reel
縦スクロールに合わせてカードを横へ送ります。ホイールやタッチ操作は奪いません。
企業サイト
事業、強み、実績を順番に。
商品ページ
機能や利用場面を比較しやすく。
制作実績
案件ごとの違いを一つずつ。
採用ページ
仕事、環境、選考の流れを横に。
03 / PROGRESS
Section Progress
読み進めた位置と、いま見ている章を同時に示します。
依頼前
目的と対象ページを確認します。動きを入れること自体を目的にしません。
選定
文章量、画像、操作端末に合わせて、使う動きを一つに絞ります。
実装
必要なファイルだけを読み込み、既存レイアウトへ組み込みます。
確認
PCとスマホ、動きを減らす設定、画面外停止を確認します。
0 dependencies
native scroll
custom scroll root
reduced-motion
hidden-tab pause
PACKAGE
ZIPの内容
このページで試せる3種類と、組み込みに必要なファイルをまとめています。
- 本番用
- 圧縮済みJavaScript 3本
- 編集用
- コメント付きソース 3本
- 見本
- このページと同じ完成デモ
- 説明
- 日本語導入ガイド・利用条件
BUYOUT
2,980円
税込・買い切りです。月額料金はありません。
- 購入者が管理する1サイトで利用可能
- 商用利用・改変可能
- 素材そのものの再配布・再販売は不可
- 決済確認後、ZIPをご案内
支払いページで商品名と金額を確認できます。専用決済リンクが未発行の場合は、発行依頼が表示されます。