Häid Jõule!

Häid Jõule!

Täpselt nii! Jõulud on lõpuks käes!

Kauneid jõule Sulle mu kallis lugeja!

Aga et nüüd jõulupäev lihtsalt niisama ei mööduks, tahaksin ma sulle õpetada, kuidas teha üsnagi lihtsat ja toredat jõulukaarti veebiarendaja moodi.

Kui sa järgnevatest asjadest aru ei saa, siis ole mureta (mõned õpetused võid leida siit või siit). Ma olen lihtsalt kasutanud veebikeeli, et luua jõulukaart Sulle kui mu blogi lugejale.

Tech savvyd võivad jätkata lugemist 😉 .

Alustame loomulikult HTMList. Loome jõulukaardi sisu.

<!DOCTYPE html>
<html>
  <head>
    <title>Oliveri Jõulutervitus</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <main>
      <div class="content">
        <h1>Häid Jõule!</h1>
        <p>- Soovib <a class="name" href="http://oliverpaljak.com">Oliver Paljak</a> -</p>

        <h2>Päkapikkude jõulueelne öö</h2>
        <p class="name">Uno Sikemäe</p>
        <p class="poem">
          Päkapikud tegid ringi<br />
          kõduõuel ümber pingi.<br />
          Pingi allgi olid mõned,<br />
          pingi pealt said loetud kõned.<br />
          <br />
          Siin on jõuluplaane peetud,<br />
          kingipakke kokku veetud.<br />
          Ootetunnid vähenesid,<br />
          tähtsad pühad lähenesid.<br />
          <br />
          Vanem pingilt käske jaotas,<br />
          kuni tasakaalu kaotas:<br />
          Üle serva alla potsas,<br />
          siples veidi hange otsas.<br />
          <br />
          Oodates nüüd käsku - minge!<br />
          Tõusis päkapikupinge.<br />
          Nimekirjad näpuvahel,<br />
          seisis valvel nende ahel.<br />
        </p>
      </div>
    </main>
  </body>
</html>

Üsnagi lihtne ja arusaadav. Siin midagi pikemalt seletama ei pea.

 

Lisame sellele ka CSSi. Kuna tegemist on jõulukaardiga, siis oleks targem luua inline stylesheet, et seda oleks kergem saata.

/*Impordime uue fondi*/
@import url('https://fonts.googleapis.com/css?family=Satisfy');

/*Resetime CSSi*/
*{
  margin: 0;
  padding: 0;
}

/*html ja body laiuselt ning kõrguselt 100%*/
html, body{
  width: 100%;
  height: 100%;
}

/*body*/
body{
  background: #db393c; /*Sinu tagataust(a värv) siia*/
  overflow: hidden; /*Peatame scrollimise*/
} 

/*main*/
main{
  background-color: rgba(52, 212, 203, 0.1); /*Põhisisu tagataust*/
  width: 50%; /*Laius 50% peale*/
  margin: 0 auto; /*Keskele*/
  height: 100%; /*Kõrgus täielikuks*/
  text-align: center; /*Sisu keskele*/
  display: flex; /*display flexiks, et lapselemente oleks parem liigutada*/
}

/*content*/
.content{
  margin: auto auto; /*Paneme sisu igalt poolt keskele (flex on siin abi)*/
}

/*h1*/
h1{
  color: #fff;
  font-weight: 500;
  font-size: 100px;
  font-family: 'Satisfy', cursive; /*Kasutame imporditud fonti*/
}

/*h2*/
h2{
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  font-size: 50px;
  font-family: 'Satisfy', cursive;
  margin-top: 50px;
}

/*p*/
p{
  color: rgba(255, 255, 255, 1);
  font-weight: 250;
  font-family: 'Satisfy', cursive;
}

/*a*/
a{
  color: rgba(225, 225, 225, 1);
  transition: color 0.5s; /*Lingid lõbusamaks*/
}

/*a:hover*/
a:hover{
  color: rgba(255, 255, 255, 1);
  transition: color 0.5s;
}

/*poem*/
.poem{
  font-size: 20px;
  margin-top: 20px;
}

/*name*/
.name{
  color: rgba(225, 225, 225, 1);
}

CSSis ma arvan, et ei pea ka rohkem midagi lisama. Seletasin võib olla paar keerulisemat kohta kommentaaridega lahti.

 

Nüüd aga tuleb keerulisem osa. See on JavaScript.

JavaScripti soovitaksin ka teha inline.

/*
* -----------
*  Muutujad
* -----------
*/

/**
 * Kõik lumehelbed
 *
 * @since 24.12.2016
 *
 * @type Array
 */
var snowFlakes = [];

/*
* ---------------
*  Konstruktorid
* ---------------
*/

/**
 * Lumehelbe objekt
 *
 * @since 24.12.2016
 */
