書店様へのご案内
広告掲載について
FAQ
訂正とダウンロード
お問い合わせ
電子書籍一覧
デザイン・グラフィック
素材集・フォント集
イラスト・アニメ
3DCG・映像
Web制作
プログラミング
IT・ビジネス
写真技法・カメラ
写真集
美術・建築
生活・趣味・実用
カレンダー・手帳・年賀状
料理の本棚
その他
MdN Pickup news
MdNからのお知らせ
月刊MdNバックナンバー
プレスリリース
MdNユーザー会員 新規登録
MdNユーザー会員 ログイン
FAQ
プライバシーポリシー
会社概要
採用情報
特定商取引法
利用規約
閉じる
デザイン・グラフィック
素材集・フォント集
イラスト・アニメ
3DCG・映像
Web制作
プログラミング
IT・ビジネス
写真技法・カメラ
写真集
美術・建築
生活・趣味・実用
カレンダー・手帳・年賀状
料理の本棚
その他
素材集・フォント集
素材集
デザインのネタ帳 コピペで使える動くWebデザインパーツ
試し読み
デザインのネタ帳 コピペで使える動くWebデザインパーツ
矢野 みち子 著/五十嵐 小由利 著/伊藤 麻奈美 著/棧敷 友香子 著/錦織 幸知 著
定価 3,080円
(本体 2,800円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
紙の本を買う
紙の書籍を購入
Amazon
楽天ブックス
ヨドバシ.com
電子版を買う
電子書籍版を購入
Kindle
楽天kobo
発売日
:
2022-03-18
仕様
:
A5判/336P
ISBN
:
978-4-295-20244-8
内容紹介
目次
お問い合せ
Webサイト上で「動く」デザインパーツを集めたソースコード素材集。サンプルのソースコードをコピー&ペーストすれば、そのまま使えます。文字や画像がすぅっーと消えたり、ふわっ〜と表れたり、要素が左右にスライドしたり……作るのが意外に難しく汎用性が高い「動く」パーツを豊富に収録しました。収録サンプルは完成データをダウンロード配布。本書の構成は、まず基本形となるのサンプルがあり、続くステップアップとしてカスタマイズ例を紹介する流れになっています。基本形だけでも十分活用できますし、カスタマイズ例の部分は、ご自身でコードを変えてオリジナル要素をプラスする際のヒントとしても役立ちます。7章構成で、ボタンアニメーションやテキストのエフェクトなどの簡単なものから、ナビゲーションメニューやコンテンツの今風の見せ方などのサイト全体に関するものまで収録。ギャラリーやスライドショー、フォームやテーブル、SNSのアイコンなどいった細かなパーツのアイデアもまとめました。
Webサイトにちょっとした彩りを添えたいとき、動きを加えたいときなどに活用いただけます!
【ダウンロードURLについて】
本書のサンプルは購読者様に限り利用可能としているため、ダウンロードURLを非公開にしています。ダウンロードURLは本書の10ページに掲載しておりますので、10ページをご確認ください。
■ページ見本
目次
------------------------------------------------------------
■Chapter 1 ナビゲーション
------------------------------------------------------------
01 スライドインで表示するナビゲーション
02 スッと表れるドロップダウンメニュー
03 階層のドロップダウンメニュー
04 CSSだけで作るシンプルなメニュー
05 フルスクリーンで表示されるメニュー
06 スクロールに追随するサイドメニュー
07 アコーディオンで開閉するメニュー
08 背景が下から上に切り替わるメニュー
09 ロールオーバーで下線が表示されるメニュー
10 マウスオーバーで色が変わるメニュー
------------------------------------------------------------
■Chapter 2 ボタン
------------------------------------------------------------
01 マウスオーバーで透明に変わるボタン
02 アニメーションで下線がスゥーと出現
03 背景がシュッと切り替わるボタン
04 背景がセンターから変化するボタン
05 グラデーションの色が変わるボタン
06 ボーダーの色が変わるボタン
07 アニメーションで動くボタン
08 クルクル回るローディングボタン
09 カーソルの動きが印象的なエフェクト
10 ページトップにスッと戻るボタン
11 矢印がスクロールを促すアニメーション
12 背景画像が変化するボタンアニメーション
13 クリックでURLをコピーするボタン
------------------------------------------------------------
■Chapter 3 スライドショー/ギャラリー
------------------------------------------------------------
01 シンプルなスライドショー
02 ロールオーバーで別画像をスライド表示
03 スクロールで画像をふんわりと表示
04 マウスカーソルに合わせて画像が拡大
05 多彩なエフェクトで背景画像が切り替わる
06 インジケーターが波紋状に動くアニメーション
07 サイズに応じて挙動が変わるスライドショー
08 前後の画像をチラ見せするスライドショー
09 指定フィルターで要素を絞り込む
10 無限に横スクロールするカルーセル
11 3D風の立体で回転するギャラリー
------------------------------------------------------------
■Chapter 4 背景/コンテンツ
------------------------------------------------------------
01 ページ全体をふんわりと表示させる
02 パララックス効果で奥行き感を演出
03 背景色が時間とともに変化する
04 コンテンツが左右からフェードインで表れる
05 コンテンツが上下からフェードインで表れる
06 タブの色がクリックでパッと切り替わる
07 ふわふわ動くカラフルなウェーブ
08 ポップアップするモーダルウィンドウ
09 コンテンツの一部を隠す「続きを読む」ボタン
10 要素の中で雪が降る
11 ゆっくりボケる背景画像
------------------------------------------------------------
■Chapter 5 テーブル/フォーム/リスト
------------------------------------------------------------
01 マウスオーバーで背景色が変わるテーブル
02 ソート機能がついたテーブル
03 テーブル表の見出し行を固定表示
04 アニメーションを使ったチェックボックス
05 トグル型のチェックボックス
06 画像が切り替わるチェックボックス
07 フォーカスアニメーションのついたフォーム
08 クリックで伸び縮みする検索フォーム
09 クリックで全画面表示する検索フォーム
10 ラベルが移動する入力フォーム
11 入力フォームのツールチップ表示
12 フェードインしながら表示するリスト
13 ちょっとリッチなラジオボタン
14 ちょっとリッチなセレクトボックス
------------------------------------------------------------
■Chapter 6 テキスト
------------------------------------------------------------
01 スライドインで出現するテキストアニメーション
02 フェードインで出現するテキストアニメーション
03 テキストが拡大・縮小するアニメーション
04 テキストがクルッと動くアニメーション
05 見出しテキストのラインアニメーション
06 テキストの背景が動くアニメーション
07 文字がクルクル変わるニュースティッカー
08 文字が左右から集まるアニメーション
09 マスクを使ったテキストアニメーション
10 文字がぴこぴこ動くアニメーション
------------------------------------------------------------
■Chapter 7 画像/動画/SNS
------------------------------------------------------------
01 SNSアイコンにツールチップを表示
02 +ボタンをクリックでSNSアイコンが表れる
03 マウスオーバーで画像がキラリと光る
04 マウスオーバーで文字を出現させる
05 画像がゆらゆら動くアニメーションエフェクト
06 背景に動画を表示する
07 幅に応じて表示が変わるLightbox風ギャラリー
著者紹介
tweet
シェア
はてブ
あわせてよく検索される書籍
制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選
デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