最低限おぼえておきたい動き
-ヒュッ（CSS）-
See the Pen 4-5 最低限覚えておきたい現れ方 - ヒュッ by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」下のRerunを押して動きを確かめてね！↑
動きを実現する仕組み
CSS アニメーションで実現するズームアウトの方法です。
このサンプルは、画面を開いたらすぐに動きます。
スクロールをして動かす、といったきっかけを指定したい場合は、「jQuery とCSS を組み合わせてスクロールをしたら要素を動かす」を参考にしてください。
HTMLの書き方
■HTMLの要素は自由です。
指定した対象がインライン要素（例<span>タグなど）の場合はCSSでdisplay:block;を指定し、ブロック要素にしてから動かしましょう。
＜NG例＞https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_zoomoutng/
＜OK例＞https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_zoomoutok/
<div class="zoomOut">ヒュッ（縮小）</div>自作のCSS内の書き方
/* 縮小 */
.zoomOut{
animation-name:zoomOutAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
@keyframes zoomOutAnime{
from {
transform: scale(1.2);
}
to {
transform:scale(1);
}
}
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください！
