Правила форума Подписки Ленточный
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
True Stalker (0)
Ловец снов (ОБТ) (0)
Контракт: Выходец с того ... (0)
Prosectors Project 1.7 (0)
Тайна Кордона (0)
У костра (193)
Анекдоты (145)
Города (94)
Обновления сайта (77)
Свалка (68)
StraNNik (1417)
RamzeS (513)
Каратель (170)
Narkostalker (121)
Кракен (93)
p4ladya (05.02.2024)
alexander24tomilin (20.12.2023)
Lesnik (13.12.2023)
nikbal888 (05.12.2023)
Fugaz56 (09.08.2023)
  • Страница 1 из 1
  • 1
Форум [HoC] | Развлекательный форум » Мастерская портала » Скрипты » Разное » ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
ЭФФЕКТ КРУГОВ ПРИ КЛИКЕ (MO.JS)
Слышу гимн зашитых ртов
StraNNik
Группа: Администратор
Ранг: Опытный
Сообщений: 1417
Карма: 33
Сообщение # 1
Дата: 01.02.2019 в 16:43

Интересное решение, которое я думаю понравится многим. Данная реализация позволяет создавать эффект кругов при клике на любую область. Обычно подобное применение вы могли наблюдать в видеороликах. Но теперь, благодаря плагину 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>


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

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