Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Фоновое изображение в пол... (0)
Как сделать рейтинг карти... (0)
Проверка качества пароля ... (0)
Генератор пароля для uCoz (0)
Дополнительные смайлы в к... (0)
У костра (191)
Анекдоты (145)
Города (94)
Обновление сайта (67)
Создание НПС (63)
StraNNik (1327)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
avto-lady (02.12.2019)
alldaniser (18.11.2019)
pojar (06.10.2019)
pavelink45 (05.10.2019)
dimacss2 (18.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-06.12.2019