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