チムコンテーマ作成Einoshima11/11~ 差分
  • 画像カルーセル部の実装

(変数 —extra-div-height は使わなくしました)

#extrac-div-1, #extrac-div-2 {
    --carousel-duration: 12s;
    aspect-ratio: 16 / 9;
    background-size: cover;
    animation: header-carousel var(--carousel-duration) ease-in-out infinite;
    will-change: transform;
}
 
#extrac-div-1 {
    background-image: var(--image-illust-background-00);
}
 
#extrac-div-2 {
    background-image: var(--image-illust-background-01);
    animation-delay: calc(var(--carousel-duration) / -2);
}
 
@keyframes header-carousel {
    0%, 45% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100vw);
    }
    50.01%, 95% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0);
    }
}
  • ランダム表示
[[module ListPages limit="1" offset="1" wrapper="no" separate="no" order="random" category="*"]]
[[#ifexpr %%size%%%2 != 0 | [!-- ]]
[[%%content{0}%%module CSS]]
:root {
    --image-illust-background-00: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-29-83xu/scp-teamcon_atapostle_16_9.jpg");
    --image-illust-background-01: url("https://scp-jp-storage.wdfiles.com/local--files/file:9723402-4-j3oy/%E3%83%81%E3%83%A0%E3%82%B3%E3%83%B32026%E5%BF%9C%E5%8B%9F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88");
}
[[%%content{0}%%/module]]
[[=image https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-29-83xu/scp-teamcon_atapostle_16_9.jpg width="100%"]]
[[#ifexpr %%size%%%2 != 0 | --] ]]
[[#ifexpr %%size%%%2 != 1 | [!-- ]]
[[%%content{0}%%module CSS]]
:root {
    --image-illust-background-00: url("https://scp-jp-storage.wdfiles.com/local--files/file:9723402-4-j3oy/%E3%83%81%E3%83%A0%E3%82%B3%E3%83%B32026%E5%BF%9C%E5%8B%9F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88");
    --image-illust-background-01: url("https://scp-jp-storage.wdfiles.com/local--files/file%3A8993642-29-83xu/scp-teamcon_atapostle_16_9.jpg");
}
[[%%content{0}%%/module]]
[[=image https://scp-jp-storage.wdfiles.com/local--files/file:9723402-4-j3oy/%E3%83%81%E3%83%A0%E3%82%B3%E3%83%B32026%E5%BF%9C%E5%8B%9F%E3%82%A4%E3%83%A9%E3%82%B9%E3%83%88 width="100%"]]
[[#ifexpr %%size%%%2 != 1 | --] ]]
[[/module]]