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 に何かしらの手段で伝えてください

ERROR

The ukwhatn's portal does not exist.


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


利用ガイド

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