Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Эффект кругов при клике (mo.js)
Дата добавления: 13.03.2017 - 05:43
Категория: Хаки / Дополнения
Добавил: Buger
Количество просмотров: 490
Количество комментариев: 0
Размер файла: 3.1 Kb
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
Поделись с друзьями:
Интересное решение, которое я думаю понравится многим. Данная реализация позволяет создавать эффект кругов при клике на любую область. Обычно подобное применение вы могли наблюдать в видеороликах. Но теперь, благодаря плагину mo.js данный эффект можно встроить на веб странице. Эффект кругов появляется конкретно в том месте, где вы кликнули мышкой.
Смотрите демонстрацию в скачанном файле.
Для начала нам необходимо подключить две библиотеки mo.js:
Затем вставляем код обработчика JS:
Источник: http://art-ucoz.ru/
Смотрите демонстрацию в скачанном файле.
Для начала нам необходимо подключить две библиотеки 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>
<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>
'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>
Источник: http://art-ucoz.ru/