function SnowFlake(widthHeight){
  

  /*
  * -----------------------
  *  Publikaalsed muutujad
  * -----------------------
  */
  
  /**
   * Lumehelbe laius ja kõrgus
   *
   * @since 24.12.2016
   */
  this.widthHeight = widthHeight + "px";

  /**
   * Lumehelbe liikumiskiirgus
   *
   * @since 24.12.2016
   */
  this.speed = Math.random();

  /**
   * Lumehelbe HTMLi element
   *
   * @since 24.12.2016
   */
  this.instance;


  /*
  * ---------------------
  *  Privaatsed muutujad
  * ---------------------
  */
  
  /**
   * Lumehelbe x positsioon
   *
   * @since 24.12.2016
   */
  var x = Math.floor(Math.random() * 99);

  /**
   * Lumehelbe y positsioon
   *
   * @since 24.12.2016
   */
  var y = -Math.floor((Math.random() * 100) + 30);

  
  /*
  * ---------------------------
  *  Publikaalsed funktsioonid
  * ---------------------------
  */

  /**
   * Loo lumehelbe HTMLi element ja lisa see HTMLi
   * 
   * @since 24.12.2016
   */
  this.create = function(){
    //Loo HTMLi element
    this.instance = document.createElement("DIV");
    this.instance.className = "snow-flake";

    //Pane paika selle laius ja kõrgus
    this.instance.style.width = this.widthHeight;
    this.instance.style.height = this.widthHeight;

    //Pane paika HTMLi elemendi positsioon
    this.instance.style.left = x + "%";
    this.instance.style.top = y + "%";

    //Lisa HTMLi
    document.body.insertBefore(this.instance,                document.body.getElementsByTagName("main")[0]);
  }

  /**
   * Liiguta lumehlebe HTMLi elementi allapoole
   * 
   * @since 24.12.2016
   */
  this.move = function(){
    //Lisa kiirust lokaalsele muutujale
    y += this.speed;

    //Anna muutunud y positsioon edasi HTMLi elemendile
    this.instance.style.top = y + "%";
    
    //Reseti HTMLi element kui y positsioon on rohkem kui 102 (protsenti)
    if(y > 102){
      this.reset();
    }
  }

  /**
   * Vii lumehelbe HTMLi element uuele algpositsioonile. 
   *
   * @since 24.12.2016
   */
  this.reset = function(){
    x = Math.floor(Math.random() * 100);
    y = -Math.floor((Math.random() * 100) + 30);

    this.instance.style.left = x + "%";
    this.instance.style.top = y  + "%";
  }	
}

/*
* -------------
*  Loogika ise
* -------------
*/

/*
Lumehelveste paika panek
*/
for(var i = 0; i < 250; i++){
  //Uue lumehelbe loomine
  var snowFlakeInstance = new SnowFlake(Math.floor((Math.random() * 30) + 5));
  //Uue lumehlebe HTMLi elemendi loomine
  snowFlakeInstance.create();

  //Uue lumehelbe lisamine globaalsesse loendisse
  snowFlakes[i] = snowFlakeInstance;
}

/*
Kordame funktsiooni 60 FPS (1 sek/60 korraga).
*/
setInterval(function(){
  for(var i = 0; i < snowFlakes.length; i++){ //Iga lumehelves loendis
    snowFlakes[i].move(); //Liigutame ühte lumehelvest
  }
}, 1000/60);

Jällegi olen ma välja toonud keerulisemad koodi kohad juba kommenteerides, aga ma räägiksin selle koodi mõttest üldisemalt, et sellest saaks paremini aru.

Kõigepealt on meil muutuja/loend snowFlakes, mis hoiab endas kõiki loodud lumehelbeid.

Järgneb klass-objekt SnowFlake, mis põhimõtteliselt annab meile täielikku kontrolli iga lumehelbe üle.

Nõnda saame muuta iga lumehelbe kiirust ning suurust. Lisaks sellele saaksime ka muuta lähekohti.

Alati kui on tegemist programmeerimisülesandega, kus on vaja luua midagi mitu või palju, siis kasuta objekt-orienteeritud programmeerimist. Hoiab väga palju aega kokku.

Nüüd, mis klassi sees on, seda ei ole vaja vist seletada, sest on ünsagi arusaadav. Lisaks on kommentaarid ka juures.

Lõpus ka midagi erilist ei ole, et peaks üle kirjutama.

 

Järgmisena peaksime lisama CSSi lumehelveste jaoks. Tegemist ei ole väga keerulise kujunduse, aga sa võid selle ju keeruliseks muuta.

Selle CSSi võib lisada inline CSSi lõppu.

.snow-flake{
        	background: radial-gradient(circle closest-side, #fff, transparent); /*Tagataust ümmarguseks ja natukene häguseks*/
        	display: inline-block; /*Ei võtaks rohkem ruumi kui vaja*/
        	position: absolute; /*Saaks paremini liigutada*/
        	z-index: -100; /*Võimalikult all*/
}

Ma kasutasin backgroundiks gradienti, sest see annab sellise hea ja ka natsi häguse lumehelve efekti.

 

Ja ongi valmis! Lõpp-produkti ja minu jõulukaarti Sinule võid näha siit!

 

Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.

Leave a Reply

Your email address will not be published. Required fields are marked *