U ovom tutorijalu ćemo vam pokazati kako možete da kreirate dug, skrolujući sajt i da ga iskodirate.

 

Šta ćemo kreirati

Spojićemo nekoliko stvari zajedno tako da možete skrolovati od vrha na stranici koju ćete videti kao “Alien Lander”, naćićete svoj način da skrolujete na dole. Na početku, videćete NLO kako prekriva stranicu.

 

izrada-web-sajtova-alien1

 

Kao što skrolujemo na dole, NLO će se kretati atmosferom i postati kometa.

 

 

izrada-web-sajtova-alien3

 

I konačno kada prođete kroz treću liniju videćete “malog zelenog” koji sleće na tlo.

 

izrada-web-sajtova-alien2

 

Kako to izgleda možete videti ovde

 

SVG slike

U ovom projektu koristićemo SVG slike tako da možemo koristiti mogućnost njihovog skaliranja i male veličine fajla.

Pre nego što počnemo, biće nam potrebna velika slika, podeljena u 4 SVG fajlova:

  • UFO koji je nazvan “ufo.svg”
  • Onda “alien_comet.svg”
  • Mali zeleni, fajl nazvan “alien_landing.svg
  • Pozadinski fajl, iz kog su izvađene gornje slike, kao fajl koji je nazvan “background.svg

Možete eksportovati slike u SVG, ili alternativno možete pronađi sve ove sličice na GitHubu

 

Podešavanje osnovne strukture

Kreirajte novi folder u okviru vašeg projekta i unutar toga kreirajte subfolder nazvan “CSS” i još jedan koji se zove “img” (slike)

Kopirajte SVG slike u folder sa slikama.

U folderu CSS kreirajte folder “style.css”.

U glavni folder kreirajte folder nazvan “index.html”.

Struktura foldera će izgledati ovako:

 

izrada-web-sajtova-alien4

 

U fajl “index.html” dodajte najosnovniji HTML kod, koji ćemo vam pokazati u nastavku teksta.

 

 

izrada-web-sajtova-alien5

 

Dodavanje pozadine

Deluje nelogično, ali našu pozadinsku sliku ćemo dodati kao img element, a ne kroz dodavanje u CSSu. Razlozi za ovo su sledeći:

  • Želimo da iskoristimo mogućnost SVGa da promenimo veličinu i popunimo ceo prostor za prikaz sa našim background.svg slike bez obzira na dimenzije prozora pretraživača.
  • Da bi tehnika skrolovanja radila, moramo da znamo visinu pozadinske slike.
  • Jer smo, dozvolili da nam pozadinska slika bude fluidna i promenljive veličine, ne postoji mogućnost da znamo visinu unapred.
  • Pošto ne znamo visinu sekcije, saznaćemo kada bude bila gotova cela sekcija.
  • Ukoliko postavimo “background.svg” kao pozadinu CSSa, visina neće uticati na sam layout.
  • Dodavanjem “background.svg” kao regularnu sliku, korišćenjem JQuerya, ćemo moći da otkijemo i definišemo visinu slike.

Sada, možemo da počnemo sa kodiranjem.

U fajlu “index.html” dodajte sledeći kod:

 

izrada-web-sajtova-alien6

U okviru preview fajla u pretraživaču, videćete sliku kako popunjava vidno polje. Biće i belog prostora oko ivica.

Ovo je zato što pretraživači sami uključuju malu marginu kod “body” elemenata. Da bi smo ovo ispravili dodaćemo kod u “style.css”.

 

izrada-web-sajtova-alien7

Postoji još jedan podrazumevani kod koji sadrže pretraživači koji ćemo morati da promenimo, a povezan je sa slikama koji se prikazuju. Ukoliko dođete do dna, videćete beli prostor. Dodaćemo sledeće:

 

izrada-web-sajtova-alien8

 

Sada bi trebalo da vidimo “background.svg” sliku kako je popunila prostor u prozoru bez razmaka i belih ivica. Visina layouta sajta će biti promenjena tako da će se slika videti adekvatno.

 

Dodavanje prednjeg container-a

Da bi se slika koju smo dodali ponašala kao pozadina, moramo postaviti sadržaj u prvi plan. Dodaćemo div element u koji ćemo postaviti sadržaj i postaviti u prvi plan menjanjem z-index svojstva

U okviru fajla “index.html” , dodajte novi div element.

 

izrada-web-sajtova-alien9

U fajl “style.css” dodajte novi CSS

 

izrada-web-sajtova-alien10

 

Šta radi ovaj kod?

Kada postavimo position – absolute – postavljamo element tamo gde mi odaberemo, a ne tamo gde bi regularno bio postavljen.

Podešavanjem vrednosti top i left na 0, zakucavamo element na vrh prozora i horizontalno ga zakucavamo za pozadinsku sliku.

Kada elementima dodelimo height i width na 100%, element će zauzeti kompletnu površinu pozadine.

Kada postavimo Z-Index na 1, element će biti prikazan ispred pozadinske slike i tako će sadržaj biti vidljiviji i neće biti prekriven slikom.

 

Dodavanje UFO panela

Sada ćemo objasniti način na koji ćemo dodati UFO objekat u dnu. Biće nam potrebna tri panela, po jedan za svaku fazu “sletanja”.  Dodaćemo odgovarajuću SVG sliku svakom panelu, na primer ufo.svg, koji će činiti fiksiranu pozadinu. Slika će ostati na mestu tokom skrolovanja.

