最低限おぼえておきたい動き
-パタッ(CSS)-

デモページを見る

See the Pen 4-2 最低限覚えておきたい現れ方 - パタッ 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_flipng/
<OK例>https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/work/inline_flipok/

<div class="flipDown">パタッ(下へ)</div>
<div class="flipLeft">パタッ(左へ)</div>
<div class="flipLeftTop">パタッ(左上へ)</div>
<div class="flipRight">パタッ(右へ)</div>
<div class="flipRightTop">パタッ(右上へ)</div>

自作のCSS内の書き方

※パタッの動きで使用しているtranslate3d(0,0,0) はスマートフォンのSafari やChrome のブラウザでうまく動作しない場合があります。
その場合は、親要素に  transform: translate3d(0, 0, 0); を付与することで解決します。

(例)
・HTML
<div class="flip">
<div class="flipLeft" ></div>
</div>

・CSS
.flip{
transform: translate3d(0, 0, 0);
}

———————-

/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}

この技術を使ったサンプルサイト

バリエーション
を見る

「印象」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top