Dünaamiliste veebikogemuste avamine: põhjalik juhend CSS Scroll Timeline'i kohta

Pidevalt arenevas veebiarenduse maastikul on kaasahaaravate ja interaktiivsete kogemuste loomise oskus esmatähtis. Üks võimas tööriist, mis on revolutsioneerinud meie lähenemist veebianimatsioonile, on CSS Scroll Timeline. See juhend pakub põhjalikku ülevaadet CSS Scroll Timeline'ist, andes arendajatele üle maailma võimaluse luua paeluvaid kerimispõhiseid animatsioone ja interaktiivseid elemente.

Kerimispõhiste animatsioonide võimsuse mõistmine

Kerimispõhised animatsioonid on animatsioonid, mis käivituvad või mida juhitakse kasutaja kerimiskäitumise abil. Selle asemel, et animatsioonid mängiksid automaatselt või käivituksid muude sündmuste toimel, reageerivad kerimispõhised animatsioonid otse sellele, kui kaugele kasutaja on veebilehel alla kerinud. See loob kaasahaaravama ja intuitiivsema kasutajakogemuse, kuna elemendid ärkavad ellu kasutaja sisuga suhtlemisel. See on eriti tõhus lugude jutustamisel, olulise teabe esiletõstmisel ja visuaalse elegantsi lisamisel veebisaitidele, rakendustele ja digitaalsetele toodetele, mida vaadatakse üle maailma.

Traditsioonilised animatsioonimeetodid, mis sageli tuginevad JavaScripti teekidele või keerukatele võtmekaadri animatsioonidele, võivad muutuda kohmakaks ja raskesti hooldatavaks. CSS Scroll Timeline lihtsustab seda protsessi, pakkudes deklaratiivset lähenemist, mis võimaldab arendajatel määratleda animatsioone, mis reageerivad otse kerimisasendile. See viib puhtama koodi, parema jõudluse ja juurdepääsetavama arendustöövooni.

Mis on CSS Scroll Timeline?

CSS Scroll Timeline on kaasaegne CSS-i funktsioon, mis võimaldab arendajatel sünkroonida animatsioone kerimiskonteineri kerimisasendiga. See võimaldab luua keerukaid kerimispõhiseid efekte, ilma et peaks tugevalt tuginema JavaScriptile. Põhikontseptsioon keerleb selle ümber, kuidas määratleda animatsiooni edenemine vastavalt kasutaja kerimisasendile konkreetses keritavas elemendis. Peamised eelised on järgmised:

• Deklaratiivne kontroll: Määratlege animatsioonid otse oma CSS-is, lihtsustades arendust.
• Parem jõudlus: Kasutab brauseri natiivseid võimalusi, mille tulemuseks on sageli sujuvamad animatsioonid.
• Parem juurdepääsetavus: Lihtsam hallata ja integreerida juurdepääsetavuse parimate tavadega.
• Lihtsustatud töövoog: Vähendab vajadust keeruka JavaScripti koodi järele.

Scroll Timeline lihtsustab selliste efektide loomist nagu:

• Parallakskerimine
• Sisu avaldamine kerimisel
• Progressiivsed animatsioonid
• Interaktiivsed andmete visualiseerimised

Põhimõisted ja atribuudid

Süveneme CSS Scroll Timeline'i olulistesse komponentidesse. Nende elementide mõistmine on kerimispõhiste animatsioonide tõhusaks rakendamiseks ülioluline.

1. Atribuut `scroll-timeline`

See atribuut on kerimisajajoone seadistamisel keskne. Seda rakendatakse animatsiooni sihtelemendile. Atribuut `scroll-timeline` määratleb ajajoone, millega animatsioon on seotud. Kerimisajajoone määramiseks on mitu viisi:

• `scroll-timeline-name`: Loob nimega kerimisajajoone. Sellele nimele viitab animeeritav element.
• `scroll-timeline-axis`: Määratleb, kas animatsioon jälgib vertikaalset või horisontaalset kerimist. Vaikimisi väärtus on `block` (vertikaalne). Horisontaalseks kerimiseks kasutatakse väärtust `inline`.

Näide:

            
.animated-element {
  animation-timeline: myTimeline;
}

@scroll-timeline myTimeline {
  source: inline my-scroll-container;
}

.my-scroll-container {
    overflow-x: scroll;
    width: 500px;
    height: 200px;
    white-space: nowrap;
    /* Other container styles */
}

            

              
                Copy
              
            
          

2. Atribuut `animation-timeline`

Seda atribuuti rakendatakse elemendile, mida soovite animeerida. See ühendab animatsiooni nimega kerimisajajoonega. Atribuut `animation-timeline` seob animatsiooni kerimisajajoonega, sidudes animatsiooni edenemise tõhusalt kerimisasendiga. See atribuut võimaldab animatsiooni integreerida kerimiskonteineriga.

Näide:

            
.animated-element {
  animation-name: slideIn;
  animation-duration: 2s;
  animation-timeline: myTimeline; /* Connects animation to the named scroll timeline */
}

            

              
                Copy
              
            
          

3. Atribuut `animation-range`

See atribuut kontrollib animatsiooni algus- ja lõpp-punkte suhtes kerimisajajoonega. See võimaldab teil määrata täpse punkti, kus animatsioon algab ja lõpeb vastavalt kerimisasendile. See võib võtta erinevaid väärtusi, sealhulgas protsente, nimega vahemikke ja muud.

Näide:

            
.animated-element {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timeline: myTimeline;
  animation-range: entry 25%;  /* Start animation when element enters the viewport at 25% */
}

            

              
                Copy
              
            
          

4. Atribuut `source` (at-reegli `@scroll-timeline` sees)

Allikas määrab ajajoone kasutatava kerimiskonteineri. Kui kasutaja kerib kerimiskonteineri sees, uuendatakse kerimisajajoont. See atribuut, mida kasutatakse `@scroll-timeline` reegli sees, määrab kerimiskonteineri, millega ajajoon on seotud. See atribuut on ülioluline kerimispõhiste animatsioonide loomisel, mis sõltuvad kerimisasendist konkreetses elemendis.

Näide:

            
@scroll-timeline myTimeline {
  source: block my-scroll-container; /* The scroll container */
}

.my-scroll-container {
  overflow-y: scroll;
  height: 300px;
  width: 100%;
}

            

              
                Copy
              
            
          

Praktilised näited ja rakendamine

Uurime mõningaid praktilisi näiteid, et illustreerida, kuidas CSS Scroll Timeline'i tõhusalt kasutada. Vaatleme levinud kasutusjuhtumeid ja demonstreerime koodinäidete abil, kuidas neid efekte saavutada.

Näide 1: Sissesulanduv animatsioon kerimisel

See näide demonstreerib, kuidas luua sissesulanduvat efekti, kui element kerimise ajal vaatevälja ilmub. See on levinud tehnika sisu esiletõstmiseks ja kaasahaaravama kasutajakogemuse loomiseks. See näide on universaalselt rakendatav olenemata piirkonnast.

            
<div class="scroll-container">
  <div class="animated-element">
    <h2>Sissesulanduv sisu</h2>
    <p>See sisu sulandub sisse, kui kerite.</p>
  </div>
</div>

            

              
                Copy
              
            
          

            
.scroll-container {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  /* Add padding for better visual flow */
}

.animated-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s;
  padding: 20px;
  margin-bottom: 20px;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated-element {
  animation-name: fadeIn;
  animation-duration: 1s;
  animation-timeline: scrollTimeline;
  animation-range: entry 50%; /* Fade in from the bottom of the scroll container at 50% scroll */
}

@scroll-timeline scrollTimeline {
  source: block .scroll-container;
}

            

              
                Copy
              
            
          

Selgitus:

• Loome `.scroll-container`, millel on `overflow-y: scroll;`, et võimaldada kerimist.
• `.animated-element` on algselt `opacity: 0` ja transformeeritud.
• `@keyframes fadeIn` määratleb lõppoleku: `opacity: 1;` ja `transform: translateY(0);` (algne asend).
• Me seome animatsiooni kerimisajajoonega.
• Atribuut `animation-range` määrab, millal animatsioon algab ja lõpeb suhtes elemendi asukohaga kerimiskonteineris.

