Cool Timeline Proで、アニメーション付タイムラインを作成
前回は、Cool Timeline Proで、コンパクトなタイムラインを作成しました。今回は、アニメーション付タイムラインの紹介をします。
出典 : Cool Timeline
今回のDEMOは、3種のアニメーションタイムラインを作成しました。
1つ目はフェード、2つ目はフリップ、3つ目はスライドです。共に、アニメーションに合うデザインを使用しています。ストーリーは、前回と同じものを使用しています。
SPでの表示
SPでは、アニメーションが発動しません。PCのみのアニメーションとなります。タブレットは、ブラウザによっては、発動します。
フェード
ストーリーが下からフェードインしてくるアニメーションです。
General
SELECT LAYOUTを縦、SELECT DESIGNSをClassic Design、SELECT SKINをDarkに設定しています。
| 項目 | 設定値 |
|---|---|
| SELECT LAYOUT | 縦 |
| SELECT DESIGNS | Classic Design |
| SELECT SKIN | Dark |
| TIMELINE BASED ON | Default |
| STORIES DESCRIPTION? | Full |
| STORIES PER PAGE | 10 |
Advanced
DISPLAY ICONS(BY DEFAULT IS DOT)をNone、ANIMATIONをfade-upに設定しています。
| 項目 | 設定値 |
|---|---|
| STORIES ORDER? | ASC |
| STORIES DATE? | Hide |
| DATE FORMATS | Y-m-d |
| DISPLAY ICONS(BY DEFAULT IS DOT) | None |
| PAGINATION SETTINGS | Default |
| SHOW CATEGORY FILTERS | No |
| YEAR NAVIGATION SETTING | Hide |
| LINE FILLING SETTINGS? | False |
| DISPLAY LEAD MORE? | Hide |
| ANIMATION | fade-up |
フリップ
ストーリーがくるっと回転するアニメーションです。
General
SELECT LAYOUTを縦、SELECT DESIGNSをElegant Design、SELECT SKINをLightに設定しています。
| 項目 | 設定値 |
|---|---|
| SELECT LAYOUT | 縦 |
| SELECT DESIGNS | Elegant Design |
| SELECT SKIN | Light |
| TIMELINE BASED ON | Default |
| STORIES DESCRIPTION? | Full |
| STORIES PER PAGE | 10 |
Advanced
DISPLAY ICONS(BY DEFAULT IS DOT)をNone、ANIMATIONをFlip-downに設定しています。
| 項目 | 設定値 |
|---|---|
| STORIES ORDER? | ASC |
| STORIES DATE? | Hide |
| DATE FORMATS | Y-m-d |
| DISPLAY ICONS(BY DEFAULT IS DOT) | Dot |
| PAGINATION SETTINGS | Default |
| SHOW CATEGORY FILTERS | No |
| YEAR NAVIGATION SETTING | Hide |
| LINE FILLING SETTINGS? | False |
| DISPLAY LEAD MORE? | Hide |
| ANIMATION | Flip- down |
スライド
ストーリーが、上から下へスライドするアニメーションです。このアニメーションは、ABOUTのタイムラインでも使用しています。
General
SELECT LAYOUTをOne Side Layout、Modern DesignをElegant Design、SELECT SKINをLightに設定しています。
| 項目 | 設定値 |
|---|---|
| SELECT LAYOUT | One Side Layout |
| SELECT DESIGNS | Modern Design |
| SELECT SKIN | Light |
| TIMELINE BASED ON | Default |
| STORIES DESCRIPTION? | Full |
| STORIES PER PAGE | 10 |
Advanced
DISPLAY ICONS(BY DEFAULT IS DOT)をNone、ANIMATIONをSlide-downに設定しています。
| 項目 | 設定値 |
|---|---|
| STORIES ORDER? | ASC |
| STORIES DATE? | Hide |
| DATE FORMATS | Y-m-d |
| DISPLAY ICONS(BY DEFAULT IS DOT) | None |
| PAGINATION SETTINGS | Default |
| SHOW CATEGORY FILTERS | No |
| YEAR NAVIGATION SETTING | Hide |
| LINE FILLING SETTINGS? | False |
| DISPLAY LEAD MORE? | Hide |
| ANIMATION | Slide-down |
以上で今回の説明は終了です。Pro版では、多くのアニメーションが使用できるので、デザインに合わせて変更できますね。
