Этот скрипт создает два круговых элемента анимации с использованием библиотеки mojs. При клике на документе, позиция двух кругов анимируется к месту щелчка на странице, а затем они появляются и исчезают быстро.

для начала подключаем библиотеку файлы прикреплены к данной статье


Код
<script src='/js/mo.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>


если нужны рандомные цвета то стоит прописать данный код

Код
<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>
скрипт для создания анимацию при клике по html странице с помощью mojs
Размер: 52.3 Kb

Комментарии

Минимальная длина комментария - 50 знаков. комментарии модерируются
HTMLSTART » CSS3 - JS - SVG Примеры » Прочие скрипты для сайтов » скрипт для создания анимацию при клике по html странице с помощью mojs