SaveText.Ru

Курсор
  1. $(document).ready(function(){
  2. // Some help functions.
  3. const shuffleArray = arr => arr.sort(() => Math.random() - 0.5);
  4. const lineEq = (y2, y1, x2, x1, currentVal) => {
  5. let m = (y2 - y1) / (x2 - x1);
  6. let b = y1 - m * x1;
  7. return m * currentVal + b;
  8. };
  9. const lerp = (a, b, n) => (1 - n) * a + n * b;
  10. const body = document.body;
  11. const bodyColor = getComputedStyle(body).getPropertyValue('--color-bg').trim() || 'black';
  12. const getMousePos = (e) => {
  13. let posx = 0;
  14. let posy = 0;
  15. if (!e) e = window.event;
  16. if (e.pageX || e.pageY) {
  17. posx = e.pageX;
  18. posy = e.pageY;
  19. }
  20. else if (e.clientX || e.clientY) {
  21. posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft;
  22. posy = e.clientY + body.scrollTop + document.documentElement.scrollTop;
  23. }
  24. return { x : posx, y : posy }
  25. }
  26.  
  27. // Window sizes.
  28. let winsize;
  29. const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
  30. calcWinsize();
  31. // Recalculate window sizes on resize.
  32. window.addEventListener('resize', calcWinsize);
  33. class CursorFx {
  34. constructor(el) {
  35. this.DOM = {el: el};
  36. this.DOM.dot = this.DOM.el.querySelector('.cursor__inner--dot');
  37. this.DOM.circle = this.DOM.el.querySelector('.cursor__inner--circle');
  38. this.bounds = {dot: this.DOM.dot.getBoundingClientRect(), circle: this.DOM.circle.getBoundingClientRect()};
  39. this.scale = 1;
  40. this.opacity = 1;
  41. this.mousePos = {x:0, y:0};
  42. this.lastMousePos = {dot: {x:0, y:0}, circle: {x:0, y:0}};
  43. this.lastScale = 1;
  44. this.lastOpacity = 1;
  45.  
  46. this.initEvents();
  47. requestAnimationFrame(() => this.render());
  48. }
  49. initEvents() {
  50. window.addEventListener('mousemove', ev => this.mousePos = getMousePos(ev));
  51. }
  52. render() {
  53. this.lastMousePos.dot.x = lerp(this.lastMousePos.dot.x, this.mousePos.x - this.bounds.dot.width/2, 1);
  54. this.lastMousePos.dot.y = lerp(this.lastMousePos.dot.y, this.mousePos.y - this.bounds.dot.height/2, 1);
  55. this.lastMousePos.circle.x = lerp(this.lastMousePos.circle.x, this.mousePos.x - this.bounds.circle.width/2, 0.15);
  56. this.lastMousePos.circle.y = lerp(this.lastMousePos.circle.y, this.mousePos.y - this.bounds.circle.height/2, 0.15);
  57. this.lastScale = lerp(this.lastScale, this.scale, 0.15);
  58. this.lastOpacity = lerp(this.lastOpacity, this.opacity, 0.1);
  59. this.DOM.dot.style.transform = `translateX(${(this.lastMousePos.dot.x)}px) translateY(${this.lastMousePos.dot.y}px)`;
  60. this.DOM.circle.style.transform = `translateX(${(this.lastMousePos.circle.x)}px) translateY(${this.lastMousePos.circle.y}px) scale(${this.lastScale})`;
  61. this.DOM.circle.style.opacity = this.lastOpacity
  62. requestAnimationFrame(() => this.render());
  63. }
  64. enter() {
  65. cursor.scale = 2.7;
  66. }
  67. leave() {
  68. cursor.scale = 1;
  69. }
  70. click() {
  71. this.lastScale = 1;
  72. this.lastOpacity = 0;
  73. }
  74. }
  75. const cursor = new CursorFx(document.querySelector('.cursor'));
  76.  
  77. [...document.querySelectorAll('[href]')].forEach((link) => {
  78. link.addEventListener('mouseenter', () => cursor.enter() );
  79. link.addEventListener('mouseleave', () => cursor.leave() );
  80. link.addEventListener('click', () => cursor.click() );
  81. });
  82. });
  83. </script>
  84.  
  85. *,
  86. *::after,
  87. *::before {
  88. box-sizing: border-box;
  89. cursor: none !important;
  90. }
  91.  
  92. .cursor__inner {
  93. z-index:
  94.  
  95. 99999999999999;
  96. pointer-events: none;
  97. position: absolute;
  98. top: 0;
  99. left: 0;
  100. mix-blend-mode: difference;
  101. border-radius: 50%;
  102. }
  103.  
  104. .cursor__inner--dot {
  105. width: 6px;
  106. height: 6px;
  107. background: #fff;
  108. }
  109.  
  110. .cursor__inner--circle {
  111. width: 20px;
  112. height: 20px;
  113. border: 1px solid #fff;
  114. }
  115.  
  116. </style>
  117. <div class="cursor">
  118. <div class="cursor__inner cursor__inner--circle"></div>
  119. <div class="cursor__inner cursor__inner--dot"></div>
  120. </div>
  121.  

Share with your friends:

Print