http://courses.cs.taltech.ee/w/index.php?action=history&feed=atom&title=UI%3AAnimatsioonid
UI:Animatsioonid - Redigeerimiste ajalugu
2026-05-22T03:26:39Z
Selle lehekülje redigeerimiste ajalugu
MediaWiki 1.35.9
http://courses.cs.taltech.ee/w/index.php?title=UI:Animatsioonid&diff=6550&oldid=prev
Irve: /* Viited */
2018-03-28T06:17:15Z
<p><span dir="auto"><span class="autocomment">Viited</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 28. märts 2018, kell 06:17</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l22" >22. rida:</td>
<td colspan="2" class="diff-lineno">22. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [http://mynameismatthieu.com/WOW/ WOW.js]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [http://mynameismatthieu.com/WOW/ WOW.js]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [https://daneden.github.io/animate.css/ animate.css]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* [https://daneden.github.io/animate.css/ animate.css]</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* [https://material.io/guidelines/motion/ Material Design (motion)]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Esitamine ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Esitamine ==</div></td></tr>
</table>
Irve
http://courses.cs.taltech.ee/w/index.php?title=UI:Animatsioonid&diff=6548&oldid=prev
Irve: /* Ülesanne */
2018-03-27T18:58:46Z
<p><span dir="auto"><span class="autocomment">Ülesanne</span></span></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. märts 2018, kell 18:58</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4" >4. rida:</td>
<td colspan="2" class="diff-lineno">4. rida:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Ülesanne ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Ülesanne ==</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist:</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>* <del class="diffchange diffchange-inline">Elemendi </del>ilmumine <del class="diffchange diffchange-inline">ja kadumine </del>- ''See animatsioon mõelda nii, et väärtustaks liidest ja kasutajapoolset kogemust''</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>* <ins class="diffchange diffchange-inline">Vähemalt kahe elemendi üheaegne </ins>ilmumine - ''See animatsioon mõelda nii, et väärtustaks liidest ja kasutajapoolset kogemust''</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins class="diffchange diffchange-inline">* Vähemalt kahe elemendi üheaegne kadumine</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Kasutaja pilgu juhtimine - ''See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Kasutaja pilgu juhtimine - ''See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Elemendile tähelepanu juhtimine - ''See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>* Elemendile tähelepanu juhtimine - ''See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi.</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">=== Selgitusi ===</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* Ilmumine ja kadumine: Seda tüüpi animatsiooni võiks paigutada liidese kahe "oleku" vahele. Teisisõnu kas kasutaja liigub vaadete vahel ja üleminek on kuidagi sujuv või kasutaja tunneb huvi mõne objekti või elemendi kohta ning lisainfo või objekt ise tekib kuidagi toredasti. Kahe elemendi nõue võimaldab teil ajastustega teha huvitavamaid asju kui pelgalt ühe elemendi puhul saaksite.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* Kasutaja pilgu juhtimisel mõelge nii, et kasutaja klõpsib kuskil: tõenäoliselt on ta pilk seal -- kuidas toimetada kasutaja pilk sinna kuhu ilmuvad andmed või kus kajastub tegevuse tulemus? Mõte on selles, et võtate pilgu ja "jalutate" sellega õigesse kohta.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">* Elemendile tähelepanu juhtimise puhul on tegemist ootamatusega, kus soovite justkui "lehvitades" kasutaja pilku mõnele elemendile. Siin arvestage perifeerse nägemise liikumistundlikkusega.</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Ilmumine ja kadumine võiks olla üsna kiired, et nad pideval esinemisel ei tüütaks. Pilgu juhtimise ja elemendile tähelepanu kogumise puhul tehke animatsioonid nii pikad kui arvate et võiks olla tarvis.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Viited ==</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Viited ==</div></td></tr>
</table>
Irve
http://courses.cs.taltech.ee/w/index.php?title=UI:Animatsioonid&diff=6547&oldid=prev
Irve – 27. märts 2018, kell 18:34
2018-03-27T18:34:14Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="et">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">←Vanem redaktsioon</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Redaktsioon: 27. märts 2018, kell 18:34</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >1. rida:</td>
<td colspan="2" class="diff-lineno">1. rida:</td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">{{UI}}</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide'''</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>'''Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide'''</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
</table>
Irve
http://courses.cs.taltech.ee/w/index.php?title=UI:Animatsioonid&diff=6546&oldid=prev
Irve: Uus lehekülg: ''''Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide''' == Ülesanne == Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise ...'
2018-03-27T18:34:00Z
<p>Uus lehekülg: ''''Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide''' == Ülesanne == Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise ...'</p>
<p><b>Uus lehekülg</b></p><div>'''Ülesanne on rikastada kasutajakogemust läbi animeeritud elementide'''<br />
<br />
== Ülesanne ==<br />
Kasutades wow.js , animate.js , CSS3 transition või teisi animeerimise hõlbustamise vahendeid valmistage lehekülg, mis demonstreerib järgmist:<br />
* Elemendi ilmumine ja kadumine - ''See animatsioon mõelda nii, et väärtustaks liidest ja kasutajapoolset kogemust''<br />
* Kasutaja pilgu juhtimine - ''See animatsioon disainige nii, et haarate mingi liikuva elemendi/serva/objektiga kasutaja tähelepanu ja viite selle sinna, kuhu ta järgmisel hetkel tahaks vaadata''<br />
* Elemendile tähelepanu juhtimine - ''See animatsioon disainige nii, et segate kasutaja tähelepanu animatsiooniga ja tõmbate pilgu enda juurde.''<br />
<br />
Animatsioonid võiks olla käivitatavad lingil või nupul klõpsides. Töö võib teha kahekesi.<br />
<br />
== Viited ==<br />
* [https://www.w3schools.com/css/css3_transitions.asp CSS3 Transitions]<br />
* [http://mynameismatthieu.com/WOW/ WOW.js]<br />
* [https://daneden.github.io/animate.css/ animate.css]<br />
<br />
== Esitamine ==<br />
<br />
* Laadige töö dijkstrasse kataloogi "public_html/ui/praks7"<br />
* kirjutage kiri, kus on töö klõpsitav aadress ja töö tegiate nimed ja täispikad tudengikoodid.<br />
* saatke kiri oma praktikumi õppejõule erik.soekov@ttu.ee või mariliis.haalme@ttu.ee</div>
Irve