Näide 2: Horisontaalne kerimisanimatsioon

See näide illustreerib horisontaalse kerimisanimatsiooni loomist. See võimaldab kaasahaaravat sisu esitlust üle piiride, näiteks tooteomadusi, pildikarusselle või sammude seeriat.

            
<div class="horizontal-scroll-container">
  <div class="horizontal-scroll-content">
    <div class="scroll-item"><img src="image1.jpg" alt="Pilt 1"></div>
    <div class="scroll-item"><img src="image2.jpg" alt="Pilt 2"></div>
    <div class="scroll-item"><img src="image3.jpg" alt="Pilt 3"></div>
    <div class="scroll-item"><img src="image4.jpg" alt="Pilt 4"></div>
  </div>
</div>

            

              
                Copy
              
            
          

            
.horizontal-scroll-container {
  width: 100%;
  overflow-x: scroll;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
}

.horizontal-scroll-content {
  display: flex;
  width: fit-content; /* Important for horizontal scrolling */
}

.scroll-item {
  min-width: 300px;
  height: 200px;
  flex-shrink: 0; /* Prevent shrinking of the items */
  scroll-snap-align: start; /* snap to each item on scroll */
  margin-right: 20px; /* space between scroll items */
}

.scroll-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.scroll-item:nth-child(odd) {
  animation: slideIn 1s forwards;  /*Apply the animation to the items.  Odd and even are different directions*/
  animation-timeline: horizontalTimeline;
  animation-range: contain; /* Animation runs while item is visible*/
}
.scroll-item:nth-child(even) {
  animation: slideIn 1s forwards;
  animation-timeline: horizontalTimeline;
  animation-range: contain; /* Animation runs while item is visible*/
  animation-delay: 0.5s; /* stagger the effect */
}

@scroll-timeline horizontalTimeline {
  source: inline .horizontal-scroll-container;
}

            

              
                Copy
              
            
          

Selgitus:

• Kasutame `.horizontal-scroll-container` ja seame `overflow-x: scroll;`.
• `.horizontal-scroll-content` on flex-konteiner keritavatele elementidele.
• Igal `.scroll-item` on `min-width`, et määrata selle suurus.
• Võtmekaadrid ja animatsiooni atribuudid rakendatakse igale individuaalsele keritavale elemendile.
• `source: inline .horizontal-scroll-container` viitab kerimiskonteinerile.

Näide 3: Parallaksefekt

See näide demonstreerib parallaksefekti, kus elemendid liiguvad erineva kiirusega, kui kasutaja kerib. See efekt lisab veebilehele sügavust ja visuaalset huvi. Parallaksefektid on populaarsed veebidisainis üle maailma, lisades täiendava interaktiivsuse kihi.

            
<div class="parallax-container">
  <div class="parallax-layer layer-1"><img src="background.jpg" alt="Taust"></div>
  <div class="parallax-layer layer-2"><img src="middleground.png" alt="Keskmine plaan"></div>
  <div class="parallax-layer layer-3"><img src="foreground.png" alt="Esiplaan"></div>
</div>

            

              
                Copy
              
            
          

            
.parallax-container {
  height: 600px;
  overflow: hidden;
  position: relative; /*Needed for the layered items to be positioned correctly*/
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.layer-1 {
  transform-origin: top center;
  transform: translateY(0%);
}

.layer-2 {
  transform-origin: top center;
  transform: translateY(50%);
}

.layer-3 {
  transform-origin: top center;
  transform: translateY(100%);
}


@keyframes parallax {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-50%);
  }
}

.layer-1 {
    animation: parallax 40s linear infinite;
    animation-timeline: myParallaxTimeline;
    animation-range: contain; /* animation loops within the container*/
}
.layer-2 {
  animation: parallax 20s linear infinite;
  animation-timeline: myParallaxTimeline;
  animation-range: contain; /* animation loops within the container*/
}
.layer-3 {
  animation: parallax 10s linear infinite;
  animation-timeline: myParallaxTimeline;
  animation-range: contain; /* animation loops within the container*/
}

@scroll-timeline myParallaxTimeline {
  source: block .parallax-container;
}

            

              
                Copy
              
            
          

