最低限おぼえておきたい動き
-パタッ(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;
}
}
この技術を使ったサンプルサイト
バリエーション
を見る
「印象」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!