https://sophielemeillour.ch/wp-content/themes/sophie-theme-v2.1.0/js/main_mouse.js?v=445057099

1var ANGLE = 20;
2var MOUSE_X = 0;
3var MOUSE_Y = 0;
4var X = 0;
5var Y = 0;
6var RADIUS = 14;
7var SPEED = 50;
8var EASING = 0.1;
9var STRETCH_X = 1.5
10var STRETCH_Y = 0.9
11
12
13function toDegrees (angle) {
14  return angle * (180 / Math.PI);
15}
16
17function toRadians (angle) {
18  return angle * (Math.PI / 180);
19}
20
21
22// X := originX + cos(angle) * radius;
23// Y := originY + sin(angle) * radius;
24// (originX, originY) is the center of your circle. radius is its radius. That's it.
25var animateEllipse = function($el){
26
27  var targetX = MOUSE_X;
28  var dx = targetX - X;
29  X += dx * EASING;
30
31  var targetY = MOUSE_Y;
32  var dy = targetY - Y;
33  Y += dy * EASING;
34
35  // vertical orbit
36  var x1 = X + STRETCH_X * Math.cos(toRadians(ANGLE)) * RADIUS / 2;
37  var y1 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE)) * RADIUS * 2;
38
39  // horizontal orbit
40  var x2 = X + STRETCH_X * Math.cos(toRadians(ANGLE + 30)) * RADIUS * 1.2;
41  var y2 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE + 30)) * RADIUS ;
42
43  // top right bottom left orbit
44  var x3 = X + STRETCH_X * Math.sin(toRadians(ANGLE + 40)) * RADIUS / 2 + Math.cos(toRadians(ANGLE)) * RADIUS * 2;
45  var y3 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE + 40)) * RADIUS * -2;
46
47  // top left bottom right orbit
48  var x4 = X + STRETCH_X * Math.sin(toRadians(ANGLE + 60)) * RADIUS / 2 + Math.cos(toRadians(ANGLE)) * RADIUS * 2;
49  var y4 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE + 60)) * RADIUS * 2;
50
51  // vertical reverse orbit
52  var x5 = X + STRETCH_X * Math.cos(toRadians(ANGLE + 120)) * RADIUS / 2;
53  var y5 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE + 120)) * RADIUS * 2;
54
55  // horizontal reverse orbit
56  var x6 = X + STRETCH_X * Math.cos(toRadians(ANGLE + 120)) * RADIUS * 1.2;
57  var y6 = Y + STRETCH_Y * Math.sin(toRadians(ANGLE + 120)) * RADIUS ;
58
59  ANGLE = ANGLE + 5;
60
61  // x = x - RADIUS / 2 ;
62  // y = y - RADIUS * 3;
63
64  // vertical
65  $('#circle_1').css({
66    left: x1  + 'px',
67    top: y1  + 'px'
68  });
69
70  // horizontal
71  $('#circle_2').css({
72    left: x2  + 'px',
73    top: y2  + 'px'
74  });
75
76  // vertical reverse
77  $('#circle_5').css({
78    left: x5  + 'px',
79    top: y5  + 'px'
80  });
81
82  // horizontal reverse
83  $('#circle_6').css({
84    left: x6  + 'px',
85    top: y6  + 'px'
86  });
87}
88
89
90$(function(){
91
92  $('.circle_mouse').css({
93    display: 'block',
94    position: 'absolute',
95    'background-color': 'black',
96    width: '2px',
97    height: '2px',
98    'border-radius': '1px'
99  });
100
101
102  $( document ).on( "mousemove", function( event ) {
103
104    MOUSE_X = event.pageX;
105    MOUSE_Y = event.pageY;
106
107  });
108
109  setInterval(animateEllipse, SPEED);
110
111})