Selgitus:

• Meil on mitu kihti `.parallax-container` sees.
• Iga kiht on absoluutselt positsioneeritud.
• Kihid liiguvad erineva kiirusega (kontrollitud `animation-duration` ja `animation-range` abil).
• Animatsioon sihib atribuuti `transform: translateY()`.
• `source: block .parallax-container;` seob animatsiooni `.parallax-container` kerimisasendiga.

Veebilehitsejate ühilduvus ja varulahendused

Kuigi CSS Scroll Timeline pakub olulisi eeliseid, on oluline arvestada brauseri ühilduvusega. Kirjutamise hetkel kasvab tugi suurtes brauserites. Siiski võib tugi varieeruda sõltuvalt konkreetsetest rakenduse detailidest. On oluline teada funktsiooni praegust ühilduvust veebisaidil, kus kavatsete seda kasutada.

Brauseri ühilduvuse kontrollimine:

Kasutage ressursse nagu CanIUse.com, et kontrollida CSS Scroll Timeline'i ühilduvust erinevates brauserites ja versioonides. See võimaldab arendajatel teha teadlikke otsuseid kasutamise kohta ja pakkuda sobivaid varulahendusi. Pange tähele, et erinevad seadmed, brauserid ja kasutaja seaded (nt vähendatud liikumine) võivad mõjutada animatsioonide renderdamist.

Varulahenduste rakendamine:

Et tagada ühtlane kasutajakogemus, rakendage varulahendusi brauseritele, mis ei toeta CSS Scroll Timeline'i. Siin on mõned strateegiad:

• Progressiivne täiustamine: Alustage tugeva vundamendiga, kasutades põhilist HTML-i ja CSS-i. Täiustage kogemust toetavates brauserites kerimispõhiste animatsioonidega. Mittetoetavad brauserid pakuvad endiselt funktsionaalset, kuigi vähem animeeritud kogemust.
• Tingimuslik laadimine: Tuvastage brauseri tugi funktsioonipäringute või JavaScripti abil. Kui CSS Scroll Timeline'i ei toetata, laadige JavaScriptil põhinev animatsiooniteek (nt GSAP, ScrollMagic).
• Graatsiline degradeerumine: Lihtsamate animatsioonide jaoks kaaluge tavaliste CSS-i võtmekaadri animatsioonide kasutamist, mis mängivad automaatselt ilma kerimissõltuvuseta.

Funktsioonipäringu näide varulahenduse jaoks:

            
@supports (animation-timeline: scroll()) {
  /* CSS Scroll Timeline styles */
  .animated-element {
    animation-timeline: myTimeline;
  }
}

/* Fallback styles for browsers without scroll timeline support */
.animated-element {
  /* Apply alternative animation styles */
  animation-name: fadeIn;  /*Use keyframes to create a fallback animation*/
  animation-duration: 1s;
  opacity: 0;
}

            

              
                Copy
              
            
          

Nende tehnikate abil saavad arendajad luua köitvaid animatsioone, tagades samal ajal positiivse kogemuse kõigile kasutajatele, olenemata nende brauseri valikust. See põhimõte on kooskõlas veebi juurdepääsetavuse ja kaasatuse laiemate eesmärkidega.

Täiustatud tehnikad ja kaalutlused

Lisaks põhilisele rakendamisele on mitmeid täiustatud tehnikaid ja kaalutlusi, mis võivad teie kerimispõhiste animatsioonide tõhusust ja keerukust suurendada. Need tehnikad võimaldavad ka suuremat paindlikkust ja loovust.

1. Scroll Timeline'i kasutamine CSS-i muutujatega

CSS-i muutujaid (Custom Properties) saab kasutada animatsiooni atribuutide dünaamiliseks kontrollimiseks. See lähenemine võimaldab luua reageerivaid ja konfigureeritavaid animatsioone. CSS-i muutujate kasutamine võib lihtsustada keerukate animatsioonide loomist ja hooldamist.

Näide:

            
:root {
  --animation-duration: 2s;
  --animation-delay: 0.3s;
}

