Jak vytvořit útržkovou stránku. Zanechte své kontaktní údaje

Útržek je stránka, která je umístěna na webu, když je z toho či onoho důvodu nedostupná. Například když dokončujete nebo měníte design webu a v tuto chvíli je nedostupný nebo se zobrazuje nějak nesprávně. V tuto chvíli by bylo vhodné umístit stub stránku, na které bude napsáno, že na webu probíhá údržba.

Takže začneme...

Uděláme jednoduchý zástupný symbol s obrázkem na pozadí a textem, který .

Vytvořme si v počítači složku, do které umístíme všechny potřebné soubory pro náš útržek.

V této složce vytvoříme další složku s názvem obrázky. Do něj umístíme náš obrázek na pozadí a případně další obrázky, které mohou být při práci potřeba.

Otevřete program Notepad++ (nebo podobný, například Notepad). tvoříme nový dokument. Další - Soubor - Uložit jako, vyberte naši složku se útržkem a uložte dokument s názvem index.html

Toto by nyní mělo být v naší složce:

Otevřete soubor index.html v našem editoru (po uložení by se vám měl otevřít). Nyní se musíme ujistit, že kódování tohoto souboru je nastaveno správně. Chcete-li to provést, přejděte na položku nabídky „Kódování“ a klikněte na „Převést na UTF-8“

Aby nedošlo k náhodné ztrátě dosaženého výsledku při práci, doporučuji dokument při práci pravidelně ukládat. To lze provést v nabídce "Soubor" nebo klávesovou zkratkou "Ctrl + S".

V editoru napíšeme následující kód:

Každá webová stránka se skládá z těchto značek.

Nyní přidáme název naší stránce, protože nebude moc hezké, když ji někdo otevře a v názvu záložky prohlížeče uvidí index.html (můžete stránku otevřít v prohlížeči a uvidíte, co se stane). Chcete-li to provést, přidejte následující kód mezi a:

Na webu probíhá údržba

Obrázek na pozadí

Nyní vybereme obrázek na pozadí pro náš zástupný symbol a vrátíme se k úpravám stránky.

Chcete-li to provést, přejděte na Obrázky Google a vyhledejte zajímavý obrázek, který by mohl sloužit jako pozadí pro naši stránku. Aby naše stránka vypadala dobře na velkých obrazovkách, je důležité vybrat obrázek o šířce alespoň 1920 pixelů. Vstoupil jsem do vyhledávacího pole a vybral jeden z obrázků.

Otevřete obrázek v plné velikosti a uložte jej do složky obrázků. Pak to přejmenujeme. Říkejme tomu bg (nezapomeňte na formát obrázku, v mém případě je to jpg).

Tady je to, co jsem sebral. Toto je fotka města Chicago. Na obrázek na pozadí webu se to podle mě docela hodí.

Ke stránce připojíme obrázek na pozadí pomocí stylů CSS:

Na webu probíhá údržba

Text se bude skládat z nadpisu a vlastně z odstavce textu.

Na webu probíhá údržba

Co se stalo:

Nyní přidáme naše kontakty, aby nás návštěvníci mohli kontaktovat okamžitě a nečekali, až budou práce na webu dokončeny.

Přidejme 3 bloky obsahující telefon, E-mailem a Skype.

Probíhá údržba webu Na webu probíhá údržba, vraťte se později!

Na webu právě probíhá inženýrské práce. Vraťte se prosím později nebo nás kontaktujte jedním z následujících způsobů:

Tel.: 333-33-33

E-mailem: [e-mail chráněný]

Skype: admsite_ru

Nezbývá než pracovat se styly.

Zvětšeme nadpis, zarovnejme jej na střed a snižme blíže ke středu obrazovky.

Zvětšeme písmo textového odstavce na dvacet pixelů a udělejme od nadpisu malé odsazení. V dolní části textu také uděláme ohraničení, které jej oddělí od kontaktů.

Udělejme bloky s kontakty ve 3 sloupcích, zvětšíme písmo, zarovnáme každý blok na střed a změníme barvu textu.

Probíhá údržba webu Na webu probíhá údržba, vraťte se později!

