アニメーション

フェードアウト

acms-fade-out-strong
acms-fade-out
acms-fade-out-light
<span class="acms-icon-bg ... acms-fade-out-strong">...</span>
<span class="acms-icon-bg ... acms-fade-out">...</span>
<span class="acms-icon-bg ... acms-fade-out-light">...</span>

フェードイン

acms-fade-in-strong
acms-fade-in
acms-fade-in-light
<span class="acms-icon-bg ... acms-fade-in-strong">...</span>
<span class="acms-icon-bg ... acms-fade-in">...</span>
<span class="acms-icon-bg ... acms-fade-in-light">...</span>

ポップアップ

通知があります
acms-popup-top
通知があります
acms-popup-right
通知があります
acms-popup-bottom
通知があります
acms-popup-left
<div class="acms-popup-top">...</div>
<div class="acms-popup-right">...</div>
<div class="acms-popup-bottom">...</div>
<div class="acms-popup-left">...</div>
通知があります acms-popup-top-child
通知があります acms-popup-right-child
通知があります acms-popup-bottom-child
通知があります acms-popup-left-child
<div class="acms-popup-top-child">
	<span class="acms-icon-bg ... acms-popup-child"></span>
</div>
<div class="acms-popup-right-child">
	<span class="acms-icon-bg ... acms-popup-child"></span>
</div>
<div class="acms-popup-bottom-child">
	<span class="acms-icon-bg ... acms-popup-child"></span>
</div>
<div class="acms-popup-left-child">
	<span class="acms-icon-bg ... acms-popup-child"></span>
</div>

ズーム

拡大(デフォルト→拡大)
<span class="acms-icon-bg ... acms-zoom-in">...</span>
縮小(デフォルト→縮小)
<span class="acms-icon-bg ... acms-zoom-out">...</span>

ズームして表示

アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

拡大
<div class="active">
	<span class="acms-icon-bg ... acms-zoom-in-show">...</span>
</div>
縮小
<div class="active">
	<span class="acms-icon-bg ... acms-zoom-out-show">...</span>
</div>

スライド

アニメーションを開始するためにactiveクラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

上からのスライド
上からスライドします
<div class="active">
	<div class="acms-panel acms-slide-top">...</div>
</div>
下からのスライド
下からスライドします
<div class="active">
	<div class="acms-panel acms-slide-bottom">...</div>
</div>
左からのスライド
左からスライドします
<div class="active">
	<div class="acms-panel acms-slide-left">...</div>
</div>
右からのスライド
右からスライドします
<div class="active">
	<div class="acms-panel acms-slide-right">...</div>
</div>

遅延

サンプルを表示するにはサンプルボタンをクリックしてください。

左から
右から
<ul class="acms-list-inline active">
	<li class="acms-zoom-in-show acms-delay">...</li>
</ul>

<ul class="acms-list-inline active">
	<li class="acms-zoom-in-show acms-delay-reverse">...</li>
</ul>
ランダム
<ul class="acms-list-inline active">
	<li class="acms-zoom-in-show acms-delay-third">...</li>
	<li class="acms-zoom-in-show acms-delay-first">...</li>
	<li class="acms-zoom-in-show acms-delay-fourth">...</li>
	<li class="acms-zoom-in-show acms-delay-second">...</li>
</ul>

Javascriptが読み込めない環境のとき

上記のアニメーションをするスタイルを使ったとき、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で位置や大きさを変えているものはデフォルトに戻します。

  • .acms-slide-top
  • .acms-slide-left
  • .acms-slide-bottom
  • .acms-slide-right
  • .acms-zoom-in-show
  • .acms-zoom-out-show