.animated-element {
  animation-duration: var(--animation-duration);
  animation-delay: var(--animation-delay);
  animation-name: slideIn;
  animation-timeline: scrollTimeline;
  /* ... */
}

            

              
                Copy
              
            
          

2. Scroll Timeline'i kombineerimine JavaScriptiga (vajadusel)

Kuigi CSS Scroll Timeline'i eesmärk on minimeerida sõltuvust JavaScriptist, on stsenaariume, kus mõlema kombinatsioon võib olla kasulik. Näiteks võite kasutada JavaScripti CSS-i muutujate dünaamiliseks värskendamiseks vastavalt kerimisasendile, et luua täiustatud efekte või keerukamaid animatsioone, mis nõuavad dünaamilisemat kontrolli. Näiteks võib visuaalne diagrammi element muuta oma kuva vastavalt kerimisasendile ja CSS Scroll Timeline on täiuslik lisand selle loomisel abistamiseks.

Näide (illustreeriv):

            
// JavaScript (Illustrative)
const scrollContainer = document.querySelector('.scroll-container');
const animatedElement = document.querySelector('.animated-element');

scrollContainer.addEventListener('scroll', () => {
  const scrollPosition = scrollContainer.scrollTop;
  const elementHeight = animatedElement.offsetHeight;

  // Calculate a dynamic value
  const dynamicValue = scrollPosition / elementHeight;

  // Update a CSS variable
  animatedElement.style.setProperty('--dynamic-value', dynamicValue);
});

            

              
                Copy
              
            
          

See illustreerib, et saate luua keeruka efekti, kombineerides CSS Scroll Timeline'i võimalusi JavaScripti paindlikkusega. JavaScripti saab kasutada keerukate väärtuste arvutamiseks, mida seejärel kasutatakse animatsiooni atribuutide kontrollimiseks.

3. Jõudluse optimeerimine

Sujuvad ja jõudlusvõimelised animatsioonid on positiivse kasutajakogemuse pakkumiseks hädavajalikud. Kaaluge alati neid jõudluse optimeerimise tehnikaid:

• Optimeerige CSS-selektoreid: Kasutage tõhusaid CSS-selektoreid, et vältida jõudluse kitsaskohti.
• Piirake DOM-i manipulatsioone: Minimeerige otsest DOM-i manipuleerimist animatsiooniloogikas (JavaScript).
• Kaaluge atribuuti `will-change`: Atribuut `will-change` aitab brauseritel renderdamist optimeerida, andes neile ette teada, milliseid elemente animeeritakse.
• Testige ja profileerige: Testige oma animatsioone regulaarselt erinevates brauserites ja erinevatel seadmetel. Kasutage brauseri arendustööriistu jõudluse profiilimiseks ja parendusvaldkondade tuvastamiseks.

4. Juurdepääsetavuse kaalutlused

Veebi juurdepääsetavus on veebiarenduse võtmeaspekt. CSS Scroll Timeline'i kasutamisel pidage meeles:

• Pakkuge alternatiive: Puuetega kasutajatele või neile, kes eelistavad animatsioone mitte kogeda, pakkuge võimalust need keelata (nt kasutajaeelistuste seade kaudu).
• Kasutage ARIA atribuute: Kui teie animatsioonid edastavad olulist teavet, kasutage ARIA atribuute, et pakkuda semantilist teavet abitehnoloogiatele.
• Tagage piisav värvikontrastsus: Järgige värvikontrastsuse juhiseid, et tagada loetavus.
• Testige abitehnoloogiatega: Kontrollige oma animatsioonide kasutatavust ekraanilugejate ja muude abitehnoloogiatega.

5. Disaini kaalutlused

Kerimispõhiste animatsioonide kasutamine on võimas tööriist, mida saab kasutada veebisaidi või veebirakenduse disaini täiustamiseks või kahjustamiseks. Kaaluge järgmisi disainielemente:

• Strateegiline kasutamine: Ärge kasutage kerimispõhiseid animatsioone üle. Liigsed animatsioonid võivad olla häirivad ja negatiivselt mõjutada kasutajakogemust. Kasutage neid strateegiliselt, et esile tõsta võtmesisu või luua nauditavaid hetki.
• Selged visuaalsed vihjed: Pakkuge selgeid visuaalseid vihjeid, mis näitavad, millal element animeerub.
• Tasakaal: Tasakaalustage animatsioon teiste disainielementidega, nagu tekst ja pildid.
• Kasutaja kontroll: Andke kasutajatele teatav kontroll (nt võimalus animatsioone peatada või vahele jätta).

