infoClip　☆ 動くWebデザインアイデア帳 | 動くWebデザインアイディア帳　架空のサンプル

◇動くWebデザインアイデア帳 | 動くWebデザインアイディア帳

このサイトで使用している「動き」を実際のサイトにどう反映したらいいのかを

イメージしていただくために、架空のサンプルサイトを13個つくりました！

動きを取り入れるとウェブデザインにも奥行きが出ますので

是非いろんな組み合わせを試してみてください！

◆スライドショー

　・フェードイン・アウトさせて全画面で見せる
　　　https://coco-factory.jp/ugokuweb/move01/6-1-2/

　・ゆっくりズームアウトさせながら全画面で見せる
　　　https://coco-factory.jp/ugokuweb/move01/6-1-3/

◆エリアの動き

　・スクロールすると画面やエリアが時間差で重なる
　　　https://coco-factory.jp/ugokuweb/move02/6-2/

　・スクロールすると下のエリアがヘッダーにかぶさる
　　　https://coco-factory.jp/ugokuweb/move02/6-6/

　・スクロールするとヘッダー背景画像が拡大
　　　https://coco-factory.jp/ugokuweb/move02/6-7/

◆要素を動かす

　・CSSアニメーションの使い方
　　　https://coco-factory.jp/ugokuweb/css01/

　・CSSアニメーションで動きを指定しよう
　　　https://coco-factory.jp/ugokuweb/css02/

　・CSSで要素を変形させよう
　　　https://coco-factory.jp/ugokuweb/css03/

　・jQueryで動く「きっかけ」を指定しよう
　　　https://coco-factory.jp/ugokuweb/js02/
　・jQuery とCSS を組み合わせてスクロールをしたら要素を動かす
　　　https://coco-factory.jp/ugokuweb/jscss/
　・ライブラリを使って手軽に要素を動かそう
　　　https://coco-factory.jp/ugokuweb/animatecss/

■END