Комментарий от animeshnik

Комментарий #9805806
animeshnik_ALT

в профиле пользователя animeshnik_ALT19 июля 2023

вариант 2

Сдалано немного халтурно, особенно персонажи. Возможно будут улучшения.
Этот вариант больше подойдет для юзеров e-design, ведь для картиночек я использовал слайдер отсюда >10<
С цветами я не парился, зато запарился с анимациями.
Класс favorite пока ничего не даёт. Можно спокойно delete.

Если добавляете новый блок, заранее прикиньте его высоту, и укажите её >

@media screen and (min-width: 1600px) {
  .novell:hover .under-images {
    max-height: calc(220px + 100px + высота-нового-блока);
    transition: max-height 1s linear;
  }
}
@media screen and (max-width: 1599px) {
  .novell:hover .under-images {
    max-height: calc(220px + 100px + 40px + высота-нового-блока);
    transition: max-height 1s linear;
  }
}

css

.novell-name {
  color: rgba(var(--light-color), 1);
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  width: 100%;
  height: 25px;
  text-align: center;
}  
.novell {
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  width: 100%;
  position: relative;
}
.novell > .b-image {
  position: absolute;
  right: 0;
  left:0;
  top:0;
  bottom:0;
  z-index:3;
  border-radius: 0;
}
.novell > .b-image img {
  max-width: 100% !important;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.novell > .b-image .marker, .novell > br {
  display: none;
}
.novell:hover > .b-image {
  pointer-events: none;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s linear, transform 1s linear;
}
.novell:not(:hover) > .b-image {
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s linear, transform 1s linear;
}
.novell .novell-images {
  overflow-y: auto;
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  text-align: center;
}
.novell .under-images {
  max-height: 0;
  transition: max-height 1s linear;
  overflow-y: hidden;
}
@media screen and (min-width: 1600px) {
  .novell:hover .under-images {
    max-height: calc(220px + 100px);
    transition: max-height 1s linear;
  }
}
@media screen and (max-width: 1599px) {
  .novell:hover .under-images {
    max-height: calc(220px + 100px + 40px);
    transition: max-height 1s linear;
  }
}
.novell-characters {
  overflow-y: auto;
  max-height: 220px;
  overflow-x: visible;
}
.novell-character {
  display: inline-block;
  margin: 0 1% 1% 0;
}
.novell-character img {
  max-height: 200px;
}
.novell .novell-text {
  color: rgba(var(--light-color), 1);
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  overflow-y: auto;
  text-align: center;
  width: 100%;
  max-height: 100px;
}
@media screen and (min-width: 1600px) {
  .novell .novell-evaluation {
    position: absolute;
    bottom: 50px;
    right: 0;
  }
  .novell .novell-date {
    position: absolute;
    bottom: 10px;
    right: 0;
  }
  .novell:hover .novell-evaluation, .novell:hover .novell-date {
    z-index: 4;
    transform: translateX(100%);
    transition: z-index 1s linear, transform 1s linear;
  }
  .novell:not(:hover) .novell-evaluation, .novell:not(:hover) .novell-date {
    pointer-events: none;
    z-index: 1;
    transform: translateX(0);
    transition: z-index 1s linear, transform 1s linear;
  }
}
@media screen and (max-width: 1599px) {
  .novell-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.novell .novell-evaluation .novell-rating, .novell .novell-date .novell-date-text {
  color: rgba(var(--light-color), 1);
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  display: inline-block;
  padding: 3px;
}
.novell .novell-evaluation .novell-mark {
  color: rgba(var(--light-color), 1);
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  padding: 3px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.novell .novell-date .novell-time {
  color: rgba(var(--light-color), 1);
  background: rgb(var(--menu-back, #fff));
  border: 1px solid rgb(var(--light-color, #000));
  padding: 3px;
  display: inline-block;
}
.novell .novell-characters-text {
  color: rgba(var(--light-color), 1);
  margin-bottom: 5px;
  text-align: center;
}
/*Слайдер >10<*/
.novell .id-0 img.b-poster, .id-0 .b-image.b-poster img {
  width: unset; /*Картинка влезает по высоте*/
}
.novell .id-0_control-block::after {
  display: none; /*удаляю череп*/
}

bb code

Постер сразу под novell будет обложкой.
Всё что под блоком under-images будет под изображениями логично. А также этот блок имеет анимацию открытия.

[div=cc-2]
[div=c-column]
[div=novell-name][b]Katawa shoujo[/b][/div]
[div=novell]
[poster]https://avatars.mds.yandex.net/i?id=049b50354c579f7b6253a26313dc6ab59c9c7150-4577377-images-thumbs&n=13[/poster]
[div=novell-images]
[div=id-0 to-process data-dynamic=tabs]
[div=id-0__slide data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=694481cc7934429997d0605742fd60a3_l-4782879-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2294338]
     [/div][div=id-0__slide hidden data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=a7eff31466b17a55450da85a0ce05dfc_l-10310583-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2109759]
     [/div][div=id-0__slide hidden data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=b2d858143ab91d325f3c0ef67715c303_l-4518681-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=2a00000179eb642ba0a55e2b08eef2bde32a-4478670-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=372df5cf8c2d8df5f84d770cadb54e74_l-4599171-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster]https://avatars.mds.yandex.net/i?id=e6d27c2a7d6d477f11fde0438f00475c505d2622-7094423-images-thumbs&n=13[/poster]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2294349]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2294350]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2294351]
     [/div][div=id-0__slide hidden data-tab]
           [poster=2295188]
     [/div][div=id-0_control-block]

[/div][div=id-0__buttons-2]
[div=id-0__button active data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[div=id-0__button data-tab-switch] [/div]
[/div][/div][/div]
[div=under-images]
[div=novell-characters katawa]
[div=novell-characters-text]Персонажи:[/div]
[div=cc-4]
[div=c-column novell-character favorite emi]
[img]ссылка[/img]
[/div]
[div=c-column novell-character favorite hanako]
[img]ссылка[/img]
[/div]
[div=c-column novell-character favorite lilly]
[img]ссылка[/img]
[/div]
[div=c-column novell-character rin]
[img]ссылка[/img]
[/div]
[div=c-column novell-character shizune]
[img]ссылка[/img]
[/div]
[div=c-column novell-character hisao]
[img]ссылка[/img]
[/div]
[div=c-column novell-character kenji]
[img]ссылка[/img]
[/div]
[div=c-column novell-character misha]
[img]ссылка[/img]
[/div]
[/div][/div]
[div=novell-info]
[div=novell-evaluation]
[div=novell-rating]Оценка:[/div]
[div=novell-mark]9/10[/div][/div]
[div=novell-date]
[div=novell-date-text]Дата:[/div]
[div=novell-time]04.06.22-15.08.22[/div]
[/div][/div]
[div=novell-text]
ТЕКСТ
[/div][/div][/div][/div]
[div=c-column] [/div]
[/div]

как добавить прыгающих doki-doki

css

/*Анимация doki-doki*/
.novell .doki-doki .novell-character.sayori {
  animation-delay: 1s;
}
.novell .doki-doki .novell-character.yuri {
  animation-delay: 2s;
}
.novell .doki-doki .novell-character.monika {
  animation-delay: 3s;
}
.novell .doki-doki .novell-character.natsuki {
  animation-delay: 4s;
}
.novell .doki-doki .novell-character {
  animation: doki-doki 1.27s infinite ease-in-out;
}
@keyframes doki-doki {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-60px);
  }
  20% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

bb code

[div=novell-characters doki-doki]
[div=novell-characters-text]Персонажи:[/div]
[div=cc-4]
[div=c-column novell-character sayori]
[img]https://ddlc.moe/images/sticker_s.png[/img]
[/div]
[div=c-column novell-character yuri]
[img]https://ddlc.moe/images/sticker_y.png[/img]
[/div]
[div=c-column novell-character monika]
[img]https://ddlc.moe/images/sticker_m.png[/img]
[/div]
[div=c-column novell-character natsuki]
[img]https://ddlc.moe/images/sticker_n.png[/img]
[/div]
[/div][/div]

Ответы

Нет комментариев

Твой комментарий

Комментарий #9805806 animeshnik_ALT

Комментарий #9805806
animeshnik_ALT