для начала подключаем библиотеку файлы прикреплены к данной статье
Код
<script src='/js/mo.min.js'></script>
<script src='/js/mojs-player.min.js'></script>
<script src='/js/mojs-player.min.js'></script>
Код
<script>'use strict';
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
if (window.CP.shouldStopExecution(2)) {
break;
}
var source = argumentsi];
for (var key in source) {
if (window.CP.shouldStopExecution(1)) {
break;
}
if (Object.prototype.hasOwnProperty.call(source, key)) {
targetkey] = sourcekey];
}
}
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: '#aaffaa' // Указываем цвет большого круга
}));
var circle2 = new mojs.Shape(_extends({}, OPTS, {
radius: {
0: 15
},
strokeWidth: {
30: 0
},
stroke: '#1BBB6B', // Указываем цвет малого круга
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();
setTimeout(function(){$('data-name="mojs-shape"]').fadeIn('fast')});
setTimeout(function(){$('data-name="mojs-shape"]').fadeOut('fast')},500);
});</script>
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
if (window.CP.shouldStopExecution(2)) {
break;
}
var source = argumentsi];
for (var key in source) {
if (window.CP.shouldStopExecution(1)) {
break;
}
if (Object.prototype.hasOwnProperty.call(source, key)) {
targetkey] = sourcekey];
}
}
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: '#aaffaa' // Указываем цвет большого круга
}));
var circle2 = new mojs.Shape(_extends({}, OPTS, {
radius: {
0: 15
},
strokeWidth: {
30: 0
},
stroke: '#1BBB6B', // Указываем цвет малого круга
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();
setTimeout(function(){$('data-name="mojs-shape"]').fadeIn('fast')});
setTimeout(function(){$('data-name="mojs-shape"]').fadeOut('fast')},500);
});</script>
если нужны рандомные цвета то стоит прописать данный код
Код
<script>'use strict';
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
if (window.CP.shouldStopExecution(2)) {
break;
}
var source = argumentsi];
for (var key in source) {
if (window.CP.shouldStopExecution(1)) {
break;
}
if (Object.prototype.hasOwnProperty.call(source, key)) {
targetkey] = sourcekey];
}
}
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: randomColor() // Указываем цвет большого круга
}));
var circle2 = new mojs.Shape(_extends({}, OPTS, {
radius: {
0: 15
},
strokeWidth: {
30: 0
},
stroke: randomColor(), // Указываем цвет малого круга
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();
setTimeout(function () {
$('data-name="mojs-shape"]').fadeIn('fast');
});
setTimeout(function () {
$('data-name="mojs-shape"]').fadeOut('fast');
}, 500);
});
// Функция для генерации случайного цвета
function randomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
};</script>
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
if (window.CP.shouldStopExecution(2)) {
break;
}
var source = argumentsi];
for (var key in source) {
if (window.CP.shouldStopExecution(1)) {
break;
}
if (Object.prototype.hasOwnProperty.call(source, key)) {
targetkey] = sourcekey];
}
}
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: randomColor() // Указываем цвет большого круга
}));
var circle2 = new mojs.Shape(_extends({}, OPTS, {
radius: {
0: 15
},
strokeWidth: {
30: 0
},
stroke: randomColor(), // Указываем цвет малого круга
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();
setTimeout(function () {
$('data-name="mojs-shape"]').fadeIn('fast');
});
setTimeout(function () {
$('data-name="mojs-shape"]').fadeOut('fast');
}, 500);
});
// Функция для генерации случайного цвета
function randomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
};</script>