Октябрь 25, 2019 Запись была обновлена
Интерактивный 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 на своём сайте. Надеюсь вам понравится 🙂 .
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Если задать autospin меньше чем в первом слайде демонстрации то получится довольно неплохо. Вы заметили, что здесь для создания самой планеты не используется никакого 3D а трюк с внутренней тенью.