Шаблоны, примеры и всякие фичи

Добавить в блок «Обо мне» в своем профиле:

[div=mychar][div=speech]
[div]Первая фраза, которую персонаж будет говорить.[/div]
[div]Вторая фраза, которую персонаж будет говорить.[/div]
[div]Третья фраза, которую персонаж будет говорить.[/div]
[/div][/div]

Добавить в стили следующий код:

Показать

/* Персонаж в углу */
.mychar {
    position: fixed;
    z-index: 10;
    pointer-events: none;
    left: 0;
    right: 0;  /* положение блока с персонажем: отступ справа */
    bottom: 0; /* положение блока с персонажем: отступ снизу */
    transform-origin: bottom right;
    font-size: 1em; /* размер облачка меняется в зависимости от размера шрифта */
}
.mychar::after {
    content: "";
    display: block;
    pointer-events: auto;
    float: right;
    width: 300px;  /* ширина блока с персонажем */
    height: 300px; /* высота блока с персонажем */
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
    background-image: url("https://i.imgur.com/MMvqMFq.png"); /* картинка с вашим персонажем */
}
@media screen and (max-width: 599px) {
    .mychar {
        left: -53.8462%;
        transform: scale(0.65);
    }
    .mychar .speech {
        transform: scale(1.5385);
        font-size: 0.85em;
    }
}
@media screen and (min-width: 600px) and (max-width: 1024px),
screen and (max-width: 599px) and (min-height: 720px)
{
    .mychar {
        left: -33.3333%;
        transform: scale(0.75);
    }
    .mychar .speech {
        transform: scale(1.3333);
        font-size: 0.85em;
    }
}
 
/* Персонаж в углу: облачко */
.mychar .speech {
    position: absolute;
    pointer-events: auto;
    min-width: 2.01em;
    min-height: 2.01em;
    max-width: 10em;
    padding: 0.38em 0.56em;
    border-radius: 0.47em;
    right: 340px;  /* положение облачка: отступ справа */
    bottom: 160px; /* положение облачка: отступ снизу */
    transform-origin: bottom right;
    line-height: 1.25em;
    text-align: center;
    color: #FFF;                    /* цвет текста в облачке */
    background: rgba(30,30,30,0.7); /* цвет и прозрачность фона облачка */
}
.mychar .speech::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    bottom: 0.75em;
    width: 0;
    height: 0;
    margin: -0.62em -1.24em 0 0;
    border: 1.24em solid transparent;
    border-right: 0;
    border-bottom: 0;
    border-left-color: rgba(30,30,30,0.7); /* цвет и прозрачность фона облачка */
}
 
/* Персонаж в углу: анимированное облачко */
.mychar .speech {
    animation-name: mychar-speech-in, mychar-speech-out;
    animation-fill-mode: both, forwards;
    animation-iteration-count: 1;
    animation-duration: 0.8s, 0.4s; /* длительность появления, исчезновения облачка */
    animation-delay: 1.5s, 11.6s;   /* задержка появления, исчезновения облачка */
    /* Отсчет задержек начинается не после выезжания блока, а сразу после открытия страницы. */
    /* Длительность отображения облачка (вместе с анимациями появления/исчезновения): */
    /* (задержкаИсчезновения - задержкаПоявления + длительностьИсчезновения) */
    /* 11.6 - 1.5 + 0.4 = 10.5 секунд. */
}
@keyframes mychar-speech-in {
    from {
        margin-right: -28px;
        opacity: 0;
    }
    to {
        margin-right: 0;
        opacity: 1;
    }
}
@keyframes mychar-speech-out {
    from {
        margin-right: 0;
        opacity: 1;
    }
    to {
        margin-right: -28px;
        opacity: 0;
    }
}
 
/* Персонаж в углу: анимированное облачко - сменяющиеся фразы */
.mychar .speech div {
    position: absolute;
    visibility: hidden;
    animation-name: mychar-phrase;
    animation-timing-function: step-end;
    animation-iteration-count: 1;
    animation-duration: 3.5s; /* длительность показа фразы */
}
@keyframes mychar-phrase {
    from {
        position: static;
        visibility: visible;
    }
}
.mychar .speech div:nth-of-type(1) { /* Первая фраза */
    animation-delay: 1.5s;  /* начальная задержка = задержка появления облачка */
}
.mychar .speech div:nth-of-type(2) { /* Вторая фраза */
    animation-delay: 5.0s;  /* арифметическая прогрессия: прибавляем длительность фразы */
}
.mychar .speech div:nth-of-type(3) { /* Третья фраза */
    animation-delay: 8.5s;  /* и снова */
}
/* Вы можете добавить больше фраз, только не забудьте */
/* увеличить продолжительность отображения облачка (если анимированное) */
/* и задержку перед заезжанием (если выезжание/заезжание используется). */
 
/* Персонаж в углу: выезжание, заезжание */
.mychar {
    animation-name: mychar-pop-in, mychar-pop-out;
    animation-fill-mode: both, forwards;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out, ease-in-out;
    animation-delay: 0s, 12.5s;   /* задержка перед выезжанием, перед заезжанием */
    animation-duration: 1s, 1s; /* длительность выезжания, заезжания */
}
@keyframes mychar-pop-in {
    from {
        bottom: -300px; /* (положение блока с персонажем: отступ снизу + высота блока) со знаком минус */
        visibility: hidden;
    }
    to {
        bottom: 0;      /* положение блока с персонажем: отступ снизу */
    }
}
@keyframes mychar-pop-out {
    to {
        /* Можно убрать заезжание, если удалить две следующие строчки */
        bottom: -300px; /* то же самое, что и несколькими строками выше */
        visibility: hidden;
    }
}