Button A
基本料金内
背景スライド
ホバーすると左から色が流れ込み、文字色が反転します。
アニメーションサンプルAnimation
デザインカンプに動きを指定する際の見本としてご活用ください。
指示書に「Button A」のようにIDをご記載いただければ、そのとおりに実装いたします。
スクロールで表示される動きは、「もう一度再生」で何度でもご確認いただけます。
ボタンButton
ボタンのホバーアニメーションは基本料金に含まれます。
Button B
基本料金内
矢印スライド
ホバーすると矢印が右へ動き、背景がほんのり色づきます。
Button C
基本料金内
枠線ドロー
ホバーすると枠線が一筆書きで一周して描かれます。
Button D
基本料金内
浮き上がり
ホバーで影が広がって浮き上がり、押すと沈み込みます。
画像ホバーHover
画像のホバーアニメーションは基本料金に含まれます。ホバー時の動きはPCでご確認ください。
Hover A
基本料金内
端ぼかし
ホバーすると画像の外周がぼけ、中央だけがくっきり残ります。
Hover B
基本料金内
ズーム
枠はそのままに、中の画像だけがゆっくり拡大します。
Hover C
基本料金内
モノクロ → カラー
白黒の画像が、ホバーで色づきます。
スクロールで表示Scroll
スクロールに合わせた動きは要相談です。内容に応じてお見積もりいたします。
Scroll A
要相談
フェードアップ
画面に入ると、下から浮かび上がるように現れます。
Scroll B
要相談
左右スライドイン
画面に入ると、左右からすべり込むように現れます。
Scroll C
要相談
時差表示
画面に入ると、カードが1枚ずつ順番に現れます。
Scroll D
要相談
画像マスク表示
画面に入ると、幕が開くように画像が現れます。
テキストText
テキストの動きは要相談です。内容に応じてお見積もりいたします。
Text A
要相談
1文字ずつ表示
英字が1文字ずつ現れ、そのあとに日本語が表示されます。このサイトの見出しで使用している動きです。
見本の見出しSample
Text B
要相談
マーカー線
画面に入ると、強調したい言葉に線が引かれます。
本文の中で強調したい言葉に、蛍光ペンのような線が引かれます。
制作の現場に、頼れるコーディングパートナーを。
code Knospeは、制作会社様とフリーランスデザイナー様のためのコーディングパートナーです。
デザインに集中したいときも、案件が重なって手が足りないときも。
丁寧な実装はもちろん、迅速なレスポンスと進捗共有を大切に、制作の現場を支えます。
単発のご依頼から継続的なパートナーシップまで、お気軽にご相談ください。