Na webu v současné době probíhají technické práce. Vraťte se prosím později nebo nás kontaktujte jedním z následujících způsobů:

Tel.: 333-33-33

E-mailem: [e-mail chráněný]

Skype: admsite_ru

V důsledku toho máme zástupnou stránku, kterou můžeme použít, když na webu probíhají technické práce.

Když web čeká na spuštění nebo je v rekonstrukci, je potřeba návštěvníky webu upozornit, že se blíží otevření. A dokonalým řešením tohoto problému je tvořit vstupní stránka s patřičným upozorněním.

Jak se vyvíjely moderní nástroje pro vývoj webu, vyvíjely se stránky jako tyto jednoduché stránky s textem do zajímavějších řešení.

Vytvoření takového zástupného symbolu pro web zvyšuje úroveň očekávání návštěvníků, a tím mezi nimi vyvolává zájem. Kromě jednoduchého upozornění je také možné shromažďovat informace o zainteresovaných uživatelích vložením přihlašovacích formulářů a zpětná vazba.

V tomto tutoriálu vytvoříme právě takový útržek webu, který bude obsahovat formulář pro předplatné a odpočítávací časovač, implementovaný pomocí pluginu jQuery od Keitha Wooda.

Potřebné materiály na lekci:

• Jakýkoli obrázek na pozadí
• Čas a trpělivost.

index.html - hlavní soubor projektu

Složka „js“ – složka se skripty JavaScript/JQuery

složka „img“ - složka s obrázky projektů

Složka „css“ – složka se šablonami projektových stylů (soubory css)

Začněme

První fází práce bude připojení k hlavnímu html souboru stylů a knihoven jquery.
Soubory zahrneme do značky head.

Již brzy s Counter

HTML

Pojďme vytvořit označení pro náš html dokument. Všechny prvky stránky budou uvnitř tagu div s identifikátorem „container“. Uvnitř tohoto bloku budeme mít záhlaví, počítadlo, formulář zpětné vazby a zápatí (spodní blok s autorským právem).

Náš web bude již brzy OMLOUVÁME SE ZA NEPŘÍJEMNOSTI

MUSÍTE ČEKAT...

POŠLETE MI O TOM PODROBNOSTI

Copyright – 1stwebdesigner.com – 2014

Všimněte si, že jsme nechali div s ID "počítadlo" prázdné. Tento identifikátor později použijeme k tomu, abychom jej přiřadili k našemu pluginu jquery a přidali k němu styly css.

CSS

Nyní vytvoříme css soubor pro náš projekt, který bude obsahovat všechny styly. Nejprve přidáme styly pro hlavní prvky: tělo, h1, h2 a blok s identifikátorem „kontejner“. U bloku „kontejner“ zadáváme šířku v procentech, aby se měnila v závislosti na velikosti okna prohlížeče.

Pro značku h1 použijte transformaci CSS3, která jí umožní otáčet se o 360 stupňů podél osy X. O této vlastnosti si můžete přečíst více.

