Лого www.SiteHere.ru

Интерактивный jQuery планетарий

Интерактивный jQuery планетарий

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

Пример можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться?

Необходимые изображения

Для начала нам понадобятся следующие изображения:

Текстура ВселеннойТекстура Земли
СкачатьСкачать

HTML часть

Скачиваем библиотеку jQuery(здесь) и плагин jQuery.planetarium.js со стилями planetarium.css(здесь), а затем подключаем:

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.planetarium.js"></script>
<link rel="stylesheet" type="text/css" href="css/planetarium.css" />

HTML код очень простой:

1
2
3
4
5
<body>
  ..
  <div class="earth planet"></div>
  ..
</body>

jQuery часть

И последним шагом необходимо прописать небольшую функцию:

1
2
3
4
5
6
7
8
9
10
11
$(".planet").planetarium({
    autospin: "1000ms",
    angle: "20deg",
    glow: "rgba(255, 255, 255, 0.34902) 0px 0px 50px, inset 33px 20px 50px rgba(0,0,0,0.5)",
    pattern: "img/texture-earth.jpg",
    size: "100x100",
    space: "body",
    ring: false,
    ringColor: "#fff",
    ringAngle: "20deg"
 });

Более подробное описание каждого свойства:

  • autospin — это свойство отвечает за время, которое планета делает одно вращение. Задается в миллисекундах. По умолчанию равно 1000ms.
  • angle — угол под которым вращается планета. По умолчанию равно 20deg.
  • glow — с помощью данного свойства можно задать тень и свечение у планеты. Свойство состоит из двух частей: в первой части задается свечение, а во второй — тень.
  • pattern — это текстура для вашей планеты, она находится в папке с плагином и является обычным изображением.
  • size — размер планеты в пикселях.
  • space — контейнер, который будет использоваться как задний план.
  • ring — устанавливает кольцо у планеты. По умолчанию значение false.
  • ringColor — устанавливает цвет кольца.
  • ringAngle — задает угол, под которым будет показываться кольцо.

Вывод

Сейчас, с помощью данного плагина, вы можете создать целую солнечную систему с помощью jQuery на своём сайте. Надеюсь вам понравится 🙂 .

Успехов!

Источник: http://www.onextrapixel.com/2014/04/01/construct-interactive-planets-and-build-the-universe-on-your-website/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • AJAX Meter

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

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *