Как да направите страница за мъниче. Оставете вашата информация за контакт

Мъничето е страница, която се поставя на сайт, когато той е недостъпен по една или друга причина. Например, когато финализирате или променяте дизайна на сайта и в този момент той е недостъпен или се показва по някакъв начин неправилно. Би било препоръчително в този момент да поставите страница за мъниче, на която да пише, че сайтът е в процес на поддръжка.

Така че да започваме...

Ще направим прост контейнер с фоново изображение и текст, който .

Нека създадем папка на компютъра, в която ще поставим всички необходими файлове за нашия мъниче.

В тази папка ще създадем друга папка, наречена изображения. В него ще поставим нашето фоново изображение и, евентуално, други изображения, които може да са необходими по време на работа.

Отворете програмата Notepad++ (или подобна, например Notepad). Ние създаваме нов документ. След това - Файл - Запазване като, изберете нашата папка с мъниче и запишете документа с името index.html

Това е, което сега трябва да бъде в нашата папка:

Отворете файла index.html в нашия редактор (след като го запазите, той трябва да бъде отворен за вас). Сега трябва да се уверим, че кодирането на този файл е зададено правилно. За да направите това, отидете на елемента от менюто „Кодиране“ и щракнете върху „Конвертиране в UTF-8″

За да не загубите случайно постигнатия резултат по време на работа, препоръчвам периодично да запазвате документа по време на работа. Това може да стане в менюто "Файл" или с клавишната комбинация "Ctrl + S".

Пишем следния код в редактора:

Всяка уеб страница се състои от тези тагове.

Сега нека добавим заглавие към нашата страница, защото няма да е много приятно, когато някой я отвори и види index.html в заглавието на раздела на браузъра (можете да отворите страницата в браузъра и да видите какво се случва). За да направите това, добавете следния код между и:

Сайтът е в процес на поддръжка

Фонова картина

Сега нека изберем фоново изображение за нашия контейнер и след това да се върнем към редактирането на страницата.

За да направите това, отидете в Google Images и потърсете интересна снимка, която може да служи като фон на нашата страница. Важно е да изберете изображение с ширина поне 1920 пиксела, за да изглежда страницата ни добре на големи екрани. Влязох в лентата за търсене и избрах една от снимките.

Отворете изображението в пълен размер и го запазете в папката с изображения. След това го преименуваме. Нека го наречем бг (не забравяйте за формата на изображението, в моя случай това е jpg).

Ето какво взех. Това е снимка на град Чикаго. Според мен е доста подходящ за фоново изображение на сайта.

Прикрепяме фоново изображение към страницата, използвайки CSS стилове:

Сайтът е в процес на поддръжка

Текстът ще се състои от заглавие и всъщност абзац от текста.

Сайтът е в процес на поддръжка

Ето какво се случи:

Сега ще добавим нашите контакти, за да могат посетителите да се свържат с нас веднага, а не да чакат работата по сайта да приключи.

Нека добавим 3 блока, съдържащи телефона, електронна пощаи Skype.

Сайтът е в процес на поддръжка Сайтът е в процес на поддръжка, проверете отново по-късно!

В момента обектът е в процес инженерни работи. Моля, върнете се по-късно или се свържете с нас по един от следните начини:

Тел.: 333-33-33

Електронна поща: [имейл защитен]

Skype: admsite_ru

Остава само да работите със стиловете.

Нека да увеличим заглавието, да го подравним към центъра и да го спуснем по-близо до центъра на екрана.

Нека увеличим шрифта на текстовия параграф до двадесет пиксела и направим малък отстъп от заглавието. Също така ще направим граница в долната част на текста, която ще го отдели от контактите.

Нека да направим блокове с контакти в 3 колони, да увеличим шрифта, да подравним всеки блок към центъра и да променим цвета на текста.

Сайтът е в процес на поддръжка Сайтът е в процес на поддръжка, проверете отново по-късно!