Text ( barva: #dadada; výška řádku: 1,75; šířka: 100 %; pozadí: url(../img/background.jpg)center; font-family: "Open Sans"; ) h1,h2( barva: # fff; výška řádku: 1,16667; zarovnání textu: střed; transformace textu: velká písmena; stín textu: 2px 2px 2px rgba(150,150,150,1); ) h1 (velikost písma: 43px; rodina písem: Montserrat; písmo -váha: 700; ohraničení: 2px přerušované #fff; okraj-horní: 50px; odsazení: 10px; kurzor: ukazatel; -webkit-přechod: všechny .8s snadné; -moz-přechod: všechny .8s snadné; -o-přechod : lehkost všech 0,8s; přechod: lehkost všech 0,8s; ) h1:hover ( -webkit-transform: rotationX(360deg); -moz-transform:otočteX(360deg); -ms-transform:otočteX(360deg); -o -transform: rotationX(360deg); transform: rotationX(360deg); ) h2 ( font-size: 30px; font-weight: 300; margin-top: 30px; ) .container ( width: 58%; margin: 40px auto 0 ; ) .details ( margin-top: 30px; color: #fff; text-align: center; text-shadow: 2px 2px 2px rgba(150,150,150,1); )

Button,input,textarea (velikost písma: 16px; max.šířka: 100%; okraj: 0; border-radius: 0; svislé zarovnání: základní čára; -webkit-box-sizing: border-box; -moz-box -sizing: border-box; box-sizing: border-box; ) textarea ( overflow: auto; vertical-align: top; ) input,textarea ( background: #6e6e6e; background: rgba(169,169,169,0.3); border: 1px solid #f4f4f4; barva: #fff; váha písma: 700; mezera mezi písmeny: 1px; výplň: 12px; transformace textu: velká písmena; ) input:focus,textarea:focus ( obrys: 0; ) button:hover,button :focus,input:focus,input:hover ( pozadí: #ff8721; barva: #fff; obrys: 0; ) tlačítko,vstup ( -webkit-vzhled: tlačítko; kurzor: ukazatel; ) tlačítko,vstup ( pozadí: #ffab00 ; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; ) .form-field ( position: relativní; )

Dalším krokem je vytvoření stylu pro různé prohlížeče pro textové pole.

::-webkit-input-placeholder ( barva: #fff; ) ::-moz-placeholder ( barva: #fff; neprůhlednost: 1; ) ::-ms-input-placeholder ( barva: #fff; neprůhlednost: 1; ) .placeholder ( barva: #ff; )

Nyní vytvoříme styly pro náš pult. Dovolte mi připomenout, že v html dokumentu je umístěn v bloku div s identifikátorem „counter“.

#counter ( margin-top: 28px; ) .countdown_section ( color: #dadada; display: inline-block; font-size: 12px; text-align: center; width: 25%; letter-spacing: 1px; border-left : 1px přerušovaná #dadada; border-color: rgba(218,218,218,0,8); padding: 42px 12px 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border -box; text-shadow: 2px 2px 2px rgba(150,150,150,1); text-transform: velká písmena; ) .countdown_section:first-child ( border-left: 0; ) .countdown_amount ( color: #fff; display: block; font-family: "Open Sans"; font-size: 60px; font-weight: 700; letter-spacing: normal; line-height: 1; )

Nyní přidáme styly pro formulář zpětné vazby. Maximální šířka formuláře bude 610px a tomuto formuláři nastavíme relativní umístění (position:relative). Umístíme tlačítko pro odeslání zprávy napravo od textového bloku a nastavíme jeho absolutní umístění (position:absolute).

#subscribe ( max-width: 610px; position: relativní; margin: 20px auto 0; ) #subscribe-form .form-field ( margin-right: 180px; ) #subcribe_email ( border-right: 0; ) #subscribe-form .form-submit ( výška: 50px; pozice: absolutní; vpravo: 0; nahoře: 0; šířka: 180px; ) #subcribe_email,#subscribe_submit ( šířka: 100 %; zobrazení: blok; výška: 55px; )

A na závěr přidáme vlastnosti pro prvky bloku zápatí.

Zápatí ( font-size: 13px; text-align: center; margin-top: 25px; text-transform: largecase; text-shadow: 2px 2px 2px rgba(150,150,150,1); ) footer a ( color: #fff; )

Aby naše stránka byla responzivní, přidáme dotazy na média. Můžete si přečíst více o této nemovitosti (v angličtině)

@media only screen a (max-width: 720px) ( footer(margin-bottom: 40px; ) ) @media only screen and (max-width: 680px) ( .countdown_amount (font-size: 48px; ) ) @media only obrazovka a (maximální šířka: 540px) ( .jedna-polovina (šířka: 100%; ) .odpočet_sekce (odpočet: 28px 6px 20px; ) #subcribe_email(ohraničení: 1px plný #fff;) #subscribe-form .form-submit ( margin: 0 auto; right: auto; position: static; ) #subscribe-form .form-field ( margin: 0 0 14px; ) ) @media only screen and (max-width: 480px) ( h1 ( font-size) : 30px; ) h2(font-size: 25px;) .countdown_section ( border: none; padding: 20px 20px; font-size: 13px; text-align: center; ) .countdown_amount ( font-size: 40px; padding: 0 0 10px 0; ) #counter(width: 30%; margin:0 auto;) ) @media only screen and (max-width: 360px) ( h2(font-size: 22px;) .countdown_section ( padding: 21px 26px 21px) 15px; ) .countdown_amount (velikost písma: 36px; ) )

Pokud zkontrolujete zobrazení stránky v prohlížeči, mělo by vypadat takto:

JQuery

Upozorňujeme, že nezobrazujeme počítadlo. Aby se zobrazil, musíte před uzavírací značku body přidat následující kód. Předtím si však stáhněte soubor pluginu a uveďte cestu k souboru.

Poté přidejte následující kód pro zobrazení našeho počítadla. Datum na měřiči si můžete změnit dle svého přání. Stačí zadat požadované datum v parametru „launchdate“.

$(document).ready(function() ( var launchdate = new Date(2014, 6 - 1, 7); $("#counter").countdown(( till: launchdate )); ))(jQuery);

Závěr

Gratulujeme! Právě jste vytvořili skvělou stránku odpočítávání. Tato stránka vám umožní informovat návštěvníka o datu spuštění vašeho webu a neztratit ho.

Doufám, že se vám tato lekce líbila. Zanechte své připomínky a dotazy, vždy je rád zodpovím.

Pokud plánujete redesign svého webu, provádíte na něm běžnou údržbu nebo spouštíte nový webový zdroj, pak je velmi důležité, aby návštěvníci nebyli vítáni prázdnou stránkou. Lidé, kteří stránku navštíví, budou ztraceni v tajemstvích toho, co se děje, a to není příliš dobré. Nejlepší je postarat se o uživatele a informovat je o brzkém otevření nebo obnovení webu pomocí speciální HTML stránky. V běžné řeči se taková stránka nazývá „útržek“. Jeho důležitost lze jen stěží přeceňovat, zvláště pokud chcete o svém webu mluvit a trochu ho propagovat. Existují dva typy útržku: je to buď statická stránka, která uživatelům sděluje potřebné informace, nebo stránka, která vzbuzuje zvědavost a nutí návštěvníka, aby se například přihlásil k odběru upozornění. FreelanceToday vám nabízí 10 bezplatných HTML šablon pro vytvoření atraktivních zástupných symbolů pro vaše webové stránky.

Heartbeat je jednoduchá a stylová HTML šablona. Díky ostrému monochromatickému obrázku na pozadí a časovači odpočítávání je tento plugin ideální pro obchodní weby.

Šablona Moon je skvělá pro PR webu. Na stránce je několik bodů, kam můžete umístit důležitá informace a odpočítávací časovač. Stránka je responzivní, byla vytvořena pomocí HTML5 a CSS3, zobrazuje se ve většině prohlížečů a dobře vypadá mobilní zařízení.

Layla je jednou z nejlepších bezplatných HTML šablon pro vytvoření stylového zástupného symbolu. Dobré barevné provedení, správná síťovina a elegantní vzhled aby byla tato šablona ideální pro použití na módních webech.

Skvělá šablona pro různé prohlížeče pro vytvoření přísného útržku. Snadno se přizpůsobuje a dobře se zobrazuje na mobilních zařízeních. Nechybí odpočítávací měřič a možnost připojení melodie.

Tato šablona je čistá a moderní design. Výhody: adaptivní design, kontaktní formulář, kompatibilita napříč prohlížeči. Šablona byla vytvořena pomocí zdrojů, jsou zahrnuty všechny obrázky.

Dobrý zástupný symbol, který by byl vhodný na turistických webech. Vlastnosti šablony: 8 barevných schémat, validace W3C HTML/CSS, odpočítávání, kontaktní formulář a možnost přihlásit se k odběru upozornění, efekt paralaxy na pozadí, navigační lišta.

Zástrčka, která má vážnou funkčnost. Šablonu lze snadno přizpůsobit a je kompatibilní s většinou prohlížečů. Plusy: Google mapy, odpočítávací časovač, sekce, kde můžete zveřejňovat informace o svém týmu, zápatí s kontaktními informacemi.

UX šablona je vhodná pro většinu webů. Zástrčka má animovaný časovač, Kontaktní formulář, ikony sociální sítě. Šablonu lze snadno přizpůsobit a nevyžaduje speciální znalosti HTML/CSS. Šablona je responzivní a pro různé prohlížeče.

Stylová a zároveň funkční zástrčka. Vlastnosti: 100% responzivní design, kompatibilita mezi prohlížeči, Google Maps, integrace Twitteru, dva styly záhlaví s efektem paralaxy a posuvníkem. K dispozici je také odpočítávací časovač, kde můžete rychle opravit datum spuštění webu.

Elegantní HTML šablona vhodná pro weby různých témat. Zástrčka nemá žádné speciální zvonky a píšťalky, ale má vše, co potřebujete: časovač, centrál textový blok Pro informační zpráva, ikony sociálních sítí. Šablona je responzivní a perfektně se zobrazuje na mobilních zařízeních.

V poslední době se na internetu objevuje mnoho nových zdrojů: některé byly spuštěny poměrně nedávno, jiné se teprve chystají a některé právě začaly vyvíjet internetový obchod nebo jiný projekt a uvažují o jeho spuštění za šest měsíců nebo za rok.

Dají se některé marketingové prvky využít ještě předtím, než se projekt se vší funkčností zrodí? Nepochybně! Jednou z prvních fází marketingu je komunikace s návštěvníkem ještě nefunkčního webu pomocí stub stránek nebo tzv. splash stránek.

Splash stránky nepoužívá mnoho lidí, takže jejich přítomnost na webu poskytuje výhodu a brzký impuls k rozvoji. Ne každá zástrčka však bude fungovat stejně efektivně. Níže uvádíme několik tipů, jak vytvořit správnou vstupní stránku a spustit projekt v budoucnu, který již má potenciální publikum.

Principy efektivní zástupné stránky

Zástupné symboly jsou v podstatě vstupní stránky a platí pro ně mnoho zásad efektivních vstupních stránek. Pojďme se blíže podívat na ty nejdůležitější a podívat se na pár příkladů.

1. Znát limity pro zjednodušení stránky

Na jedné straně by stránka měla být co nejjednodušší. Bylo by ale chybou nechat jen zprávu, že stránka je ve vývoji.

Návštěvník má logickou otázku: kde jsem skončil a proč potřebuji provést tu či onu akci, o kterou jsem požádán (například telefonický kontakt). Přidejte na stránku trochu více informací, aby byla co nejužitečnější jak pro návštěvníka, tak pro vás.

2. Poskytněte informace o sobě

Ukažte návštěvníkovi, že je přesně tam, kde má být. Řekněte mu, kde používá krátký text a seznam s odrážkami. Toto je vaše první setkání s člověkem, kde obvykle začínáte?

3. Můžete udělat video recenzi

Některé weby praktikují zveřejňování videorecenzí. Tento dobrá cesta vyprávějte stále jasněji o tom, jak můžete být pro návštěvníka užiteční.

Video recenze jsou dobrým nástrojem, ale nepřehánějte to. Bylo by chybou otravovat návštěvníka automatickým zapínáním video nebo audio efektů, pokud ovšem vaše budoucí stránka není věnována online hrám.

4. Použijte logo nebo jiné obrázky související s vaším odvětvím

Obrázky, které na webu používáte, by měly být spojeny s oblastí činnosti společnosti nebo s tématem projektu. Ženy a kočky jsou skvělé, ale ne vždy vhodné. Takto může vypadat útržek stránky rádia:

A zde se kreativita designéra dobře projevuje, i když není hned jasné, že se stránka bude věnovat designu.

5. Řekněte nám, co můžete očekávat

Je dobře, že existujete a plánujete se přiblížit uživatelům internetu, ale také nám řekněte, proč by se lidé měli na vaše stránky vracet později? Jaké máte plány s projektem nebo jeho funkčností? Nebo snad něco jiného?

Přidejte intriky, abyste vzbudili zvědavost. Jako intriku lze použít například zprávu, že vaše služba bude technologickým průlomem nebo že společnost poskytne slevy či volnosti prvním registrovaným zákazníkům. Doplňkové služby. Níže je příklad toho, jak kluci z Netpeaku vytvořili intriky před uspořádáním konference 8p, hráli na tolik diskutovaném konci světa v roce 2012. Mnohým se tento nápad zdál kreativní a odkaz na pahýl sdíleli se svými přáteli na sociálních sítích.

Nemusíte vytvářet intriky, stačí dotyčného povzbudit, aby se vrátil později. Vstupní stránka by měla návštěvníka nejen informovat, ale také ho povzbudit, aby stránku sdílel se svými přáteli a v budoucnu se vrátil.

6. Zanechte své kontaktní údaje

V závislosti na tématu budoucího webu je někdy vhodné ponechat pouze e-mailovou adresu, v jiných případech - podrobnější informace, včetně fyzické adresy kanceláře a její otevírací doby.

V budoucnu budete muset vytvořit komunitu. Udělejte to právě teď pomocí hotových nástrojů – sociálních sítí. Kromě toho, že přítomnost těchto odkazů zvýší důvěru ve společnost a budoucí web, budou lidé ve vaší komunitě vždy informováni o novinkách o fázích vývoje nebo spuštění zdroje.

Nicméně ne sociální profily prázdné, naplňte je užitečným obsahem, aby se vaše cílové publikum mělo k čemu přihlásit. Lidé nemají rádi nebo nesledují účty s nízkou autoritou, účty s nulovou autoritou nebo profily se standardními avatary (jako vejce vejci na Twitteru).

8. Umístěte formulář odběru aktualizací

Kromě používání sociálních sítí propojte emailové newslettery. Sbírat emailová adresa své potenciální publikum. Můžete jim poslat zprávu pouze při spuštění webu, nebo to můžete dělat pravidelně, informovat je o tom, v jaké fázi je vývoj nebo nějaké jiné důležité ve vašem tématu a samozřejmě užitečné pro lidi, kteří vám důvěřují jejich kontakty, aspekty .

Kromě formuláře pro zasílání e-mailů můžete využít i další kanály komunikace s klienty/publikem, například blog, přidat jej do subdomény nebo podsložky a nainstalovat tam standardní WordPress. Možná bude mít tento blog v budoucnu nejen pozitivní dopad jako nástroj příchozího marketingu, ale také pomůže zvýšit autoritu zdroje v očích vyhledávačů.

9. Přidejte výzvu k akci

Vaším prvním cílem je vybudovat si počáteční publikum a přimět lidi, aby se vraceli, jakmile bude web aktivní. Vyzváním uživatele k akci sdělíte své záměry a připomenete návštěvníkovi jejich možnosti. „Přihlaste se k odběru“, „Nejdříve se podívejte“, „Vraťte se“, „Kontaktujte nás“, „Přečtěte si o nás více“, „Sledujte nás na sociálních sítích“ atd. Použijte jednu nebo více výzev k akci v závislosti na velikosti pahýlové stránky. Pokud jednoduše napíšete, že stránka je ve výstavbě, tak se na ni v budoucnu vrátí málokdo z vašich současných návštěvníků.

V níže uvedeném příkladu je výzva k akci umístěna vpravo nahoře se šipkou a také opět ve spodní části stránky spolu s formulářem předplatného oznámení.

10. Neoptimalizujte pahýlové stránky pro vyhledávače

Papírové stránky jsou samozřejmě také dobré pro SEO, protože můžete začít propagovat web, aniž byste jej měli. Minimálně bude zdroj již v indexu, nanejvýš odkazy na něj již mohou být umístěny jak na fórech nebo na sociálních sítích, tak v tištěných médiích.

A zatímco pahýlové stránky lze použít pro SEO, slouží spíše k marketingovým účelům. Důrazně se doporučuje nekazit první dojem ze zdroje SEO textem.

Doufám, že vám tyto tipy pomohou nyní vyplnit technické specifikace pro programátory. Níže uvádíme další dva příklady pro motivaci. :)

Přijďte se svým nápadem a založte si pahýlovou stránku ještě dnes, abyste při spuštění svého webu nemuseli hledat publikum, ale mohli s ním dále pracovat!

Krásná webová stránka zůstane v paměti návštěvníka velmi dlouho, a to je nepochybně úžasné. Dnes bychom rádi hovořili o skvělé zásuvce pro váš web, konkrétně o interaktivní animované stránce, která bude neustále v pohybu, kromě toho, že bude reagovat na kurzor myši a provádět akce. Cílem je vytvořit zemi a letadlo, které bude neustále klouzat; když se kurzor pohne, letadlo změní svou polohu. Tento druh interaktivity vypadá velmi cool a příjemně.

PRAMENY

Tuto stránku lze použít jako pozadí webu, stránku s malou textovou zprávou nebo zástupný symbol na stránce; v žádném případě nemůžete udělat chybu. Tohoto efektu je dosaženo díky 3D knihovně jQuery-Three.js.

Krok 1. HTML

Naše značkování a styly budou docela jednoduché, protože Three.js udělá veškerou práci a parametry, které jsme zadali v JS, vše, co musíme udělat, je zavolat tyto funkce přiřazením id="world":

Styly jsou také docela jednoduché, takže se jimi nebudeme zdržovat a přejdeme rovnou k dalšímu kroku.

Krok 2. JS

Veškeré zpracování událostí bude provádět JS a Three.js. Abychom takové rozložení implementovali, nastavili jsme následující hodnoty pro smyčkování, náhodnou událost.

Barvy var = ( červená: 0xf25346, žlutá: 0xedeb27, bílá: 0xd8d0d1, hnědá: 0x59332e, růžová: 0xF5986E, hnědáTmavá: 0x23190f, modrá: 0x68c3c0, zelená: 2086,295, zelená: 8A 2829,255 6 5,); var scéna, kamera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, kontejner; function createScene() ( // Získejte šířku a výšku obrazovky // a použijte je k úpravě // poměru stran kamery a velikosti rendereru. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Vytvořte scénu. scene = new THREE .Scene(); // Přidejte do scény efekt mlhy FOV. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Vytvořte poměr stran kamery = WIDTH / HEIGHT; fieldOfView = 60 ; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Poloha kamery camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Vytvoření vykreslovacího modulu vykreslování = new THREE.WebGLRenderer(( // Zprůhlednění pozadí, výkon vyhlazování alpha: true, antialias: true )); // nastavení velikosti vykreslovacího modulu na celou obrazovku renderer.setSize( WIDTH, HEIGHT); // povolit vykreslování stínů .shadowMap.enabled = true;//Přidat vykreslování do kontejneru událostí DOM a DIV = document.getElementById("world"); container.appendChild(renderer.domElement); //Reakce window.addEventListener("resize", handleWindowResize, false); ) //Reakce funkcí funkce handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, stín Světlo; function createLights() ( // Barevný přechod světla obloha, země, intenzita hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Paralelní paprsky shadowLight = new THREE.DirectionalLight(0xffffff, .position.); shadowLight set(0, 350, 350); shadowLight.castShadow = true; // definuje viditelnou oblast promítaného stínu shadowLight.shadow.camera.left = -650; shadowLight.shadow.camera.right = 650; shadowLight. shadow.camera.top = 650; shadowLight.shadow.camera.bottom = -650; shadowLight.shadow.camera.near = 1; shadowLight.shadow.camera.far = 1000; // Velikost mapy stínů shadowLight.shadow.mapSize. width = 2048; shadowLight .shadow.mapSize.height = 2048; // Přidání světel do scény scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //rotace podél osy x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //vytvoří materiál var mat = new THREE.MeshPhongMaterial(( barva: Colors.lightgreen, shading: THREE.FlatShading, )); //vytvoříme síť objektu this.mesh = new THREE.Mesh(geom, mat); //příjem stínů this.mesh.receiveShadow = true; ) Orbit = function() ( var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Sun); ) Sun = function() ( this.mesh = new THREE.Object3D( ); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial(( barva: Colors.yellow, stínování: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom) , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Vytvořte prázdný kontejner pro cloud this.mesh = new THREE.Object3D( ); // Geometrie a materiál krychle var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( color: Colors.white, )); var nBlocs = 3 + Math.floor(Math. random( ) * 3); for (var i = 0; i

Výsledkem je skvělý webový plugin s odezvou a přizpůsobivostí.