Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

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

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

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

    Эффект кругов при клике (mo.js)

    Дата добавления: 13.03.2017 - 05:43
    Добавил: Buger
    Количество просмотров: 1.9k
    Количество комментариев: 0
    Размер файла: 3.1 Kb
    Рейтинг материала: 5.0 / 1
    Эффект кругов при клике (mo.js)
    БЕСПЛАТНО
    рейтинг 5.0
    /
    голосов 1
    Интересное решение, которое я думаю понравится многим. Данная реализация позволяет создавать эффект кругов при клике на любую область. Обычно подобное применение вы могли наблюдать в видеороликах. Но теперь, благодаря плагину mo.js данный эффект можно встроить на веб странице. Эффект кругов появляется конкретно в том месте, где вы кликнули мышкой.

    Смотрите демонстрацию в скачанном файле.

    Для начала нам необходимо подключить две библиотеки mo.js:
    Код
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mo-js/0.288.1/mo.min.js'></script>
    <script src='https://cdn.jsdelivr.net/mojs-player/0.43.15/mojs-player.min.js'></script>


    Затем вставляем код обработчика JS:
    Код
    <script type="text/javascript">
      'use strict';
      var _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
      if (window.CP.shouldStopExecution(2)) {
      break;
      }
      var source = arguments[i];
      for (var key in source) {
      if (window.CP.shouldStopExecution(1)) {
      break;
      }
      if (Object.prototype.hasOwnProperty.call(source, key)) {
      target[key] = source[key];
      }
      }
      window.CP.exitedLoop(1);
      }
      window.CP.exitedLoop(2);
      return target;
      };

      var OPTS = {
      fill: 'none',
      radius: 25, // Указываем общий радиус
      strokeWidth: {
      50: 0
      },
      scale: {
      0: 1
      },
      angle: {
      'rand(-35, -70)': 0
      },
      duration: 500,
      left: 0,
      top: 0,
      easing: 'cubic.out'
      };

      var circle1 = new mojs.Shape(_extends({}, OPTS, {
      stroke: '#FF8966' // Указываем цвет большого круга
      }));

      var circle2 = new mojs.Shape(_extends({}, OPTS, {
      radius: {
      0: 15
      },
      strokeWidth: {
      30: 0
      },
      stroke: '#E5446D', // Указываем цвет малого круга
      delay: 'rand(75, 150)'
      }));

      document.addEventListener('click', function (e) {
      circle1.tune({
      x: e.pageX,
      y: e.pageY
      }).replay();

      circle2.tune({
      x: e.pageX,
      y: e.pageY
      }).replay();
      });
    </script>


    Источник: http://art-ucoz.ru/
    Добавлять комментарии могут только зарегистрированные пользователи.


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