.%{STYLEGUIDE_PAGE}-fade-out-strong |
|
.%{STYLEGUIDE_PAGE}-fade-out |
|
.%{STYLEGUIDE_PAGE}-fade-out-light |
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out-strong">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out-light">...</span>
.%{STYLEGUIDE_PAGE}-fade-in-strong |
|
.%{STYLEGUIDE_PAGE}-fade-in |
|
.%{STYLEGUIDE_PAGE}-fade-in-light |
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in-strong">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in">...</span>
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in-light">...</span>
通知があります |
.%{STYLEGUIDE_PAGE}-popup-top |
通知があります |
.%{STYLEGUIDE_PAGE}-popup-right |
通知があります |
.%{STYLEGUIDE_PAGE}-popup-bottom |
通知があります |
.%{STYLEGUIDE_PAGE}-popup-left |
<div class="%{STYLEGUIDE_PAGE}-popup-top">...</div>
<div class="%{STYLEGUIDE_PAGE}-popup-right">...</div>
<div class="%{STYLEGUIDE_PAGE}-popup-bottom">...</div>
<div class="%{STYLEGUIDE_PAGE}-popup-left">...</div>
| 通知があります | .%{STYLEGUIDE_PAGE}-popup-top-child |
| 通知があります | .%{STYLEGUIDE_PAGE}-popup-right-child |
| 通知があります | .%{STYLEGUIDE_PAGE}-popup-bottom-child |
| 通知があります | .%{STYLEGUIDE_PAGE}-popup-left-child |
<div class="%{STYLEGUIDE_PAGE}-popup-top-child">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
</div>
<div class="%{STYLEGUIDE_PAGE}-popup-right-child">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
</div>
<div class="%{STYLEGUIDE_PAGE}-popup-bottom-child">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
</div>
<div class="%{STYLEGUIDE_PAGE}-popup-left-child">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
</div>
| 拡大(デフォルト→拡大) |
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-in">...</span>
| 縮小(デフォルト→縮小) |
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-out">...</span>
アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。
| 拡大 | |
|---|---|
<div class="active">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-in-show">...</span>
</div>
| 縮小 | |
|---|---|
<div class="active">
<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-out-show">...</span>
</div>
アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。
| 上からのスライド | |
|---|---|
<div class="active">
<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-top">...</div>
</div>
| 下からのスライド | |
|---|---|
<div class="active">
<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-bottom">...</div>
</div>
| 左からのスライド | |
|---|---|
<div class="active">
<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-left">...</div>
</div>
| 右からのスライド | |
|---|---|
<div class="active">
<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-right">...</div>
</div>
サンプルを表示するにはサンプルボタンをクリックしてください。
| 左から | |
|---|---|
|
|
|
| 右から | |
|---|---|
|
|
|
<ul class="%{STYLEGUIDE_PAGE}-list-inline active">
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay">...</li>
</ul>
<ul class="%{STYLEGUIDE_PAGE}-list-inline active">
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-reverse">...</li>
</ul>
| ランダム | |
|---|---|
|
|
|
<ul class="%{STYLEGUIDE_PAGE}-list-inline active">
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-third">...</li>
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-first">...</li>
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-fourth">...</li>
<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-second">...</li>
</ul>
上記のアニメーションをするスタイルを使ったとき、Javascriptが読み込めない環境では、必要な情報が表示されない可能性があります。この問題に対応するには、htmlタグに.no-jsを記述して、modernizr.jsを読み込んでください。Javascriptが読み込まれる環境ではmodernizr.jsが動作し、.no-jsを削除するので、Javascriptが使用できる環境とそうではない環境を分別することができます。
具体的には、以下のように記述してください。
<!DOCTYPE html> <html class="no-js" lang="ja"> ... <script src="/js/ファイルのパス/modernizr.js"></script>
a-blog cmsでは、管理画面で使用しているオフキャンバスで使用しているため、デフォルトでmodernizr.jsを同梱しています。以下のように記述しても正常に動作します。
<!DOCTYPE html> <html class="no-js" lang="ja"> ... <script src="/js/off-canvas/modernizr.js"></script>
.no-jsに対応しているアニメーションのクラス以下のクラス名の親要素に.no-jsがあるとき、opacityを1にし、transformで位置や大きさを変えているものはデフォルトに戻します。
.%{STYLEGUIDE_PAGE}-slide-top.%{STYLEGUIDE_PAGE}-slide-left.%{STYLEGUIDE_PAGE}-slide-bottom.%{STYLEGUIDE_PAGE}-slide-right.%{STYLEGUIDE_PAGE}-zoom-in-show.%{STYLEGUIDE_PAGE}-zoom-out-show