Unutar svog “foreground” diva dodajte novi div.

 

izrada-web-sajtova-alien12

A u okviru CSS fajla, definisaćemo klasu ufo section:

 

izrada-web-sajtova-alien13

Visinu smo postavili na 100%, tako da će sadržaj biti vidljiv. Ufo.svg je postavljen kao pozadina. Background Repeat – No repeat će sprečiti ponavljanje slike, a Position parametar će postaviti sliku na centar. Background-size podešava veličinu slike, a vrednost je u procentima da bi bio prilagođen veličinama prozora. Background-attachemnt – fixed – znači da će slika ostati fiksirana tokom skrolovanja. 

 

Kometa i Paneli koji sleću

Kako se skroluje kroz sajt, UFO će nestajati. To je zato što je skrolovanje prošlo veličinu ekrana koju smo definisali u klasi ufo_section, tako da više ne vidimo to kao pozadinu. Postavićemo tri panela, da se skroluju jedan ispod drugog, tako što ćemo da kreiramo efekte da jedna slika bude zamenjena drugom.

Ponovićemo proces tako što ćemo dodati slike “alien_comet.svg” i “alien_landing.svg”.

U okviru HTML dodaćemo dva div elementa u okviru containera.

 

izrada-web-sajtova-alien14

Onda dodati ove klase u okviru CSSa

 

izrada-web-sajtova-alien15

 

Jedino što je promenjeno je background-size koja je postavljena na 15%.

 

Kompletan CSS

Sada ćemo prikazati kompetan CSS kod.

 

izrada-web-sajtova-alien16

 

Sada možete proveriti sajt i videti kako se UFO pretvara u kometu.

 

Računanje visine panela

Primetićete nekoliko problema a to su:

  • Paneli nisu dovoljno visoki
  • “alien_comet.svg” se pojavljuje pre nego što je “ufo.svg” nestao, što izgleda čudno.

Naša “background.svg” slika nema fiksiranu veličinu tako da ne znamo egzaktnu visinu panela pre očitavanja.

Koristeći JQuery možemo implementirati sledeće:

  • Definisati veličinu svakog panela procentualno (kao procenat visine “background.svg”)
  • Detektovati visinu “background.svg
  • Proračunati set visina panela na osnovu ovih informacija.

Možemo da dodamo i nekoliko praznih div elemenata koji bi se ponašali kao prazan prostor. Dodavanjem prostora između panela ćemo imati bolju tranziciju i tako ćemo rešiti problem koji je naveden gore.

Promenite u HTML fajlu sledeće.

 

izrada-web-sajtova-alien17

Dodati sledeću Java Script funkciju:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

 

Podešavanje Java Script funkcije

Pre zatvaranja </body> taga, dodajte <script></script> i unutar njega dodajte sledeće:

 

izrada-web-sajtova-alien18

 

Želimo učitavanje ove funkcije čim se strana očita

 

izrada-web-sajtova-alien19

Visina pozadinskih slika

Unutar set_section_heights() funkcije možete saznati visinu pozadinske slike.

izrada-web-sajtova-alien20

Ova linija koda će nam reći koja je visina pozadinske slike.

 

Definisanje visine unutrašnjih sekcija

Postavićemo objekat kojim ćemo definisati

  • Ime klase svakog elementa za koji želimo da podesimo visinu
  • Kolika mora biti visina elementa kao frakcije pozadinske slike

 

izrada-web-sajtova-alien21

Vrednost 0,25 je zapravo 25% koliko smo prethodno definisali. Tako da će “ufo_section” panel biti 25% od visine “background.svg”. Tako da, kada bi visina “background.svg” bila 1000px, visina “ufo_section” bi bila 250px.

Dodajmo i ostale elemente kojima želimo da postavimo visinu

 

izrada-web-sajtova-alien22

Sections Heights objekti

Sada smo spremni da menjamo veličinu panela.

Treba nam $.each() funkcija, da bi se ponavljali section_heights objekti.

Dodajte kod u okviru section_heights objekta.

 

izrada-web-sajtova-alien23

Console log služi da napišemo poruku konzoli za svaki unos u section_heights objekat. Učitajte sajt i otvorite konzolu, videćete sledeće.

 

izrada-web-sajtova-alien24

Proračunavanje i podešavanje Section Heights objekta

Izbrišite console log i dodajte sledeći kod

 

izrada-web-sajtova-alien25

$( “.” + index ) – Ovom linijom pronalazimo element kome želimo da definišemo veličinu. Na primer želimo da promenimo $.( “.ufo_section”). Onda dodajemo .height(…) i JQuery postavlja veličinu datom elementu. Kod – value * doc_height – ovde izvršava množenje koje smo ranije pominjali. Na primer visina objekta je 0,25 i ovaj broj se množi sa vrednošću doc_height. Math.floor() zaokružuje proračunati rezultat.

Na primer, doc_height je 5197 je vrednost objekta koji će biti pomnožen sa 0.25 što znači da dobijamo 1299.25. Math.floor() zaokružuje vrednost na 1299. Dobijamo $.( “.ufo_section” ).height(1299); i to je veličina sekcije.

 

Kompletan HTML,CSS i JS

izrada-web-sajtova-alien26

Pogledajte rezultat