Reaalse maailma rakendused ja näited

CSS Scroll Timeline'i saab rakendada mitmesugustes veebiprojektides. Näited hõlmavad:

• Interaktiivne lugude jutustamine: Lugude jutustamiseks loodud veebisaidid saavad luua rikkaliku kogemuse, lisades sisule animatsiooni.
• Tooteesitlused: Veebisaidid või rakendused, mis on loodud toodete esitlemiseks, saavad animatsioonist kasu.
• Maandumislehed: Maandumislehed saavad sageli animatsioonidest kasu, kuna nende eesmärk on kasutajaid kiiresti teavitada.
• Andmete visualiseerimine: Interaktiivsed diagrammid ja graafikud, mis animeeruvad kerimisel.
• Portfoolio veebisaidid: Visuaalse huvi lisamine loomingulise töö esitlemiseks.
• E-kaubanduse saidid: Tooteomaduste esitlemine ja ostukogemuse parandamine.

Mõelgem mõnele praktilisele näitele erinevatest globaalsetest valdkondadest:

• Uudiste veebisaidid (globaalne): Avage artiklite jaotisi animatsiooniga, luues kaasahaaravama lugemiskogemuse.
• Reisiveebisaidid (globaalne): Sihtkohtade esitlemine interaktiivsete kaartide ja animeeritud üleminekutega.
• E-õppe platvormid (globaalne): Interaktiivsed viktoriinid ja animeeritud selgitused.
• Ettevõtete veebisaidid (globaalne): Ettevõtte ajajoonte või animeeritud andmete visualiseerimiste esitamine.

Need on vaid mõned näited ning potentsiaalsed rakendused on laiad ja pidevalt laienevad. Oluline on mõista põhikontseptsioone ja kohandada tehnikaid vastavalt oma konkreetse projekti nõuetele.

Tulevikutrendid ja areng

Veebiarenduse maailm areneb pidevalt. Ka CSS Scroll Timeline'i tulevik on dünaamiline.

• Parem brauseri tugi: Kui brauseri tugi suureneb, on arendajatel veelgi rohkem võimalusi katsetada ja täiustada kerimispõhiseid animatsioonitehnikaid.
• Uued funktsioonid ja laiendused: Tulevased CSS Scroll Timeline'i versioonid võivad tutvustada uusi funktsioone ja atribuute selle võimekuse suurendamiseks.
• Integratsioon teiste veebitehnoloogiatega: Arendajad jätkavad uurimist, kuidas CSS Scroll Timeline'i saab integreerida teiste veebitehnoloogiatega, nagu WebGL ja WebAssembly, et luua veelgi täiustatumad ja kaasahaaravamad kogemused.

Viimaste trendidega kursis olemine on hädavajalik igale veebiarendajale, kes soovib luua kaasaegseid veebirakendusi, mis pakuvad suurepärast kasutajakogemust. Informeerituna püsimine ja uute tehnoloogiatega katsetamine aitab luua uuenduslikke lahendusi.

Kokkuvõte: CSS Scroll Timeline'i võimsuse omaksvõtmine

CSS Scroll Timeline annab arendajatele üle maailma võimaluse luua paeluvaid ja interaktiivseid veebikogemusi. Mõistes põhikontseptsioone, uurides praktilisi näiteid ja järgides parimaid tavasid, saate avada selle võimsa CSS-i funktsiooni täieliku potentsiaali. Lisage CSS Scroll Timeline oma projektidesse ja tõstke oma veebidisaini taset. Veebianimatsiooni tulevik on nüüd ja CSS Scroll Timeline on selle arengu esirinnas.

Võtke CSS Scroll Timeline omaks ja alustage dünaamiliste, kaasahaaravate ja juurdepääsetavate veebikogemuste loomist, mis kõnetavad kasutajaid üle maailma. Head kodeerimist!