Esileht - GreteNeilinn/G-Sushi GitHub Wiki

Ülevaade:

Failid, mis seotud esilehega on järgmised:

• esilehtSVG.html
• stiilSVG.css
• pealkiriSVG.js

Esileht koosneb peamiselt SVG-dest, mis on vektoritest koosnevad pildid. Kasutasin SVG-sid, kuna tavaliste piltide puhul nende suurendamine või kahandamine vähendab nende kvaliteeti, mis SVG-de puhul ei kehti. Kasutatud SVG-d pärinevad leheküljelt https://freesvg.org/ , kus on lubatud neid pilte tasuta kasutada. Inspiratsiooni andsid video https://www.youtube.com/watch?v=vJNVramny9k ja artikkel https://freefrontend.com/css-animated-backgrounds/ .

Javascript

Javascript ei ole otseselt veebilehe koodi implementeeritud, aga ma kasutasin seda pealkirja tähtede mõõtmete saamiseks.

Pealkirja animatsioon

Pealkirja animatsioon töötab stroke-dasharray ja stroke-dashoffset'i alusel. Stroke-dasharray jaoks vajalikud mõõtmed sain eelnevalt mainitud javascriptiga, mille ma käivitasin chrome-i console-is. Nimelt dasharray pikkuseks on terve tähe outline-i pikkus ning stroke-offset saab sama väärtuse, mis dasharray, liigutades vahe dashide vahe paremale niipalju, et tähe outline-i pole näha. Animatsiooniga, me muudame stroke-dashoffset talle antud väärtusest 0-ni, muutes tähe outline nähtavaks. Näide tähest G:

#pealkiri path:nth-child(1){
	stroke-dasharray: 544px; /* Tähe outline-i pikkus ilma vahedeta */
	/* stroke-dasharray teeb - - - */
	stroke-dashoffset: 544px; /* Liigutab dash-i 544px vasakule, nii et tähe outline-i pole näha */
	/* Stroke-dasharray määrab kust algab dash array */
    animation: pealkiri-anim 2s ease forwards;
}
@keyframes pealkiri-anim{
    to{
        stroke-dashoffset: 0; /* dashoffset liigub üha paremale, muutes outline-i nähtavaks */
    }
}

Pealkiri on ka animeeritud sisu värviliseks muutma, peale outline-i animatsiooni. Selleks on kasutatud from{} ja to{}, kus alguses on sisu läbipaistev ja pärast heleroosa.

Lendlevad sushid

Esilehe taustaks on erinevad sushid, mis lendlevad ekraani alt ülesse. Nende algus- ja lõpp-punktid on ekraanist väljas pool, et see ilusam välja näeks. Selleks kasutasin overflow: hidden;. Nagu ka pealkirja tähtede jaoks kasutasin ma sushi svg-de jaoks :nth-child(){} meetodit, et anda erinevatele sushidele erinevad asukohad, pikkused, kiirused ja algusajad. Animatsiooni alguses on kõik sushid püstiolekus ja läbipaistmatud ning enne lõppu peavad nad ära tegema 2 ringi ümber enda. Lisaks peavad nad lõpus olema läbipaistvad. Näide ühest sushist:

/* Sushi 4 */
.liikuv svg:nth-child(4){
	left: 40%;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 18s;
}
@keyframes lendlev{
	/* alguses */
	0%{
		transform: translateY(0)rotate(0deg);
		opacity: 1;
	}
	/* lõpus */
	100%{
		transform: translateY(-1000px)rotate(720deg); /* Sushi teeb kaks ringi ümber enda 
		ja liigub üles ekraanist välja */
		opacity: 0;
	}
} 

Menüüriba

Hiire liigutamine ülemise menüürea elemendi peale, käivitab antud elemendi paisumise. Seda efekti on tekitatud transition meetodil.