В момента се извършват технически работи по обекта. Моля, върнете се по-късно или се свържете с нас по един от следните начини:

Тел.: 333-33-33

Електронна поща: [имейл защитен]

Skype: admsite_ru

В резултат на това имаме запазена страница, която можем да използваме, когато сайтът е в процес на техническа работа.

Когато даден сайт чака стартиране или е в процес на обновяване, има нужда да уведомите посетителите на сайта, че предстои да бъде отворен. И идеалното решение на този проблем е да създаваме целева страницас подходящо уведомление.

С развитието на съвременните инструменти за уеб разработка, страници като тези са се развили от прости страницис текст в по-интересни решения.

Създаването на такъв контейнер за сайта повишава нивото на очакване на посетителите, като по този начин създава интерес сред тях. В допълнение към простото уведомяване е възможно също така да се събира информация за заинтересованите потребители чрез вмъкване на формуляри за абонамент и обратна връзка.

В този урок ще създадем точно такъв файл за сайт, който ще съдържа форма за абонамент и таймер за обратно отброяване, реализиран с помощта на плъгин jQuery от Keith Wood.

Необходими материали за урока:

• Всяко фоново изображение
• Време и търпение.

index.html - основен файл на проекта

Папка “js” – папка с JavaScript/JQuery скриптове

папка “img” - папка с изображения на проекта

Папка “css” – папка със стилови таблици на проекта (css файлове)

Да започваме

Първият етап от работата ще бъде свързването към основния html файл на таблици със стилове и библиотеки jquery.
Включваме файловете в тага head.

Очаквайте скоро с брояч

HTML

Нека създадем маркиране за нашия html документ. Всички елементи на страницата ще бъдат вътре в таг div с идентификатор „контейнер“. Вътре в този блок ще имаме заглавки, брояч, формуляр за обратна връзка и долен колонтитул (долният блок с авторски права).

Нашият уебсайт идва скоро. ИЗВИНЯВАМЕ СЕ ЗА НЕУДОБСТВОТО

ТРЯБВА ДА ИЗЧАКАТЕ...

ИЗПРАТЕТЕ МИ ПОДРОБНОСТИ ЗА НЕГО

Авторско право - 1stwebdesigner.com - 2014

Забележете, че оставихме div с ID "брояч" празен. По-късно ще използваме този идентификатор, за да го асоциираме с нашия плъгин jquery и да добавим css стилове към него.

CSS

Сега нека създадем css файл за нашия проект, който ще съдържа всички стилове. Първо, нека добавим стилове за основните елементи: тяло, h1, h2 и блока с идентификатора „контейнер“. За блока „контейнер“ посочваме ширината като процент, така че да се променя в зависимост от размера на прозореца на браузъра.

За тага h1 приложете CSS3 трансформация, която ще му позволи да се завърти на 360 градуса по оста X. Можете да прочетете повече за това свойство.

