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版では、多くのアニメーションが使用できるので、デザインに合わせて変更できますね。