бегущий CSS-персонаж
Переведено с английского
by:@yoguyu_
АВТОРСТВО : @kouryde_i
если ты не укажешь автора, я до тебя доберусь
<!-- =========================================================
БЕГУЩАЯ КУКЛА НА СТРАНИЦЕ
ПРИМЕЧАНИЕ: для этого нужно 4 спрайта бега. то есть четыре разных изображения твоего персонажа во время ходьбы.
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
Все четыре кадра бега загружаются одновременно. CSS управляет анимацией, переключая их с помощью прозрачности.
-->
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-1"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-2"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-3"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-4"
draggable="false"
>
<!-- спрайт поражения -->
<img
src="your_image_link"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
ГЛАВНАЯ КУКЛА СТРАНИЦЫ
========================================================= */
.pagedoll-runner {
/* размер */
width: 120px;
height: 120px;
/* позиция */
position: fixed;
/*
Начинает полностью за пределами ЛЕВОЙ стороны экрана.
*/
left: -140px;
bottom: 12px;
/*
ОЧЕНЬ высокий порядок наложения.
В некоторых существующих CSS используются значения вроде 3000 и 20000, поэтому это намеренно намного выше.
*/
: 2147483647 !important;
/*
Создаёт собственный контекст наложения.
*/
isolation: isolate;
/*
Не позволяй ему зависеть от расположения блоков твоего профиля.
*/
margin: 0 !important;
padding: 0 !important;
/*
Вся кукла движется по области просмотра.
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
Убедись, что она действительно может принимать клики.
*/
pointer-events: auto;
cursor: pointer;
/*
Предотвращает странное выделение текста/изображений.
*/
user-select: none;
-webkit-user-select: none;
/*
Не позволяй ей создавать горизонтальную полосу прокрутки.
*/
overflow: visible;
}
/* =========================================================
ВСЕ СПРАЙТЫ
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
Это предотвращает растягивание/обрезку спрайтов стандартным оформлением изображений Janitor.
*/
object-fit: contain !important;
/*
ВАЖНО:
все спрайты располагаются прямо друг на друге.
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
Они НЕ должны перехватывать клик.
Его получает родительский .pagedoll-runner.
*/
pointer-events: none;
/*
Предотвращает перетаскивание изображения.
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
КАДРЫ СПРАЙТА БЕГА
========================================================= */
/*
Одновременно виден только ОДИН кадр.
Анимация длится 0.64 секунды:
1 → 2 → 3 → 4 → повтор
Это примерно 6.25 кадров в секунду.
*/
.pagedoll-frame-1 {
opacity: 1;
animation:
pagedoll-frame-1
0.64s
steps(1)
infinite;
}
.pagedoll-frame-2 {
opacity: 0;
animation:
pagedoll-frame-2
0.64s
steps(1)
infinite;
}
.pagedoll-frame-3 {
opacity: 0;
animation:
pagedoll-frame-3
0.64s
steps(1)
infinite;
}
.pagedoll-frame-4 {
opacity: 0;
animation:
pagedoll-frame-4
0.64s
steps(1)
infinite;
}
/* КАДР 1 */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* КАДР 2 */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* КАДР 3 */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* КАДР 4 */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
ДВИЖЕНИЕ ПО ВСЕМУ ЭКРАНУ
========================================================= */
@keyframes pagedoll-cross-screen {
/*
Начинает за пределами левого края.
*/
0% {
left: -140px;
}
/*
Бежит через весь экран.
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
СПРАЙТ ПОРАЖЕНИЯ
========================================================= */
.pagedoll-defeat {
/*
Скрыт во время бега.
*/
opacity: 0 !important;
/*
Поместить его над кадрами бега при активации.
*/
: 20 !important;
}
/* =========================================================
СОСТОЯНИЕ КЛИКА / НАЖАТИЯ
=========================================================
/*
Ловкий трюк: :focus-within активируется, когда по кукле на странице нажимают/кликают. Родитель перестаёт бежать. Четыре спрайта бега исчезают. Появляется спрайт поражения. (по какой-то причине это не работает, так что твой персонаж просто бежит по всему кругу)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* скрыть спрайты бега после клика */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* показать спрайт поражения */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
МАЛЕНЬКИЙ ЭФФЕКТ ПОРАЖЕНИЯ
========================================================= */
.pagedoll-runner:focus-within {
animation:
pagedoll-defeat-stop
0.35s
ease-out
forwards;
}
@keyframes pagedoll-defeat-stop {
0% {
transform:
scale(1)
rotate(0deg);
}
35% {
transform:
scale(1.12)
rotate(-8deg);
}
65% {
transform:
scale(0.95)
rotate(6deg);
}
100% {
transform:
scale(1)
rotate(0deg);
}
}
/* =========================================================
ДЕСКТОП
========================================================= */
@media screen and (min-width: 769px) {
.pagedoll-runner {
width: 140px;
height: 140px;
bottom: 15px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 140px !important;
height: 140px !important;
}
}
/* =========================================================
МОБИЛЬНЫЕ
========================================================= */
@media screen and (max-width: 768px) {
.pagedoll-runner {
width: 90px;
height: 90px;
bottom: 8px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 90px !important;
height: 90px !important;
}
}
/* =========================================================
ДОСТУПНОСТЬ: УМЕНЬШЕНИЕ ДВИЖЕНИЯ
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
потерпи меня, я всё ещё разбираюсь, как починить анимацию поражения
Создано 19 сент.
Обновлено 19 сент.
Опубликован 19 сент.
- Безлимитный