Інтерактивний jquery планетарій

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

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

необхідні зображення

Для початку нам знадобляться такі зображення:

завантажити	завантажити

HTML частина

Викачуємо бібліотеку jQuery (тут) І плагін jQuery.planetarium.js зі стилями planetarium.css (тут), А потім підключаємо:

123

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.planetarium.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / planetarium.css" /gt;

HTML код дуже простий:

12345

lt;bodygt; ..lt;div class="Earth planet"gt; lt;/divgt; ..lt;/bodygt;

jQuery частина

І останнім кроком необхідно прописати невелику функцію:

1234567891011

$(".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 на своєму сайті. Сподіваюся вам сподобається # 128578; .

Успіхів!

джерело: https://onextrapixel.com/2014/04/01/construct-interactive-planets-and-build-the-universe-on-your-website/