Päiviä Wappuun 6: Tech Supportin Wapputervehdys / Wappu Greetings from Tech Support

Tech Supportin Wapputervehdys

Niko, Elias, Oscar

Erinomaista sunnuntaita! Tech Support nostattaa wapputunnelmaa tervehdyksellä, joka löytyy osoitteesta fyysikkokilta.fi/wapputervehdys

Lopputuotteen ihailemisen lisäksi voisi kuitenkin olla myös hedelmällistä tutustua tervehdyksen mielenkiintoisiin yksityiskohtiin. Seuraavaksi muutama nosto ominaisuuksista.

Animaatiofaneille:

Kyseisen sovelluksen animaatiot ovat toteutettu täysin CSS-määritelmillä, joita käytetään yleisimmin tyylien määrittelemiseen. Tämä tekee kokonaisuudesta todennäköisesti helposti luettavan (vrt. JavaScript animaatiot). Otsikon suureneminen ja pallojen liike on yksinkertaisimmasta päästä. Kokeile laittaa hiiri tervehdyksen otsikon päälle. Näin toteutat otsikon animaation tyylittelyn.

h1{
  font-size: 50px;
  transition: font-size 2s;
  transition-timing-function: ease-out;
}
h1:hover{
  font-size: 69px;
}

Hieman haastavampi on esimerkiksi pilvien liike. Yllättävä fakta: sivulla on vain neljä pilveä, jotka teleporttaavat sivun oikeaan laitaan ohitettuaan maiseman. Sammakot puolestaan hyödyntävät kauniita bezier-käyriä hypyissään, mikä tietysti säväyttää CS-C3100 Computer Graphics faneja.

JavaScript-faneille:

Sammakon ilmestyminen klikkauksen kohtaan on helppo huomata. Tarkkasilmäisimmät voivat kuitenkin hoksata, että sammakkoelementit myös poistetaan vastuullisesti hypyn jälkeen, jolloin dokumentin rakenne ei paisu turhaan. Tehtävä: Tarkastele sammakoiden HTML-elementtejä. Huomaatko mitään outoa niiden id:ssä?

HTML DOM -faneille:

Elementtien suhteet HTML-rakenteessa tuottavat mielenkiintoisen ominaisuuden. Lähtökohtaisesti sammakon pystyy luomaan klikkaamalla ruohoa kuvaavaa vihreää aluetta. Mahdollisuudet eivät kuitenkaan rajoitu tähän. Yllättävästi osoittautuu että sammakot voivat myös kiivetä ilmapallojen, amfin ja toistensa päälle. Tämä johtuu siitä, että kaikki edellä mainitut kuvat ovat ruohokomponentin “lapsia” HTML-rakenteessa, jolloin siihen kohdistettu javascript-funktio aktivoituu myös “lapsia” klikkaamalla.
Haaste: Saatko sammakot kiipeämään taivaaseen asti?

Responsiivisuusfaneille

Tervehdyksen rakenne on hyvin skaalautuva, sillä asioiden leveydet on määritelty prosenttiosuuksina. Kaikkea ei kuitenkaan ole hiottu täysin. Kokeile mitä tapahtuu kun selainikkunaa levittää todella matalaksi tai kaventaa korkeaksi. Haaste: Saatko pilvet kulkemaan ruohon päällä? Jos tarvitset joskus sadepäivän puuhastelua, voit tehdä pull-requestin ja korjata näitä kummallisuuksia
Käyttistä

PS: Wapputervehdyssivu varmaan toimii osallistumisena killan wapputaidekeräykseen?


Wappu Greetings from Tech Support

Niko, Elias, Oscar

Hello! To celebrate the excellent Sunday that we have, Tech Support raises some Wappu hype with a greeting that can be found from fyysikkokilta.fi/wapputervehdys

In addition to admiring the masterpiece, you can also dive into the details of the site. Here are some picks that you could find interesting.

For Animation Fans:

The animations of the site are implemented in CSS, which is most often used for styling websites. This makes the source code easily readable (in comparison to JavaScript animations). The easiest animations are resizing the title and making the balloons sway. Try placing your cursor on the title. Here is how to implement the title animation in CSS:

h1{
  font-size: 50px;
  transition: font-size 2s;
  transition-timing-function: ease-out;
}
h1:hover{
  font-size: 69px;
}

A more challenging task is moving the clouds. Surprising fact: the page contains only four clouds that teleport to the right side of the page after passing the scene. The frogs are implemented with beautiful Bézier-curves, which might impress CS-C3100 Computer Graphics fans.

For JavaScript Fans:

It is easy to notice that a frog appears at the location of a mouse click. Experts might also notice that the frog elements are responsibly deleted after their leap in order to keep the document from expanding uncontrollably. Task: Take a look at the HTML-elements of the frogs. Notice anything strange with the element ids?

For HTML DOM Fans:

The relationships of the HTML elements create an interesting feature. In principle, a frog should only spawn on the green area that represents grass due to the JavaScript implementation. However, that is not what happens in practice. Turns out that the frogs can also climb on top of Amfi, the balloons, and each other. This happens because all of the previously mentioned elements are “children” of the grass area in the HTML structure and the frog-spawning JavaScript function activates also when any children of the grass component are being clicked. Challenge: Can you make the frogs climb all the way to the sun?

For Responsivity Fans

The elements of the greeting are very dynamic because their sizes and positions are defined as percentages instead of fixed pixel values. Some things are not very precise, however. Try what happens when you resize your browser window to a very low and wide shape or a tall and narrow shape. Challenge: Can you make the clouds move on the grass? If you are bored on a rainy day, you may make a pull request to fix some of the peculiarities.
Käyttistä

PS: Is the Wappu Greetings page an eligible submission for the Wappu Art campaign of the guild?

1 tykkäys