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が読み込めない環境では、必要な情報が表示されない可能性があります。この問題に対応するには、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