「動くWebデザインアイデア帳」は、デジタルハリウッドSTUDIO 講師の久保田涼子と杉山彰啓がjQueryやCSSアニメーションをはじめたばかりの方へ向けて、近年のウェブサイトで利用されている基本的な動きをまとめたサイトです。
「サイトに動きをつける時、同じ内容を何回も検索をしてソースコードを探している」
「サイトで見つけたソースコードをそのままコピペしてみたけど、動かない」
「JavaScript の本を購入してみたが、実際のサイトにどう組みこめばいいか具体的なイメージがわかない」
「動きの原理を最低限理解して、とにかく早く実務にいかしたい」
スクールで教えていると、このような声をたくさんいただきます。
「必要な情報がひとつにまとまっていて、講師が受講生さんに教えるために便利なサイトがあればいいな」という気持ちでつくりました。
1 つの動きを実現する方法は様々ありますが、なるべくわかりやすい方法を選んでいます。
サイトを利用して「動いた！嬉しい！」という気持ちを、
その後のさらなる動きの仕組みへの探求心につなげて頂ければ幸いです。
利用規約 / お問い合わせ / プライバシーポリシー はこちらから
久保田涼子 ＆ 杉山彰啓
企画やデバッグにご協力いただいた方々
全国のデジタルハリウッドSTUDIOの在卒業生、講師、スタッフの皆さん / 秋吉真里奈 / 阿諏訪聡美 / 飯田沙絵佳 / 岩田晶葉 / 伊藤哲朗 / 五十嵐大樹 / 一杉あみ / 植木美穂 / 梅木勇輝 / 遠藤雅俊 / 大山和美 / 大畠昌也 / 小田切美音 / 葛西美歌 / 柿島奈美 / 加藤 真美 / 鴨志田京子 / 川井真裕美 / 栗谷幸助 / 小池 優子 / 小島ひな / 小寺 香澄 / 小林美紀子 / 近藤里虹 / 櫻井美保 / 柴田いづみ / 鈴木真実 / スチュアート亮子 / 谷本浩治 / 田丸俊樹 / 築地海露穂 / 津久井智子 / 中野拓 / 中村早雪 / 西田優香 / 西田あやの / 西原礼奈 / 野澤由史子 / 花川雄太 / 浜中望帆 / 羽深小百合 / 林 桃子 / 廣重千晶 / 福井克彦 / 圃本さあや / 堀内崇子 / 堀部葵 / 松浦和佳 / 馬渡絢美 / 三橋功 / 山下継太 / ソシム株式会社 片柳様 三浦様 中村様 / 他 サポート・助言・応援をしてくださった皆さん
素材をお借りした場所
写真素材：Unsplash （https://unsplash.com/）
動画素材：Pexels（https://www.pexels.com/ja-jp/）
アイコン素材：icooon-mono（https://icooon-mono.com/）
ダ鳥獣戯画（https://chojugiga.com/）
このサイト内の動きも、掲載されているパーツを組み合わせてつくりました！
※数字は書籍の中の連番です。
- ローディング・・・
4-1-4 ロゴアニメーション
後編「印象に関わる動き」：PNGアニメーション - 画面遷移・・・
4-2-9背景色が四角に拡大（四隅へ） - グローバルナビゲーション・・・
5-1-3 ドロップダウンメニュー（写真付 上ナビ）
5-1-17クリックしたら円形背景が拡大（下から） - ハンバーガーメニュー・・・
5-2-9 3本線がジャンプして×に - テキストナビゲーション・・・
5-3-1 中心から外に線が伸びる（下部） - タブメニュー・・・
5-4-1 タブメニュー - ボタン・・・
7-1-15 下に押し込まれる（立体が平面に） - ページトップリンク・・・
8-1-8リンクボタンをクリックしたら形状が変化 - ページ内リンク・・・
8-2-1 ページ内の指定の場所にスクロール - ニュースティッカー・・・
9-4-1 ニュースティッカー - モーダルウィンドウ・・・
9-6-3 リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示 - スクロールに連動した動き・・・
後編「印象に関わる動き」: jQuery とCSS を組み合わせてスクロールをしたら要素を動かす
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください！
