MEGA-NEWS - игровой портал, объединяющий в себе множество новостей и публикаций, огромный форум с игротекой и конечно же русскоговорящее комьюнити.
4228
39
27
новостей в ленте
тем на форуме
пользователей
Будь в курсе
Это интересно
Загружай и играй
в разработке...
Вступай в команду
Правила форума Форум игрового портала MEGA-NEWS
ФОРУМ MEGA-NEWS – сообщество пользователей игрового портала.
Форум - это место, где можно обсудить игровые новости и обновления, задать вопросы, разместить объявления в барахолке, дать объявления о предоставляемых вами услугах, поделиться полезной информацией и способами, вступить в команду портала (на должности модератора, журналиста), а также найти себе друзей и товарищей для общения и совместного времяпровождения в играх.
Все действия (общение и размещение информации) регламентируются правилами форума.
ТОП-5 по сообщениям
ТОП-5 по репутации
Страница 1 из 11
Форум » Web-раздел » Скрипты uCoz » Разное » Эффект кругов при клике (MO.JS)
Эффект кругов при клике (MO.JS)
#1
Менеджер проекта
Менеджер проекта
Статус:
Offline
Регистрация:
11.03.2016
Сообщения:
261

Интересное решение, которое я думаю понравится многим. Данная реализация позволяет создавать эффект кругов при клике на любую область. Обычно подобное применение вы могли наблюдать в видеороликах. Но теперь, благодаря плагину 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>
#2
VIP-пользователь
VIP-пользователь
Статус:
Offline
Регистрация:
29.03.2016
Сообщения:
77
Да эффект хорошо спору нет, но только вот зачем он на сайте? Я конечно мало, что смыслю, но думаю кому-то пригодится подобный эффект.
#3
Менеджер проекта
Менеджер проекта
Статус:
Offline
Регистрация:
11.03.2016
Сообщения:
261
Цитата trem200 ()
Да эффект хорошо спору нет, но только вот зачем он на сайте? Я конечно мало, что смыслю, но думаю кому-то пригодится подобный эффект.

Ты хоть понял что написал? Сперва задал вопрос а потом и ответил на него.
#4
VIP-пользователь
VIP-пользователь
Статус:
Offline
Регистрация:
29.03.2016
Сообщения:
77
Цитата Бармен ()
Ты хоть понял что написал? Сперва задал вопрос а потом и ответил на него.


Да фигню написал
Форум » Web-раздел » Скрипты uCoz » Разное » Эффект кругов при клике (MO.JS)
Страница 1 из 11
Поиск:
Условия предоставления информации
Контакты
В помощь пользователям
Навигация