Форма входа

Бесплатный раздел

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

Анимированные облака с помощью Canvas и WebGl

Дата добавления: 11.01.2021 - 00:40
Добавил: Buger
Количество просмотров: 14
Количество комментариев: 0
Размер файла: 66.6 Kb
Рейтинг материала: 0.0 / 0
Анимированные облака с помощью Canvas и WebGl
рейтинг 0.0
/
голосов 0
Создание анимированных облаков с помощью Canvas и WebGl - klouds.js
klouds.js - это плагин jQuery и Vanilla JavaScript для создания анимированных, настраиваемых облаков с использованием холста HTML5 и WebGL API.
Отлично подходит для создания изящного фона неба для вашего веб-приложения.

Как использовать:


1. Загрузите и подключите klouds.js в документ.
Код
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="lib/klouds.min.js"></script>

2. Создайте элемент холста, на котором плагин будет отображать анимированные облака.
Код
<canvas id="myClouds"></canvas>

3. Вызовите функцию на элементе холста и готово.
Код
$(function(){
  $('#myClouds').Klouds();
});

4. Установите скорость анимации. По умолчанию: 1. Поддерживает отрицательные числа.
Код
$('#myClouds').Klouds({
  speed: 1
});

5. Укажите количество слоев облачного паралакса. По умолчанию: 5.
Код
$('#myClouds').Klouds({
  layerCount: 3
});

6. Настройте цвета облаков.
Код
$('#myClouds').Klouds({
  cloudColor1: [25, 178, 204],
  cloudColor2: [255, 255, 255]
});

7. Настройте цвет фона неба.
Код
$('#myClouds').Klouds({
  cloudColor1: [25, 178, 204],
  cloudColor2: [255, 255, 255]
});

8. Доступные методы API.
Код
const instance = $('#myClouds').Klouds();

// запустить анимацию
instance.start()

// остановить анимацию
instance.stop()

// получить текущую скорость анимации
instance.getSpeed()

// установить скорость анимации
instance.setSpeed(speed)  

// получить количество облачных слоев
instance.getLayerCount()

// установить количество облачных слоев
instance.setLayerCount(count)

// получить цвет фона
instance.getBgColor()

// установить цвет фона
instance.setBgColor(color)

// получить цвет 1
instance.getCloudColor1()

// установить цвет 1
instance.setCloudColor1(color)

// получить цвет 2
instance.getCloudColor2()

// установить цвет 2
instance.setCloudColor2(color)
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: