Форма входа

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

    Вы здесь: Главная страница » Файлы » Хаки / Дополнения
    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 11.01.2021 - 00:40
    Добавил: Buger
    Количество просмотров: 1.0k
    Количество комментариев: 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)
    Добавлять комментарии могут только зарегистрированные пользователи.


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