Animated Collapsible Link

背景アニメーション付きの大型折りたたみリンクです。

基本的な使い方

    • _

    PART1

      • _

      PART2

        • _

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode1を入力
        • image: 背景画像を指定 基本的に正方形で
        • class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる やり方は後述
        • size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
        • strict: これをtrueにしないと、classを使って複数の折りたたみを使い分けるときにバグる trueのままにしておけばいい

        [[include :incbox:animated-col
        |top-text=NEXT
        |bot-icon=f0ab
        |image=url('http://incbox.wikidot.com/local--files/svg-base/origin-1.svg')
        |class=fd-col
        |size=300
        |strict=true
        ]]

        メインコード

        • いつものcomponent:coltop/colendじゃないので注意

        [[include :incbox:animated-coltop |class=fd-col |show=PART 1 |hide=PART 1]]

        PART1

        [[include :incbox:animated-coltop |class=fd-col |show=PART 2 |hide=PART 2]]

        PART2

        [[include :incbox:animated-coltop |class=fd-col |show=PART 3 |hide=PART 3]]

        PART3

        [!--この下にanimated-coltopと同数のanimated-colendを配置--]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]





蒐集院ロゴ(飛散アニメーション付き)

    • _

    PART1 これはreverse=falseの例

      • _

      PART2 これはreverse=trueの例

        • _

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode2を入力
        • dur: 飛散アニメーションにかける時間を入力
        • class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
        • size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
        • reverse: trueで「飛散・透明 → 集合・半透明」に、falseで逆になります

        [[include :incbox:animated-col-ssi
        |top-text=次章
        |bot-icon=f0ab
        |dur=1s
        |class=ssi-col
        |size=300
        |reverse=false
        ]]

        メインコード

        • いつものcomponent:coltop/colendじゃないので注意

        [[include :incbox:animated-coltop |class=ssi-col |show=第壱章 |hide=第壱章]]

        PART1

        [[include :incbox:animated-coltop |class=ssi-col |show=第弐章 |hide=第弐章]]

        PART2

        [[include :incbox:animated-coltop |class=ssi-col |show=第参章 |hide=第参章]]

        PART3

        [!--この下にanimated-coltopと同数のanimated-colendを配置--]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]





蝶イラスト(アニメーション付)

    • _



    PART1



      • _



      PART2



        • _

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode3を入力
        • dur: 飛散アニメーションにかける時間を入力
        • class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
        • size: 単位はpx、単位抜きで数値だけ入力 200~300推奨

        [[include :incbox:animated-col-morpho
        |top-text=NEXT
        |bot-icon=f0ab
        |dur=1s
        |class=mor-col
        |size=300
        ]]

        メインコード

        • いつものcomponent:coltop/colendじゃないので注意

        [[include :incbox:animated-coltop |class=mor-col |show=PART1 |hide=PART1]]

        PART1

        [[include :incbox:animated-coltop |class=mor-col |show=PART2 |hide=PART2]]

        PART2

        [[include :incbox:animated-coltop |class=mor-col |show=PART3 |hide=PART3]]

        PART3

        [!--この下にanimated-coltopと同数のanimated-colendを配置--]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]





GOCアイコン

    • _



    PART1



      • _



      PART2



        • _

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode4を入力
        • dur: 飛散アニメーションにかける時間を入力
        • class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
        • size: 単位はpx、単位抜きで数値だけ入力 200~300推奨

        [[include :incbox:animated-col-goc
        |top-text=NEXT
        |bot-icon=f0ab
        |dur=1s
        |class=goc-col
        |size=300
        ]]

        メインコード

        • いつものcomponent:coltop/colendじゃないので注意

        [[include :incbox:animated-coltop |class=goc-col |show=PART1 |hide=PART1]]

        PART1

        [[include :incbox:animated-coltop |class=goc-col |show=PART2 |hide=PART2]]

        PART2

        [[include :incbox:animated-coltop |class=goc-col |show=PART3 |hide=PART3]]

        PART3

        [!--この下にanimated-coltopと同数のanimated-colendを配置--]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]
        [[include :incbox:animated-colend]]





複数の折りたたみを定義して使い分ける

  • class引数の使い所です。
  • 「top-textの違う2つのanimated-col」や「画像の違う(ry」、更に「財団ロゴ版と蒐集院ロゴ版」などを同居させ、簡単に使い分けることができます。これを行うためにcoltop/colendを独自のものにしています。
    • _

    PART1 - 財団アイコンが300px四方

      • _

      PART2 - 財団アイコンが200px四方

        • _

        PART3 - 違うアイコン

          • _

          PART4 - 蒐集院ロゴ版

            • _

            Include

            以下がこのデモで使用したincludeです

            [!--PART 1--]
            [[include :incbox:animated-col
            |top-text=NEXT
            |bot-icon=f0ab
            |image=url('http://incbox.wikidot.com/local--files/svg-base/origin-1.svg')
            |class=fd-col-300px
            |size=300
            |strict=true
            ]]

            [!--PART 2--]
            [[include :incbox:animated-col
            |top-text=NEXT
            |bot-icon=f0ab
            |image=url('http://incbox.wikidot.com/local--files/svg-base/origin-1.svg')
            |class=fd-col-200px
            |size=200
            |strict=true
            ]]

            [!--PART 3--]
            [[include :incbox:animated-col
            |top-text=NEXT
            |bot-icon=f0ab
            |image=url('http://incbox.wikidot.com/local--files/svg-base/origin-2.svg')
            |class=fd-col-icon2
            |size=200
            |strict=true
            ]]

            [!--PART 4--]
            [[include :incbox:animated-col-ssi
            |top-text=次章
            |bot-icon=f0ab
            |dur=1s
            |class=ssi-col
            |reverse=false
            ]]

            メインコード

            • coltopのclass引数を各includeで指定したものにする

            [[include :incbox:animated-coltop |class=fd-col-300px |show=PART 1 |hide=PART 1]]

            PART1 - 財団アイコンが300px四方

            [[include :incbox:animated-coltop |class=fd-col-200px |show=PART 2 |hide=PART 2]]

            PART2 - 財団アイコンが200px四方

            [[include :incbox:animated-coltop |class=fd-col-icon2 |show=PART 3 |hide=PART 3]]

            PART3 - 異なるアイコン

            [[include :incbox:animated-coltop |class=ssi-col |show=PART 4 |hide=PART 4]]

            PART4 - 蒐集院ロゴ版

            [[include :incbox:animated-coltop |class=ssi-col |show=コード |hide=コード]]

            【このコード】

            [!--この下にanimated-coltopと同数のanimated-colendを配置--]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]





ライセンス

ディスカッション等にライセンスを記述するのを忘れないでください!

共通

  • "Animated Collapsible Link"(CSS Code)

財団ロゴ版

蒐集院ロゴ版

GOCロゴ版

蝶イラスト版






何か要望や作って欲しいものがあれば、ukwhatnukwhatn に何かしらの手段で伝えてください


ページコンソール

批評ステータス

カテゴリ

SCP-JP

本投稿の際にscpタグを付与するJPでのオリジナル作品の下書きが該当します。

GoIF-JP

本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。

Tale-JP

本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。

翻訳

翻訳作品の下書きが該当します。

その他

他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。

コンテンツマーカー

ジョーク

本投稿の際にジョークタグを付与する下書きが該当します。

アダルト

本投稿の際にアダルトタグを付与する下書きが該当します。

既存記事改稿

本投稿済みの下書きが該当します。

イベント

イベント参加予定の下書きが該当します。

フィーチャー

短編

構文を除き数千字以下の短編・掌編の下書きが該当します。

中編

短編にも長編にも満たない中編の下書きが該当します。

長編

構文を除き数万字以上の長編の下書きが該当します。

事前知識不要

特定の事前知識を求めない下書きが該当します。

フォーマットスクリュー

SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。


シリーズ-JP所属

JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。

シリーズ-Other所属

JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。

世界観用語-JP登場

JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。

世界観用語-Other登場

JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。

ジャンル

アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史

任意

任意A任意B任意C

ERROR

The ukwhatn's portal does not exist.


エラー: ukwhatnのportalページが存在しません。利用ガイドを参照し、portalページを作成してください。


利用ガイド

  1. portal:3396310 (05 Aug 2021 16:19)
特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License