running css character
Tulkots no angļu valodas
CREDITS: @kouryde_i
ja nenorādīsi autoru, es tevi pieķeršu
<!-- =========================================================
SKRĒJOŠĀ LAPAS LELLE
PIEZĪME: šim nolūkam tev vajag 4 skrējiena spraitus. tas ir, četrus dažādus tava tēla iešanas attēlus.
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
Visi četri skrējiena kadri tiek ielādēti uzreiz. CSS apstrādā animāciju, pārejot starp tiem ar izbalēšanu.
-->
<img
src="tavas_attēla_saite"
alt=""
class="pagedoll-frame pagedoll-frame-1"
draggable="false"
>
<img
src="tavas_attēla_saite"
alt=""
class="pagedoll-frame pagedoll-frame-2"
draggable="false"
>
<img
src="tavas_attēla_saite"
alt=""
class="pagedoll-frame pagedoll-frame-3"
draggable="false"
>
<img
src="tavas_attēla_saite"
alt=""
class="pagedoll-frame pagedoll-frame-4"
draggable="false"
>
<!-- sakāves spraits -->
<img
src="tavas_attēla_saite"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
GALVENĀ LAPAS LELLE
========================================================= */
.pagedoll-runner {
/* izmērs */
width: 120px;
height: 120px;
/* pozīcija */
position: fixed;
/*
Sākas pilnībā ārpus ekrāna KREISĀS malas.
*/
left: -140px;
bottom: 12px;
/*
ĻOTI augsta kārtošanas secība.
Daži esošie CSS izmanto vērtības kā 3000 un 20000, tāpēc šī ir apzināti daudz augstāka.
*/
: 2147483647 !important;
/*
Izveido savu kārtošanas kontekstu.
*/
isolation: isolate;
/*
Neļauj tai būt ietekmētai no tava profila kastīšu izkārtojuma.
*/
margin: 0 !important;
padding: 0 !important;
/*
Visa lelle pārvietojas pa skatuves laukumu.
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
Pārliecinies, ka tā tiešām var saņemt klikšķus.
*/
pointer-events: auto;
cursor: pointer;
/*
Novērs dīvainu teksta/attēla atlasi.
*/
user-select: none;
-webkit-user-select: none;
/*
Neļauj tai radīt horizontālu ritjoslu.
*/
overflow: visible;
}
/* =========================================================
VISI SPRAITI
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
Tas novērš Janitor parastā attēla stila izstiepšanu/apgriešanu spraitiem.
*/
object-fit: contain !important;
/*
SVARĪGI:
visi spraiti atrodas tieši viens virs otra.
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
Tiem NAV jāpārtver klikšķis.
To saņem vecākelements .pagedoll-runner.
*/
pointer-events: none;
/*
Novērs attēla vilkšanu.
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
SKRĒJIENA SPRAITA KADRI
========================================================= */
/*
Vienlaikus ir redzams tikai VIENS kadrs.
Animācija ilgst 0.64 sekundes:
1 → 2 → 3 → 4 → atkārtot
Tas ir aptuveni 6.25 kadri sekundē.
*/
.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. KADRS */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* 2. KADRS */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* 3. KADRS */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* 4. KADRS */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
KUSTĪBA PA VISU EKRĀNU
========================================================= */
@keyframes pagedoll-cross-screen {
/*
Sāc ārpus kreisās malas.
*/
0% {
left: -140px;
}
/*
Skrien pa visu ekrānu līdz galam.
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
SAKĀVES SPRAITS
========================================================= */
.pagedoll-defeat {
/*
Paslēpts skriešanas laikā.
*/
opacity: 0 !important;
/*
Aktivizējot, novieto to virs skrējiena kadriem.
*/
: 20 !important;
}
/* =========================================================
KLIKŠĶA / PIESKĀRIENA STĀVOKLIS
========================================================= */
/*
Veiklais triks: :focus-within aktivizējas, kad lapas lellei uzklikšķina/pieskaras. Vecākelements pārstāj skriet. Četri skrējiena spraiti pazūd. Parādās sakāves spraits. (kaut kādu iemeslu dēļ tas nestrādā, tāpēc tavs tēls vienkārši skrien pilnā ciklā)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* paslēpt skrējiena spraitus pēc klikšķa */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* parādīt sakāves spraitu */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
NELIELS SAKĀVES EFEKTS
========================================================= */
.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);
}
}
/* =========================================================
DATORIEM
========================================================= */
@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;
}
}
/* =========================================================
MOBILAJĀM IERĪCĒM
========================================================= */
@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;
}
}
/* =========================================================
KUSTĪBAS SAMAZINĀŠANAS PIEVIENOŠANA
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
paciešos, es vēl joprojām domāju, kā salabot sakāves animāciju
Izveidots 19. sept.
Atjaunināts 19. sept.
Publicēts 19. sept.
- Bezgalīgi