Как сделать страницу заглушку. Оставьте контактную информацию

Заглушка — это страница, которую размещают на сайт, когда он недоступен по той или иной причине. Например, когда вы дорабатываете или меняете дизайн сайта и в это время он недоступен или отображается как-то некорректно. Целесообразно будет поставить на это время страницу-заглушку, на которой будет написано, что сайт на обслуживании.

Итак, давайте приступим…

Мы будем делать несложную заглушку с фоновой картинкой и текстом, что .

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

В этой папке создадим еще одну папку с названием images . В нее мы поместим нашу фоновую картинку и, возможно, еще и другие картинки, которые могут понадобиться в ходе работы.

Открываем программу Notepad++ (или аналогичную, например Блокнот). Создаем новый документ. Далее — Файл — Сохранить как, выбираем нашу папку с заглушкой и сохраняем документ с названием index.html

Вот что теперь должно быть в нашей папке:

Открываем в нашем редакторе файл index.html (после сохранения он должен быть у вас открыт). Теперь нам надо убедиться, что кодировка этого файла выставлена правильно. Для этого идем в пункт меню «Кодировки» и нажимаем на «Преобразовать в UTF-8″

Чтобы во время работы случайно не потерять достигнутый результат, рекомендую периодически сохранять документ во время работы. Это можно сделать в меню «Файл» или сочетанием клавиш «Ctrl + S».

Пишем в редакторе следующий код:

Из этих тегов состоит любая веб-страница.

Теперь добавим к нашей странице заголовок, ведь будет не очень красиво, когда кто-то откроет ее и увидит в заголовке вкладки браузера index.html (можете открыть страницу в браузере и следить за тем, что получается). Для этого между и добавим следующий код:

Сайт находится на обслуживании

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

Теперь давайте подберем к нашей заглушке фоновую картинку, после чего вернемся к редактированию страницы.

Для этого заходим в Гугл Картинки и ищем интересную картинку, которая могла бы служить фоном для нашей страницы. Важно подбирать картинку шириной не менее 1920 пикселей, чтобы на больших экранах наша страница смотрелась хорошо. Я ввел в поисковую строку и выбрал одну из картинок.

Открываем картинку в полном размере и сохраняем себе в папку images . Затем переименовываем ее. Назовем ее bg (не забываем о формате картинки, в моем случае это jpg).

Вот что я подобрал. Это фото города Чикаго. По-моему вполне подойдет для фонового изображения сайта.

Прикрепляем фоновое изображение к странице, для этого используем стили CSS:

Сайт находится на обслуживании

Текст будет состоять из заголовка и, собственно, абзаца текста.

Сайт находится на обслуживании

Вот что получилось:

Теперь добавим наши контакты, чтобы посетители сразу могли связаться с нами, а не ждать пока на сайте закончатся работы.

Добавим 3 блока, в которых будут телефон, электронная почта и скайп.

Сайт находится на обслуживании Сайт на обслуживании, зайдите позже!

В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:

Тел.: 333-33-33

E-mail: [email protected]

Скайп: admsite_ru

Осталось поработать со стилями.

Увеличим заголовок, выровняем его по центру и опустим ближе к центру экрана.

Увеличим шрифт абзаца текста до двадцати пикселей и сделаем небольшой отступ от заголовка. Также сделаем границу внизу текста, которая отделит его от контактов.

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

Сайт находится на обслуживании Сайт на обслуживании, зайдите позже!

В настоящее время на сайте ведутся технические работы. Зайдите пожалуйста позже или свяжитесь с нами одним из следующих способов:

Тел.: 333-33-33

E-mail: [email protected]

Скайп: admsite_ru

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

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

По мере развития современных инструментов веб-разработки, подобные страницы превратились из простых страниц с текстом в более интересные решения.

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

В этом уроке мы создадим именно такую заглушку для сайта, которая будет содержать форму подписки и таймер обратного отсчета, реализованный с помощью JQuery-плагина от Кейта Вуда .

Нужные для урока материалы:

• Любое фоновое изображение
• Время и терпение.

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

папка «js» — папка с JavaScript/JQuery скриптами

папка «img» — папка с изображениями проекта

папка «css» — папка с таблицами стилей проекта (css-файлы)

Приступаем к работе

Первым этапом работы у нас будет подключение к основному html-файлу таблиц стилей и jquery-библиотеки.
Подключаем файлы внутри тега head.

Coming Soon with Counter

HTML

Для нашего html-документа создадим разметку. Все элементы страницы будут находиться внутри тега div с идентификатором «container». Внутри этого блока у нас будут заголовки, счетчик, форма обратной связи и футер (нижний блок с авторскими правами).

Our website is Coming Soon WE APOLOGIZE FOR INCONVENIENCE

YOU NEED TO WAIT...

SEND ME DETAILS ABOUT IT