Основен текст (цвят: #dadada; височина на реда: 1,75; ширина: 100%; фон: url(../img/background.jpg)center; семейство шрифтове: "Open Sans"; ) h1,h2( цвят: # fff; line-height: 1.16667; text-align: center; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1); ) h1 (font-size: 43px; font-family: Montserrat; шрифт -тегло: 700; граница: 2px пунктирана #fff; margin-top: 50px; padding: 10px; курсор: показалец; -webkit-transition: всички .8s лекота; -moz-transition: всички .8s лекота; -o-transition : всички .8s лекота; преход: всички .8s лекота; ) h1:hover ( -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o -transform: rotateX(360deg); transform: rotateX(360deg); ) h2 (размер на шрифта: 30px; тегло на шрифта: 300; margin-top: 30px;) .container (ширина: 58%; margin: 40px auto 0 ; ) .details ( margin-top: 30px; цвят: #fff; text-align: center; text-shadow: 2px 2px 2px rgba(150,150,150,1); )

Button,input,textarea (размер на шрифта: 16px; максимална ширина: 100%; поле: 0; радиус на границата: 0; вертикално подравняване: базова линия; -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 плътен #f4f4f4; цвят: #fff; тегло на шрифта: 700; разстояние между буквите: 1px; подложка: 12px; преобразуване на текст: главни букви; ) input:focus,textarea:focus ( контур: 0; ) button:hover,button :focus,input:focus,input:hover (фон: #ff8721; цвят: #fff; контур: 0; ) бутон,въвеждане (-webkit-appearance: бутон; курсор: показалец; ) бутон,въвеждане (фон: #ffab00 ; -webkit-transition: всички .5s; -moz-transition: всички .5s; преход: всички .5s; ) .form-field (позиция: относителна; )

Следващата стъпка е да създадете стил за различни браузъри за текстовото поле.

::-webkit-input-placeholder (цвят: #fff;) ::-moz-placeholder (цвят: #fff; непрозрачност: 1;) ::-ms-input-placeholder (цвят: #fff; непрозрачност: 1; ) .placeholder ( цвят: #ff; )

Сега нека създадем стилове за нашия брояч. Нека ви напомня, че в html документ той се намира в блок div с идентификатор „брояч“.

#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 прекъсната #dadada; цвят на границата: 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: uppercase; ) .countdown_section:first-child ( border-left: 0; ) .countdown_amount ( цвят: #fff; дисплей: блок; семейство шрифтове: "Open Sans"; размер на шрифта: 60px; тегло на шрифта: 700; разстояние между буквите: нормално; височина на реда: 1; )

Сега нека добавим стилове за формуляра за обратна връзка. Максималната ширина на формуляра ще бъде 610px и ще зададем относителното позициониране за този формуляр (position:relative). Нека поставим бутона за изпращане на съобщение отдясно на текстовия блок и зададем абсолютното му позициониране (position:absolute).

#subscribe ( max-width: 610px; position: relative; margin: 20px auto 0; ) #subscribe-form .form-field ( margin-right: 180px; ) #subcribe_email ( border-right: 0; ) #subscribe-form .form-submit (височина: 50px; позиция: абсолютна; дясно: 0; горе: 0; ширина: 180px;) #subcribe_email,#subscribe_submit (ширина: 100%; дисплей: блок; височина: 55px;)

И накрая ще добавим свойства за елементите на долния блок.

Долен колонтитул (размер на шрифта: 13px; подравняване на текста: център; margin-top: 25px; преобразуване на текста: главни букви; text-shadow: 2px 2px 2px rgba(150,150,150,1); ) долен колонтитул a (цвят: #fff; )

За да направим нашата страница отзивчива, ще добавим медийни заявки. Можете да прочетете повече за този имот (на английски)

@media only екран и (максимална ширина: 720px) ( долен колонтитул(margin-bottom: 40px; ) ) @media only екран и (max-width: 680px) ( .countdown_amount ( font-size: 48px; ) ) @media only екран и (макс. ширина: 540px) (.one-half (ширина: 100%;) .countdown_section (padding: 28px 6px 20px;) #subcribe_email(border: 1px solid #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(размер на шрифта: 25px;) .countdown_section (рамка: няма; подложка: 20px 20px; размер на шрифта: 13px; подравняване на текста: център;) .countdown_amount (размер на шрифта: 40px; подложка: 0 0 10px 0; ) #counter(width: 30%; margin:0 auto;) ) @media only екран и (max-width: 360px) (h2(font-size: 22px;) .countdown_section (padding: 21px 26px 21px 15px; ) .countdown_amount ( размер на шрифта: 36px; ) )

Ако проверите показването на страницата в браузъра, тя трябва да изглежда така:

JQuery

Моля, обърнете внимание, че не показваме брояч. За да се появи, трябва да добавите следния код преди затварящия етикет body. Но преди това изтеглете файла на приставката, като посочите пътя до файла.

След това добавете следния код, за да покажете нашия брояч. Можете да промените датата на измервателния уред според вашите желания. Достатъчно е да посочите желаната дата в параметъра „launchdate“.

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

Заключение

Честито! Току-що създадохте страхотна страница с таймер за обратно отброяване. Тази страница ще ви позволи да информирате посетителя си за датата на стартиране на вашия сайт и да не го загубите.

Надявам се, че този урок ви е харесал. Оставете вашите коментари и въпроси, винаги се радвам да им отговоря.

Ако планирате редизайн на уебсайта си, извършване на рутинна поддръжка или стартиране на нов уеб ресурс, тогава е много важно посетителите да не бъдат посрещнати с празна страница. Хората, които посещават сайта, ще се изгубят в мистериите на случващото се, а това не е много добре. Най-добре е да се погрижите за потребителите и да ги информирате за скорошното отваряне или възобновяване на сайта, като използвате специална HTML страница. На общ език такава страница се нарича „мъниче“. Важността му трудно може да бъде надценена, особено ако искате да говорите за вашия сайт и да го популяризирате малко. Има два типа мъничета: това е или статична страница, която казва на потребителите информацията, от която се нуждаят, или страница, която предизвиква любопитство и принуждава посетителя, например, да се абонира за известия. FreelanceToday ви предлага 10 безплатни HTML шаблона за създаване на атрактивни контейнери за вашите уебсайтове.

Heartbeat е прост и стилен HTML шаблон. Яркото монохромно фоново изображение и таймерът за обратно отброяване правят този плъгин идеален за бизнес уебсайтове.

Шаблонът Moon е чудесен за PR на уебсайтове. Има няколко точки на страницата, където можете да поставите важна информацияи таймер за обратно отброяване. Страницата е адаптивна, създадена е с помощта на HTML5 и CSS3, показва се в повечето браузъри и изглежда добре на мобилни устройства.

Layla е един от най-добрите безплатни HTML шаблони за създаване на стилен контейнер. Добра цветова схема, правилна мрежа и елегантна външен виднаправи този шаблон идеален за използване в модни уебсайтове.

Страхотен шаблон за кръстосани браузъри за създаване на строг файл. Лесен за персонализиране и показване добре на мобилни устройства. Има таймер за обратно броене и възможност за свързване на мелодия.

Този шаблон е чист и модерен дизайн. Плюсове: адаптивен дизайн, форма за контакт, съвместимост между различни браузъри. Шаблонът е създаден с помощта на ресурси, всички изображения са включени.

Добър контейнер, който би бил подходящ за туристически уебсайтове. Характеристики на шаблона: 8 цветови схеми, W3C HTML/CSS валидиране, обратно броене, форма за контакт и възможност за абониране за известия, паралакс ефект на фона, лента за навигация.

Щепсел, който има сериозна функционалност. Шаблонът е лесен за персонализиране и съвместим с повечето браузъри. Плюсове: Google карти, таймер за обратно отброяване, секция, където можете да публикувате информация за вашия екип, долен колонтитул с информация за контакт.

UX шаблонът е подходящ за повечето уебсайтове. Щепселът има анимиран таймер, форма за контакти, икони социални мрежи. Шаблонът е лесен за персонализиране и не изисква специални познания по HTML/CSS. Шаблонът е адаптивен и кросбраузерен.

Стилен и същевременно функционален щепсел. Характеристики: 100% отзивчив дизайн, съвместимост между различни браузъри, Google Maps, Twitter интеграция, два стила на заглавки с паралакс ефект и плъзгач. Има и таймер за обратно отброяване, където можете бързо да коригирате датата на стартиране на сайта.

Елегантен HTML шаблон, подходящ за уебсайтове с различна тематика. Щепселът няма специални звънци и свирки, но има всичко необходимо: таймер, централа текстов блокЗа информационно съобщение, икони на социални мрежи. Шаблонът е адаптивен и се показва перфектно на мобилни устройства.

Напоследък в Интернет се появяват много нови ресурси: някои стартираха съвсем наскоро, други са на път да започнат, а някои току-що са започнали да разработват онлайн магазин или друг проект и мислят да го стартират след шест месеца или година.

Възможно ли е да се използват някои маркетингови елементи дори преди да се роди проектът с цялата му функционалност? Несъмнено! Един от първите етапи на маркетинга е комуникацията с посетителя на сайт, който все още не работи, с помощта на мъниче страници или така наречените splash страници.

Малко хора използват Splash страници, така че присъствието им в сайта дава предимство и ранен тласък за развитие. Въпреки това, не всеки щепсел ще работи еднакво ефективно. По-долу са някои съвети как да създадете правилната целева страница и да стартирате проект в бъдеще, като вече имате потенциална аудитория.

Принципи на ефективна страница с контейнер

Заместителите по същество са целеви страници и много от принципите на ефективните целеви страници се прилагат към тях. Нека да разгледаме по-подробно най-важните и да разгледаме няколко примера.

1. Познайте ограниченията за опростяване на страница

От една страна, страницата трябва да е възможно най-проста. Но би било грешка да оставите само съобщение, че сайтът е в процес на разработка.

Посетителят има логичен въпрос: къде се озовах и защо трябва да извърша това или онова действие, което се изисква от мен (например контакт по телефона). Добавете малко повече информация към страницата, за да я направите възможно най-полезна както за посетителя, така и за вас.

2. Предоставете информация за себе си

Покажете на посетителя, че е точно там, където трябва да бъде. Кажете му къде се намира с помощта на кратък текст и списък с водещи символи. Това е първата ви среща с човек, откъде обикновено започвате?

3. Можете да направите видео преглед

Някои сайтове практикуват публикуване на видео ревюта. Това добър начинкажете повече и по-ясно как можете да бъдете полезни на посетителя.

Видео ревютата са добър инструмент, но не прекалявайте. Би било грешка да дразните посетителя си с автоматично включване на видео или аудио ефекти, освен ако, разбира се, бъдещият ви сайт не е посветен на онлайн игри.

4. Използвайте лого или други изображения, свързани с вашата индустрия

Изображенията, които използвате в сайта, трябва да са свързани със сферата на дейност на компанията или темата на проекта. Жените и котките са страхотни, но не винаги са подходящи. Ето как може да изглежда страницата за мъниче за уебсайт на радио:

И тук креативността на дизайнера е добре показана, въпреки че не е ясно веднага, че сайтът ще бъде посветен на дизайна.

5. Кажете ни какво да очакваме

Хубаво е, че съществувате и планирате да станете по-близо до интернет потребителите, но също така ни кажете защо хората трябва да се върнат на вашия сайт по-късно? Какви са плановете ви за проекта или неговата функционалност? Или може би нещо друго?

Добавете интрига, за да събудите любопитството. Например, съобщение може да се използва като интрига, че вашата услуга ще бъде технологичен пробив или че компанията ще предостави отстъпки или безплатни за първите регистрирани клиенти. Допълнителни услуги. По-долу е даден пример за това как момчетата от Netpeak създадоха интрига, преди да организират 8p конференцията, играейки на много обсъждания край на света през 2012 г. Тази идея изглеждаше креативна за мнозина и те споделиха връзката към страницата за мъничета с приятелите си в социалните мрежи.

Не е нужно да създавате интриги, просто насърчете човека да се върне по-късно. Целевата страница трябва не само да информира посетителя, но и да го насърчава да сподели страницата с приятелите си и да се върне в бъдеще.

6. Оставете вашата информация за контакт

В зависимост от тематиката на бъдещия сайт, понякога е подходящо да оставите само имейл адрес, в други случаи - по-подробна информация, включително физическия адрес на офиса и работното му време.

В бъдеще ще трябва да създадете общност. Направете това още сега с помощта на готови инструменти – социалните мрежи. В допълнение към факта, че наличието на тези връзки ще повиши доверието в компанията и бъдещия сайт, хората, включени във вашата общност, винаги ще бъдат наясно с новини за етапите на развитие или стартиране на ресурса.

Въпреки това недейте социални профилипразни, напълнете ги с полезно съдържание, така че вашата целева аудитория да има за какво да се абонира. Хората не харесват и не следват акаунти с нисък авторитет, акаунти с нулев авторитет или профили със стандартни аватари (като яйце в Twitter).

8. Поставете форма за абонамент за актуализации

В допълнение към използването на социални мрежи, свържете имейл бюлетини. Събирайте имейл адресивашата потенциална аудитория сега. Можете да им изпратите съобщение само когато сайтът е стартиран или можете да го правите редовно, като ги информирате на какъв етап е развитието или някои други важни неща във вашата тема и, разбира се, полезни за тези хора, които ви се доверяват техните контакти, аспекти .

В допълнение към формата за изпращане на имейл можете да използвате други канали за комуникация с клиенти/аудитория, например блог, като го добавите към поддомейн или подпапка и инсталирате там стандартен WordPress. Може би този блог в бъдеще не само ще има положително въздействие като инструмент за входящ маркетинг, но и ще помогне за повишаване на авторитета на ресурса в очите на търсачките.

9. Добавете призив за действие

Вашата първа цел е да създадете първоначална аудитория и да накарате хората да се върнат, след като сайтът е активен. Призовавайки потребителя към действие, вие съобщавате вашите намерения и напомняте на посетителя за неговите възможности. „Абонирайте се“, „Вижте първо“, „Върнете се“, „Свържете се с нас“, „Прочетете повече за нас“, „Следвайте ни в социалните мрежи“ и др. Използвайте един или повече призиви за действие в зависимост от размера на страницата мъниче. Ако просто напишете, че сайтът е в процес на изграждане, тогава малко от настоящите ви посетители ще се върнат към него в бъдеще.

В примера по-долу призивът за действие се намира горе вдясно със стрелка, а също и отново в долната част на страницата, заедно с формата за абонамент за известия.

10. Не оптимизирайте страниците мъничета за търсачките

Разбира се, страниците за мъничета също са добри за SEO, тъй като можете да започнете да популяризирате сайт, без дори да имате такъв. Като минимум ресурсът вече ще бъде в индекса, като максимум вече можете да публикувате връзки към него както във форуми или в социални мрежи, така и в печатни медии.

И докато страниците за мъничета могат да се използват за SEO, те служат повече за маркетингова цел. Силно се препоръчва да не разваляте първото впечатление от ресурс със SEO текст.

Надявам се, че тези съвети ще ви помогнат да попълните технически спецификации за програмисти сега. По-долу има още два примера за мотивация. :)

Измислете идеята си и създайте още днес страница, така че когато стартирате сайта си, да не се налага да търсите аудитория, а да продължите да работите с нея!

Красивият уебсайт остава в паметта на посетителя за много дълго време и това несъмнено е прекрасно. Днес бихме искали да поговорим за чудесна приставка за вашия сайт, а именно интерактивна анимирана страница, която постоянно ще бъде в движение, в допълнение към реагирането на курсора на мишката и извършването на действия. Идеята е да се създаде земя и самолет, които постоянно да се плъзгат; когато курсорът се движи, самолетът ще променя позицията си. Този вид интерактивност изглежда много готино и приятно.

ИЗТОЧНИЦИ

Тази страница може да се използва като фон на уебсайт, страница с малко текстово съобщение или контейнер на страница; във всеки случай няма да сбъркате. Този ефект се постига благодарение на 3D библиотеката jQuery-Three.js.

Стъпка 1. HTML

Нашето маркиране и стилове ще бъдат доста прости, тъй като Three.js ще свърши цялата работа и параметрите, които посочихме в JS, всичко, което трябва да направим, е да извикаме тези функции, като присвоим id="world":

Стиловете също са доста прости, така че няма да се спираме на тях и да преминем направо към следващата стъпка.

Стъпка 2. JS

Цялата обработка на събития ще бъде извършена от JS и Three.js. За да реализираме такова оформление, задаваме следните стойности за зациклящото, произволно събитие.

Var Colors = ( червено: 0xf25346, жълто: 0xedeb27, бяло: 0xd8d0d1, кафяво: 0x59332e, розово: 0xF5986E, кафяво тъмно: 0x23190f, синьо: 0x68c3c0, зелено: 0x458248, лилаво: 0x551A8B, светлозелено: 0x6 2926 5, ); променлива сцена, камера, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; функция createScene() ( // Вземете ширината и височината на екрана // и ги използвайте, за да регулирате // пропорциите на камерата и размера на рендера. HEIGHT = window.innerHeight; WIDTH = window.innerWidth; // Създайте сцената. scene = new THREE .Scene(); // Добавяне на ефект на FOV мъгла към сцената. scene.fog = new THREE.Fog(0xf7d9aa, 100, 950); // Създаване на камера aspectRatio = WIDTH / HEIGHT; fieldOfView = 60 ; nearPlane = 1; farPlane = 10000; camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, nearPlane, farPlane); // Позиция на камерата camera.position.x = 0; camera.position.y = 150; camera.position.z = 100; // Създаване на рендър рендерер = new THREE.WebGLRenderer(( // Направете фона прозрачен, анти-алиасинг производителност алфа: вярно, антиалиас: вярно )); // задайте размера на рендъра на цял екран renderer.setSize( WIDTH, HEIGHT); // активиране на изобразяване на сенки .shadowMap.enabled = true;//Добавяне на изобразяване към DOM и DIV контейнер за събития = document.getElementById("world"); container.appendChild(renderer.domElement); //Отзивчивост window.addEventListener("resize", handleWindowResize, false); ) //Отзивчивост на функцията handleWindowResize() ( HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); ) var hemispshereLight, shadowLight ; функция createLights() ( // Цветен градиент светлина небе, земя, интензитет hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9) // Паралелни лъчи shadowLight = new THREE.DirectionalLight(0xffffff, .9); shadowLight.position. set(0, 350, 350); shadowLight.castShadow = true; // дефиниране на видимата област на проектираната сянка 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; // Размер на картата на сенките shadowLight.shadow.mapSize. width = 2048; shadowLight .shadow.mapSize.height = 2048; // Добавяне на светлини към сцената scene.add(hemisphereLight); scene.add(shadowLight); ) Land = function() ( var geom = new THREE. CylinderGeometry(600, 600, 1700, 40, 10); //завъртане по оста x geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI / 2)); //създаване на материал var mat = new THREE.MeshPhongMaterial(( цвят: Colors.lightgreen, засенчване: THREE.FlatShading, )); //създаване на мрежа на обекта this.mesh = new THREE.Mesh(geom, mat); //получаване на сенки 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(( цвят: Colors.yellow, засенчване: THREE.FlatShading, )); var sun = new THREE.Mesh(sunGeom , sunMat); sun.castShadow = false; sun.receiveShadow = false; this.mesh.add(sun); ) Cloud = function() ( // Създаване на празен контейнер за облака this.mesh = new THREE.Object3D( ); // Геометрия и материал на куб var geom = new THREE.DodecahedronGeometry(20, 0); var mat = new THREE.MeshPhongMaterial(( цвят: Colors.white, )); var nBlocs = 3 + Math.floor(Math. random( ) * 3); for (var i = 0; i

В резултат на това получаваме прекрасен плъгин за сайт с отзивчивост и адаптивност.