Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Фоновое изображение в пол... (0)
Как сделать рейтинг карти... (0)
Проверка качества пароля ... (0)
Генератор пароля для uCoz (0)
Дополнительные смайлы в к... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1327)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
pojar (06.10.2019)
pavelink45 (05.10.2019)
dimacss2 (18.09.2019)
sej963821 (14.09.2019)
danilov380 (13.09.2019)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
StraNNik
StraNNik
Пропуск №: 1
Регистрация: 20.11.2013
Ранг: Легенда
Сообщений: 1327
Карма: 28 | Хабар: 10
Слышу гимн зашитых ртов
Дата: Пятница, 01.02.2019, 16:43/ Сообщение №: 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>




Тихо на улице, пусто в квартире..Спасибо реактору №4

Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-17.10.2019