Copyright - 1stwebdesigner.com - 2014

Обратите внимание, что мы оставили пустым блок div с идентификатором «counter». Этот идентификатор мы позже используем, чтобы связать его с нашим jquery-плагином и добавим к нему css-стили.

CSS

Теперь создадим для нашего проекта css-файл, в котором будут расположены все стили. В первую очередь добавим стили для основных элементов: body, h1, h2 и блока с идентификатором «container». Для блока «container» ширину указываем в процентах, чтобы он изменялся в зависимости от размера окна браузера.

Для тега h1 применим CSS3 трансформацию, что позволит ему вращаться на 360 градусов по оси X. Подробнее об этом свойстве можно прочитать .

Body { color: #dadada; line-height: 1.75; width: 100%; background: url(../img/background.jpg)center; font-family: "Open Sans"; } h1,h2{ color: #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; font-weight: 700; border: 2px dashed #fff; margin-top: 50px; padding: 10px; cursor: pointer; -webkit-transition: all .8s ease; -moz-transition: all .8s ease; -o-transition: all .8s ease; transition: all .8s ease; } h1:hover { -webkit-transform: rotateX(360deg); -moz-transform: rotateX(360deg); -ms-transform: rotateX(360deg); -o-transform: rotateX(360deg); transform: rotateX(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 { font-size: 16px; max-width: 100%; margin: 0; border-radius: 0; vertical-align: baseline; -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; color: #fff; font-weight: 700; letter-spacing: 1px; padding: 12px; text-transform: uppercase; } input:focus,textarea:focus { outline: 0; } button:hover,button:focus,input:focus,input:hover { background: #ff8721; color: #fff; outline: 0; } button,input { -webkit-appearance: button; cursor: pointer; } button,input { background: #ffab00; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } .form-field { position: relative; }

Следующим шагом у нас будет создание кроссбраузерного стиля для текстового поля.

::-webkit-input-placeholder { color: #fff; } ::-moz-placeholder { color: #fff; opacity: 1; } ::-ms-input-placeholder { color: #fff; opacity: 1; } .placeholder { color: #ff; }

Теперь создадим стили для нашего счетчика. Напомню, что в html-документе он находится в блоке div с идентификатором «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 dashed #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: uppercase; } .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; }

Теперь давайте добавим стилей для формы обратной связи. Максимальная ширина формы будет составлять 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 { height: 50px; position: absolute; right: 0; top: 0; width: 180px; } #subcribe_email,#subscribe_submit { width: 100%; display: block; height: 55px; }

И в конце добавим свойств для элементов блока footer.

Footer { font-size: 13px; text-align: center; margin-top: 25px; text-transform: uppercase; text-shadow: 2px 2px 2px rgba(150,150,150,1); } footer a { color: #fff; }

Чтобы наша страница была отзывчивой, добавим медиа-запросы. Подробнее об этом свойстве можно прочитать (англ.)

@media only screen and (max-width: 720px) { footer{margin-bottom: 40px; } } @media only screen and (max-width: 680px) { .countdown_amount { font-size: 48px; } } @media only screen and (max-width: 540px) { .one-half { width: 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{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 { font-size: 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 отлично подходит для пиара сайта. На странице есть несколько пунктов, где можно разместить важную информацию и таймер обратного отчета. Страничка адаптивная, она создана с использованием 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. Оставьте контактную информацию

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

В будущем вам понадобится создавать комьюнити. Делайте это прямо сейчас с помощью готовых инструментов — социальных сетей. Помимо того что наличие этих ссылок будет увеличивать доверие к компании и будущему сайту, вошедшие в ваше сообщество люди будут всегда в курсе новостей о стадиях разработки или запуска ресурса.

Однако не делайте социальные профили пустыми, наполните их полезным контентом, чтобы вашей целевой аудитории было на что подписываться. Люди не лайкают и не фоловят низкоавторитетные, нулевые аккаунты или профили со стандартными аватарками (например, яйцо в твиттере).

8. Разместите форму подписки на обновления

Помимо использования социальных сетей, подключайте email-рассылку. Собирайте электронные адреса вашей потенциальной аудитории уже сейчас. Вы можете выслать им сообщение только при запуске сайта, а можете делать это регулярно, сообщая, на каком этапе находится разработка или какие-то другие важные уже в вашей тематике и, конечно же, полезные для тех людей, которые доверяют вам свои контакты, аспекты.

Помимо формы для отправки email, можно использовать и другие каналы коммуникации с клиентами/аудиторией, например, блог, добавив его на поддомен или в подпапку и установив там стандартный WordPress. Возможно, этот блог в будущем не только скажется положительно как инструмент входящего маркетинга, но и поможет повысить авторитетность ресурса в глазах поисковых систем.

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

Ваша первая цель — собрать начальную аудиторию и заставить человека вернуться, как только сайт начнет функционировать. Призывая пользователя к действию, вы говорите о своих намерениях и напоминаете посетителю о его возможностях. "Подписывайтесь", "Посмотрите первым", "Возвращайтесь", "Свяжитесь с нами", "Почитайте о нас подробней", "Фоловьте нас в соцсетях" и т.д. Используйте один или несколько призывов к действию в зависимости от размера страницы-заглушки. Если вы просто напишете, что сайт находится в разработке, то мало кто из текущих посетителей вернется на него в будущем.

На приведенном ниже примере призыв к действию расположен сверху справа со стрелочкой, а также повторно внизу страницы уже вместе с формой подписки на уведомления.

10. Не оптимизируйте страницы-заглушки для поисковых систем

Конечно же, страницы-заглушки хороши и для SEO, так как можно начинать продвигать сайт ещё не имея его. Как минимум ресурс уже будет в индексе, как максимум на него уже можно размещать ссылки как на форумах или в соцсетях, так и в печатных СМИ.

И несмотря на то, что страницы-заглушки могут использоваться для SEO, они выполняют больше маркетинговую задачу. Настоятельно не рекомендуется портить первое впечатление о ресурсе SEO-текстом.

Надеюсь, эти советы помогут вам заполнить техническое задание для программистов уже сейчас. Ниже приведены ещё два примера для мотивации. :)

Придумайте свою идею и поставьте страницу-заглушку уже сегодня, чтобы при запуске сайта не искать аудиторию, а продолжать с ней работать!

Красивый сайт остается в памяти посетителя очень долго, и это несомненно прекрасно. Сегодня мы бы хотели поговорить об замечательный заглушке на ваш сайт, а именно об интерактивной анимированной странице, которая будет постоянно находиться в движении, кроме этого реагировать на курсор мыши и выполнять действия. Задумка состоит во создании земли и самолета который постоянно будет находиться в планировании, при движении курсора самолет будет менять свою позицию. Смотрится такой интерактив очень круто и приятно.

ИСХОДНИКИ

Такую страницу можно использовать в качестве фона сайта, странице с малым текстовым посланием или заглушке на странице, в любом случае вы не прогадаете. Данный эффект достигается благодаря 3D библиотеке jQuery- Three.js.

Шаг 1. HTML

Разметка и стили у нас будут достаточно простые, так как всю работу будет выполнять Three.js , и параметры которые мы указали в JS, нам остается вызвать эти функции присвоив id=«world»:

Стили тоже достаточно простые, по этому мы не будет на них останавливаться, и перейдем сразу к следующему шагу.

Шаг 2. JS

Всю обработку событий у нас будет выполнять JS и Three.js , чтобы реализовать такой макет мы установили следующие значения для зацикленного, рандомного события.

Var Colors = { red: 0xf25346, yellow: 0xedeb27, white: 0xd8d0d1, brown: 0x59332e, pink: 0xF5986E, brownDark: 0x23190f, blue: 0x68c3c0, green: 0x458248, purple: 0x551A8B, lightgreen: 0x629265, }; var scene, camera, fieldOfView, aspectRatio, nearPlane, farPlane, HEIGHT, WIDTH, renderer, container; function 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; // Создать рендерер renderer = new THREE.WebGLRenderer({ // Делаем фон прозрачным, сглаживания производительность alpha: true, antialias: true }); // установить размер средства визуализации в полноэкранный режим renderer.setSize(WIDTH, HEIGHT); // включить теневой рендеринг renderer.shadowMap.enabled = true; // Добавить Рендерер в DOM, и в события DIV. container = document.getElementById("world"); container.appendChild(renderer.domElement); //Отзывчивость window.addEventListener("resize", handleWindowResize, false); } //Отзывчивость функций function handleWindowResize() { HEIGHT = window.innerHeight; WIDTH = window.innerWidth; renderer.setSize(WIDTH, HEIGHT); camera.aspect = WIDTH / HEIGHT; camera.updateProjectionMatrix(); } var hemispshereLight, shadowLight; function 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({ color: Colors.lightgreen, shading: THREE.FlatShading, }); //create a mesh of the object this.mesh = new THREE.Mesh(geom, mat); //receive shadows this.mesh.receiveShadow = true; } Orbit = function() { var geom = new THREE.Object3D(); this.mesh = geom; //this.mesh.add(Солнце); } Sun = function() { this.mesh = new THREE.Object3D(); var sunGeom = new THREE.SphereGeometry(400, 20, 10); var sunMat = new THREE.MeshPhongMaterial({ color: Colors.yellow, shading: 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({ color: Colors.white, }); var nBlocs = 3 + Math.floor(Math.random() * 3); for (var i = 0; i

В результате мы получаем замечательную заглушку для сайта с отзывчивостью и адаптивностью.