1.9.5-0

layout/_partial/after-footer.ejs

@@ -1,4 +1,4 @@
-<%- js('/js/jquery-2.0.3.min') %> <%- js('/js/lazyload.min') %>
+<%- js('/js/jquery-3.6.0.min') %> <%- js('/js/lazyload.min') %>
 <!-- Tocbot -->
 <% if (theme.toc && is_post() && !page.no_toc){ %> <%- js('/js/tocbot.min') %>
 <script>

layout/layout.ejs

@@ -21,10 +21,10 @@
     <main class="content on">
       <%- body %>
       <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>    
-      <div class="float_btns">
-        <%- partial('_partial/totop') %>
-      </div>
     </main>
+    <div class="float_btns">
+      <%- partial('_partial/float-btns') %>
+    </div>
     <aside class="sidebar on">
       <%- partial('_partial/sidebar') %>
     </aside>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-ayer",
-  "version": "1.9.2",
+  "version": "1.9.5-0",
   "description": "a clean and elegant theme for hexo.",
   "scripts": {
     "dev": "rollup -c -w",

source-src/js/ayer.js

@@ -15,7 +15,7 @@
     }, searchAnimDuration);
   };
 
-  $(".nav-item-search").click(() => {
+  $(".nav-item-search").on("click", () => {
     if (isSearchAnim) return;
     startSearchAnim();
     $searchWrap.addClass("on");
@@ -24,7 +24,7 @@
     });
   });
 
-  $(document).mouseup((e) => {
+  $(document).on("mouseup", (e) => {
     const _con = $(".local-search");
     if (!_con.is(e.target) && _con.has(e.target).length === 0) {
       $searchWrap.removeClass("on");
@@ -32,7 +32,7 @@
   });
 
   // Not recommended in mobile, /search.xml is actually large.
-  if ($(".local-search").size()) {
+  if ($(".local-search").length) {
     $.getScript("/js/search.js", function () {
       searchFunc("/search.xml", "local-search-input", "local-search-result");
     });
@@ -67,7 +67,7 @@
   };
 
   // Share
-  $(".share-outer").click(() => $(".share-wrap").fadeToggle());
+  $(".share-outer").on("click", () => $(".share-wrap").fadeToggle());
 
   // Lazyload
   $("img.lazy").lazyload({
@@ -82,7 +82,7 @@
 
   // ScrollDown
   $(document).ready(function ($) {
-    $(".anchor").click(function (e) {
+    $(".anchor").on("click", function (e) {
       e.preventDefault();
       $("main").animate({ scrollTop: $(".cover").height() }, "smooth");
     });
@@ -102,7 +102,7 @@
 
     // Show and hide the scroll to top link based on scroll position
     scrollElem.hide();
-    $(".content").scroll(function () {
+    $(".content").on("scroll", () => {
       const scrollTop = $(".content").scrollTop();
       if (scrollTop > upperLimit) {
         $(scrollElem).stop().fadeTo(200, 0.6); // fade back in
@@ -112,7 +112,7 @@
     });
 
     // Scroll to top animation on click
-    $(scrollElem).click(function () {
+    $(scrollElem).on("click", () => {
       $(".content").animate({ scrollTop: 0 }, scrollSpeed);
       return false;
     });
@@ -135,18 +135,18 @@
   const $content = $(".content"),
     $sidebar = $(".sidebar");
 
-  $(".navbar-toggle").on("click", function () {
+  $(".navbar-toggle").on("click", () => {
     $(".content,.sidebar").addClass("anim");
     $content.toggleClass("on");
     $sidebar.toggleClass("on");
   });
 
   // Reward
-  $("#reward-btn").click(() => {
+  $("#reward-btn").on("click", () => {
     $("#reward").fadeIn(150);
     $("#mask").fadeIn(150);
   });
-  $("#reward .close, #mask").click(() => {
+  $("#reward .close, #mask").on("click", () => {
     $("#mask").fadeOut(100);
     $("#reward").fadeOut(100);
   });
@@ -159,7 +159,7 @@
     $("body").removeClass("darkmode");
     $("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line");
   }
-  $("#todark").click(() => {
+  $("#todark").on("click", () => {
     if (sessionStorage.getItem("darkmode") == 1) {
       $("body").removeClass("darkmode");
       $("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line");

source/dist/main.js

@@ -1 +1 @@
-!function(){"use strict";var e;function t(e,t){e=e.replace(/<%-sUrl%>/g,encodeURIComponent(t.sUrl)).replace(/<%-sTitle%>/g,encodeURIComponent(t.sTitle)).replace(/<%-sDesc%>/g,encodeURIComponent(t.sDesc)).replace(/<%-sPic%>/g,encodeURIComponent(t.sPic));window.open(e)}function o(){$(".wx-share-modal").removeClass("in ready"),$("#share-mask").hide()}function s(e,o){"weibo"===e?t("http://service.weibo.com/share/share.php?url=<%-sUrl%>&title=<%-sTitle%>&pic=<%-sPic%>",o):"qq"===e?t("http://connect.qq.com/widget/shareqq/index.html?url=<%-sUrl%>&title=<%-sTitle%>&source=<%-sDesc%>",o):"douban"===e?t("https://www.douban.com/share/service?image=<%-sPic%>&href=<%-sUrl%>&name=<%-sTitle%>&text=<%-sDesc%>",o):"qzone"===e?t("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%-sUrl%>&title=<%-sTitle%>&pics=<%-sPic%>&summary=<%-sDesc%>",o):"facebook"===e?t("https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>",o):"twitter"===e?t("https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>",o):"google"===e?t("https://plus.google.com/share?url=<%-sUrl%>",o):"weixin"===e&&($(".wx-share-modal").addClass("in ready"),$("#share-mask").show())}!function(e){let t=e(".search-form-wrap"),o=!1;e(".nav-item-search").click((()=>{var s;o||(o=!0,t.addClass("on"),s=function(){e(".local-search-input").focus()},setTimeout((function(){o=!1,s&&s()}),200))})),e(document).mouseup((o=>{const s=e(".local-search");s.is(o.target)||0!==s.has(o.target).length||t.removeClass("on")})),e(".local-search").size()&&e.getScript("/js/search.js",(function(){searchFunc("/search.xml","local-search-input","local-search-result")})),e(".share-outer").click((()=>e(".share-wrap").fadeToggle())),e("img.lazy").lazyload({effect:"fadeIn"}),e("#gallery").justifiedGallery({rowHeight:200,margins:5}),e(document).ready((function(e){e(".anchor").click((function(t){t.preventDefault(),e("main").animate({scrollTop:e(".cover").height()},"smooth")}))})),(()=>{const t=e("#totop");t.hide(),e(".content").scroll((function(){e(".content").scrollTop()>1e3?e(t).stop().fadeTo(200,.6):e(t).stop().fadeTo(200,0)})),e(t).click((function(){return e(".content").animate({scrollTop:0},1e3),!1}))})(),e(".article-entry").each((function(t){e(this).find("img").each((function(){if(e(this).parent().is("a"))return;const{alt:t}=this;t&&e(this).after('<span class="caption">'+t+"</span>")}))}));const s=e(".content"),r=e(".sidebar");e(".navbar-toggle").on("click",(function(){e(".content,.sidebar").addClass("anim"),s.toggleClass("on"),r.toggleClass("on")})),e("#reward-btn").click((()=>{e("#reward").fadeIn(150),e("#mask").fadeIn(150)})),e("#reward .close, #mask").click((()=>{e("#mask").fadeOut(100),e("#reward").fadeOut(100)})),1==sessionStorage.getItem("darkmode")?(e("body").addClass("darkmode"),e("#todark i").removeClass("ri-moon-line").addClass("ri-sun-line")):(e("body").removeClass("darkmode"),e("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line")),e("#todark").click((()=>{1==sessionStorage.getItem("darkmode")?(e("body").removeClass("darkmode"),e("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line"),sessionStorage.removeItem("darkmode")):(e("body").addClass("darkmode"),e("#todark i").removeClass("ri-moon-line").addClass("ri-sun-line"),sessionStorage.setItem("darkmode",1))}));console.log("%c%s%c%s%c%s","background-color: #49b1f5; color: #fff; padding: 8px; font-size: 14px;","主题不错？⭐star 支持一下 ->","background-color: #ffbca2; padding: 8px; font-size: 14px;","https://github.com/Shen-Yu/hexo-theme-ayer","background-color: #eaf8ff;","\n\n     _ __   _______ _____    \n    / \\ \\ \\ / / ____|  _  \\  \n   / _ \\ \\ V /|  _| | |_) |  \n  / ___ \\ | | | |___|  _ <   \n /_/   \\_\\ _| |_____|_| \\__\\ \n")}(jQuery),e={id:"JGjrOr2rebvP6q2a",ck:"JGjrOr2rebvP6q2a"},function(t){var o=window,s=document,r=e,a="".concat("https:"===s.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=s.createElement("script"),c=s.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=a,n.id="LA_COLLECT",r.d=n;var i=function(){o.LA.ids.push(r)};o.LA?o.LA.ids&&i():(o.LA=e,o.LA.ids=[],i()),c.parentNode.insertBefore(n,c)}();(()=>{let e=document.querySelectorAll(".share-sns");if(!e||0===e.length)return;let t=window.location.href,r=document.querySelector("title").innerHTML,a=document.querySelectorAll(".article-entry img").length?document.querySelector(".article-entry img").getAttribute("src"):"";""===a||/^(http:|https:)?\/\//.test(a)||(a=window.location.origin+a),e.forEach((e=>{e.onclick=o=>{s(e.getAttribute("data-type"),{sUrl:t,sPic:a,sTitle:r,sDesc:r})}})),document.querySelector("#mask").onclick=o,document.querySelector(".modal-close").onclick=o})()}();
+!function(){"use strict";var e;function t(e,t){e=e.replace(/<%-sUrl%>/g,encodeURIComponent(t.sUrl)).replace(/<%-sTitle%>/g,encodeURIComponent(t.sTitle)).replace(/<%-sDesc%>/g,encodeURIComponent(t.sDesc)).replace(/<%-sPic%>/g,encodeURIComponent(t.sPic));window.open(e)}function o(){$(".wx-share-modal").removeClass("in ready"),$("#share-mask").hide()}function s(e,o){"weibo"===e?t("http://service.weibo.com/share/share.php?url=<%-sUrl%>&title=<%-sTitle%>&pic=<%-sPic%>",o):"qq"===e?t("http://connect.qq.com/widget/shareqq/index.html?url=<%-sUrl%>&title=<%-sTitle%>&source=<%-sDesc%>",o):"douban"===e?t("https://www.douban.com/share/service?image=<%-sPic%>&href=<%-sUrl%>&name=<%-sTitle%>&text=<%-sDesc%>",o):"qzone"===e?t("http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=<%-sUrl%>&title=<%-sTitle%>&pics=<%-sPic%>&summary=<%-sDesc%>",o):"facebook"===e?t("https://www.facebook.com/sharer/sharer.php?u=<%-sUrl%>",o):"twitter"===e?t("https://twitter.com/intent/tweet?text=<%-sTitle%>&url=<%-sUrl%>",o):"google"===e?t("https://plus.google.com/share?url=<%-sUrl%>",o):"weixin"===e&&($(".wx-share-modal").addClass("in ready"),$("#share-mask").show())}!function(e){let t=e(".search-form-wrap"),o=!1;e(".nav-item-search").on("click",(()=>{var s;o||(o=!0,t.addClass("on"),s=function(){e(".local-search-input").focus()},setTimeout((function(){o=!1,s&&s()}),200))})),e(document).on("mouseup",(o=>{const s=e(".local-search");s.is(o.target)||0!==s.has(o.target).length||t.removeClass("on")})),e(".local-search").length&&e.getScript("/js/search.js",(function(){searchFunc("/search.xml","local-search-input","local-search-result")})),e(".share-outer").on("click",(()=>e(".share-wrap").fadeToggle())),e("img.lazy").lazyload({effect:"fadeIn"}),e("#gallery").justifiedGallery({rowHeight:200,margins:5}),e(document).ready((function(e){e(".anchor").on("click",(function(t){t.preventDefault(),e("main").animate({scrollTop:e(".cover").height()},"smooth")}))})),(()=>{const t=e("#totop");t.hide(),e(".content").on("scroll",(()=>{e(".content").scrollTop()>1e3?e(t).stop().fadeTo(200,.6):e(t).stop().fadeTo(200,0)})),e(t).on("click",(()=>(e(".content").animate({scrollTop:0},1e3),!1)))})(),e(".article-entry").each((function(t){e(this).find("img").each((function(){if(e(this).parent().is("a"))return;const{alt:t}=this;t&&e(this).after('<span class="caption">'+t+"</span>")}))}));const s=e(".content"),r=e(".sidebar");e(".navbar-toggle").on("click",(()=>{e(".content,.sidebar").addClass("anim"),s.toggleClass("on"),r.toggleClass("on")})),e("#reward-btn").on("click",(()=>{e("#reward").fadeIn(150),e("#mask").fadeIn(150)})),e("#reward .close, #mask").on("click",(()=>{e("#mask").fadeOut(100),e("#reward").fadeOut(100)})),1==sessionStorage.getItem("darkmode")?(e("body").addClass("darkmode"),e("#todark i").removeClass("ri-moon-line").addClass("ri-sun-line")):(e("body").removeClass("darkmode"),e("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line")),e("#todark").on("click",(()=>{1==sessionStorage.getItem("darkmode")?(e("body").removeClass("darkmode"),e("#todark i").removeClass("ri-sun-line").addClass("ri-moon-line"),sessionStorage.removeItem("darkmode")):(e("body").addClass("darkmode"),e("#todark i").removeClass("ri-moon-line").addClass("ri-sun-line"),sessionStorage.setItem("darkmode",1))}));console.log("%c%s%c%s%c%s","background-color: #49b1f5; color: #fff; padding: 8px; font-size: 14px;","主题不错？⭐star 支持一下 ->","background-color: #ffbca2; padding: 8px; font-size: 14px;","https://github.com/Shen-Yu/hexo-theme-ayer","background-color: #eaf8ff;","\n\n     _ __   _______ _____    \n    / \\ \\ \\ / / ____|  _  \\  \n   / _ \\ \\ V /|  _| | |_) |  \n  / ___ \\ | | | |___|  _ <   \n /_/   \\_\\ _| |_____|_| \\__\\ \n")}(jQuery),e={id:"JGjrOr2rebvP6q2a",ck:"JGjrOr2rebvP6q2a"},function(t){var o=window,s=document,r=e,n="".concat("https:"===s.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),a=s.createElement("script"),c=s.getElementsByTagName("script")[0];a.type="text/javascript",a.setAttribute("charset","UTF-8"),a.async=!0,a.src=n,a.id="LA_COLLECT",r.d=a;var i=function(){o.LA.ids.push(r)};o.LA?o.LA.ids&&i():(o.LA=e,o.LA.ids=[],i()),c.parentNode.insertBefore(a,c)}();(()=>{let e=document.querySelectorAll(".share-sns");if(!e||0===e.length)return;let t=window.location.href,r=document.querySelector("title").innerHTML,n=document.querySelectorAll(".article-entry img").length?document.querySelector(".article-entry img").getAttribute("src"):"";""===n||/^(http:|https:)?\/\//.test(n)||(n=window.location.origin+n),e.forEach((e=>{e.onclick=o=>{s(e.getAttribute("data-type"),{sUrl:t,sPic:n,sTitle:r,sDesc:r})}})),document.querySelector("#mask").onclick=o,document.querySelector(".modal-close").onclick=o})()}();

source/js/clickBoom1.js

@@ -18,134 +18,134 @@ let pointerX = 0;
 let pointerY = 0;
 
 let tap =
-    "ontouchstart" in window || navigator.msMaxTouchPoints
-        ? "touchstart"
-        : "mousedown";
+  "ontouchstart" in window || navigator.msMaxTouchPoints
+    ? "touchstart"
+    : "mousedown";
 
 // sea blue
 let colors = ["127, 180, 226", "157, 209, 243", "204, 229, 255"];
 
 function setCanvasSize() {
-    canvasEl.width = window.innerWidth;
-    canvasEl.height = window.innerHeight;
-    canvasEl.style.width = window.innerWidth + "px";
-    canvasEl.style.height = window.innerHeight + "px";
+  canvasEl.width = window.innerWidth;
+  canvasEl.height = window.innerHeight;
+  canvasEl.style.width = window.innerWidth + "px";
+  canvasEl.style.height = window.innerHeight + "px";
 }
 
 function updateCoords(e) {
-    pointerX = e.clientX || e.touches[0].clientX;
-    pointerY = e.clientY || e.touches[0].clientY;
+  pointerX = e.clientX || e.touches[0].clientX;
+  pointerY = e.clientY || e.touches[0].clientY;
 }
 
 function setParticuleDirection(p) {
-    let angle = (anime.random(0, 360) * Math.PI) / 180;
-    let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
-    let radius = [-1, 1][anime.random(0, 1)] * value;
-    return {
-        x: p.x + radius * Math.cos(angle),
-        y: p.y + radius * Math.sin(angle)
-    };
+  let angle = (anime.random(0, 360) * Math.PI) / 180;
+  let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
+  let radius = [-1, 1][anime.random(0, 1)] * value;
+  return {
+    x: p.x + radius * Math.cos(angle),
+    y: p.y + radius * Math.sin(angle),
+  };
 }
 
 function createParticule(x, y) {
-    let p = {};
-    p.x = x;
-    p.y = y;
-    p.color =
-        "rgba(" +
-        colors[anime.random(0, colors.length - 1)] +
-        "," +
-        anime.random(0.2, 0.8) +
-        ")";
-    p.radius = anime.random(minCircleRadius, maxCircleRadius);
-    p.endPos = setParticuleDirection(p);
-    p.draw = function () {
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.fillStyle = p.color;
-        ctx.fill();
-    };
-    return p;
+  let p = {};
+  p.x = x;
+  p.y = y;
+  p.color =
+    "rgba(" +
+    colors[anime.random(0, colors.length - 1)] +
+    "," +
+    anime.random(0.2, 0.8) +
+    ")";
+  p.radius = anime.random(minCircleRadius, maxCircleRadius);
+  p.endPos = setParticuleDirection(p);
+  p.draw = function () {
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+    ctx.fillStyle = p.color;
+    ctx.fill();
+  };
+  return p;
 }
 
 function createCircle(x, y) {
-    let p = {};
-    p.x = x;
-    p.y = y;
-    p.color = "#000";
-    p.radius = 0.1;
-    p.alpha = 0.5;
-    p.lineWidth = 6;
-    p.draw = function () {
-        ctx.globalAlpha = p.alpha;
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
-        ctx.lineWidth = p.lineWidth;
-        ctx.strokeStyle = p.color;
-        ctx.stroke();
-        ctx.globalAlpha = 1;
-    };
-    return p;
+  let p = {};
+  p.x = x;
+  p.y = y;
+  p.color = "#000";
+  p.radius = 0.1;
+  p.alpha = 0.5;
+  p.lineWidth = 6;
+  p.draw = function () {
+    ctx.globalAlpha = p.alpha;
+    ctx.beginPath();
+    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
+    ctx.lineWidth = p.lineWidth;
+    ctx.strokeStyle = p.color;
+    ctx.stroke();
+    ctx.globalAlpha = 1;
+  };
+  return p;
 }
 
 function renderParticule(anim) {
-    for (let i = 0; i < anim.animatables.length; i++) {
-        anim.animatables[i].target.draw();
-    }
+  for (let i = 0; i < anim.animatables.length; i++) {
+    anim.animatables[i].target.draw();
+  }
 }
 
 function animateParticules(x, y) {
-    let circle = createCircle(x, y);
-    let particules = [];
-    for (let i = 0; i < numberOfParticules; i++) {
-        particules.push(createParticule(x, y));
-    }
-    anime
-        .timeline()
-        .add({
-            targets: particules,
-            x: function (p) {
-                return p.endPos.x;
-            },
-            y: function (p) {
-                return p.endPos.y;
-            },
-            radius: 0.1,
-            duration: anime.random(minAnimeDuration, maxAnimeDuration),
-            easing: "easeOutExpo",
-            update: renderParticule
-        })
-        .add({
-            targets: circle,
-            radius: anime.random(minOrbitRadius, maxOrbitRadius),
-            lineWidth: 0,
-            alpha: {
-                value: 0,
-                easing: "linear",
-                duration: anime.random(600, 800)
-            },
-            duration: anime.random(1200, 1800),
-            easing: "easeOutExpo",
-            update: renderParticule,
-            offset: 0
-        });
+  let circle = createCircle(x, y);
+  let particules = [];
+  for (let i = 0; i < numberOfParticules; i++) {
+    particules.push(createParticule(x, y));
+  }
+  anime
+    .timeline()
+    .add({
+      targets: particules,
+      x: function (p) {
+        return p.endPos.x;
+      },
+      y: function (p) {
+        return p.endPos.y;
+      },
+      radius: 0.1,
+      duration: anime.random(minAnimeDuration, maxAnimeDuration),
+      easing: "easeOutExpo",
+      update: renderParticule,
+    })
+    .add({
+      targets: circle,
+      radius: anime.random(minOrbitRadius, maxOrbitRadius),
+      lineWidth: 0,
+      alpha: {
+        value: 0,
+        easing: "linear",
+        duration: anime.random(600, 800),
+      },
+      duration: anime.random(1200, 1800),
+      easing: "easeOutExpo",
+      update: renderParticule,
+      offset: 0,
+    });
 }
 
 let render = anime({
-    duration: Infinity,
-    update: function () {
-        ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
-    }
+  duration: Infinity,
+  update: function () {
+    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
+  },
 });
 
 document.addEventListener(
-    tap,
-    function (e) {
-        render.play();
-        updateCoords(e);
-        animateParticules(pointerX, pointerY);
-    },
-    false
+  tap,
+  function (e) {
+    render.play();
+    updateCoords(e);
+    animateParticules(pointerX, pointerY);
+  },
+  false
 );
 
 setCanvasSize();

source/js/clickBoom2.js

@@ -1,154 +1,180 @@
 class Circle {
-    constructor({ origin, speed, color, angle, context }) {
-      this.origin = origin
-      this.position = { ...this.origin }
-      this.color = color
-      this.speed = speed
-      this.angle = angle
-      this.context = context
-      this.renderCount = 0
-    }
+  constructor({ origin, speed, color, angle, context }) {
+    this.origin = origin;
+    this.position = { ...this.origin };
+    this.color = color;
+    this.speed = speed;
+    this.angle = angle;
+    this.context = context;
+    this.renderCount = 0;
+  }
 
-    draw() {
-      this.context.fillStyle = this.color
-      this.context.beginPath()
-      this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
-      this.context.fill()
-    }
+  draw() {
+    this.context.fillStyle = this.color;
+    this.context.beginPath();
+    this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
+    this.context.fill();
+  }
 
-    move() {
-      this.position.x = (Math.sin(this.angle) * this.speed) + this.position.x
-      this.position.y = (Math.cos(this.angle) * this.speed) + this.position.y + (this.renderCount * 0.3)
-      this.renderCount++
+  move() {
+    this.position.x = Math.sin(this.angle) * this.speed + this.position.x;
+    this.position.y =
+      Math.cos(this.angle) * this.speed +
+      this.position.y +
+      this.renderCount * 0.3;
+    this.renderCount++;
+  }
+}
+
+class Boom {
+  constructor({ origin, context, circleCount = 10, area }) {
+    this.origin = origin;
+    this.context = context;
+    this.circleCount = circleCount;
+    this.area = area;
+    this.stop = false;
+    this.circles = [];
+  }
+
+  randomArray(range) {
+    const length = range.length;
+    const randomIndex = Math.floor(length * Math.random());
+    return range[randomIndex];
+  }
+
+  randomColor() {
+    const range = ["8", "9", "A", "B", "C", "D", "E", "F"];
+    return (
+      "#" +
+      this.randomArray(range) +
+      this.randomArray(range) +
+      this.randomArray(range) +
+      this.randomArray(range) +
+      this.randomArray(range) +
+      this.randomArray(range)
+    );
+  }
+
+  randomRange(start, end) {
+    return (end - start) * Math.random() + start;
+  }
+
+  init() {
+    for (let i = 0; i < this.circleCount; i++) {
+      const circle = new Circle({
+        context: this.context,
+        origin: this.origin,
+        color: this.randomColor(),
+        angle: this.randomRange(Math.PI - 1, Math.PI + 1),
+        speed: this.randomRange(1, 6),
+      });
+      this.circles.push(circle);
     }
   }
 
-  class Boom {
-    constructor ({ origin, context, circleCount = 10, area }) {
-      this.origin = origin
-      this.context = context
-      this.circleCount = circleCount
-      this.area = area
-      this.stop = false
-      this.circles = []
-    }
-  
-    randomArray(range) {
-      const length = range.length
-      const randomIndex = Math.floor(length * Math.random())
-      return range[randomIndex]
-    }
-  
-    randomColor() {
-      const range = ['8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
-      return '#' + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range) + this.randomArray(range)
-    }
-  
-    randomRange(start, end) {
-      return (end - start) * Math.random() + start
-    }
-  
-    init() {
-      for(let i = 0; i < this.circleCount; i++) {
-        const circle = new Circle({
-          context: this.context,
-          origin: this.origin,
-          color: this.randomColor(),
-          angle: this.randomRange(Math.PI - 1, Math.PI + 1),
-          speed: this.randomRange(1, 6)
-        })
-        this.circles.push(circle)
+  move() {
+    this.circles.forEach((circle, index) => {
+      if (
+        circle.position.x > this.area.width ||
+        circle.position.y > this.area.height
+      ) {
+        return this.circles.splice(index, 1);
       }
-    }
-  
-    move() {
-      this.circles.forEach((circle, index) => {
-        if (circle.position.x > this.area.width || circle.position.y > this.area.height) {
-          return this.circles.splice(index, 1)
-        }
-        circle.move()
-      })
-      if (this.circles.length == 0) {
-        this.stop = true
-      }
-    }
-  
-    draw() {
-      this.circles.forEach(circle => circle.draw())
+      circle.move();
+    });
+    if (this.circles.length == 0) {
+      this.stop = true;
     }
   }
 
-  class CursorSpecialEffects {
-    constructor() {
-      this.computerCanvas = document.createElement('canvas')
-      this.renderCanvas = document.createElement('canvas')
+  draw() {
+    this.circles.forEach((circle) => circle.draw());
+  }
+}
 
-      this.computerContext = this.computerCanvas.getContext('2d')
-      this.renderContext = this.renderCanvas.getContext('2d')
+class CursorSpecialEffects {
+  constructor() {
+    this.computerCanvas = document.createElement("canvas");
+    this.renderCanvas = document.createElement("canvas");
 
-      this.globalWidth = window.innerWidth
-      this.globalHeight = window.innerHeight
+    this.computerContext = this.computerCanvas.getContext("2d");
+    this.renderContext = this.renderCanvas.getContext("2d");
 
-      this.booms = []
-      this.running = false
-    }
+    this.globalWidth = window.innerWidth;
+    this.globalHeight = window.innerHeight;
 
-    handleMouseDown(e) {
-      const boom = new Boom({
-        origin: { x: e.clientX, y: e.clientY },
-        context: this.computerContext,
-        area: {
-          width: this.globalWidth,
-          height: this.globalHeight
-        }
-      })
-      boom.init()
-      this.booms.push(boom)
-      this.running || this.run()
-    }
-  
-    handlePageHide() {
-      this.booms = []
-      this.running = false
-    }
-  
-    init() {
-      const style = this.renderCanvas.style
-      style.position = 'fixed'
-      style.top = style.left = 0
-      style.zIndex = '99999'
-      style.pointerEvents = 'none'
-  
-      style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
-      style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight
-  
-      document.body.append(this.renderCanvas)
-  
-      window.addEventListener('mousedown', this.handleMouseDown.bind(this))
-      window.addEventListener('pagehide', this.handlePageHide.bind(this))
-    }
-  
-    run() {
-      this.running = true
-      if (this.booms.length == 0) {
-        return this.running = false
-      }
-  
-      requestAnimationFrame(this.run.bind(this))
-  
-      this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
-      this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight)
-  
-      this.booms.forEach((boom, index) => {
-        if (boom.stop) {
-          return this.booms.splice(index, 1)
-        }
-        boom.move()
-        boom.draw()
-      })
-      this.renderContext.drawImage(this.computerCanvas, 0, 0, this.globalWidth, this.globalHeight)
-    }
+    this.booms = [];
+    this.running = false;
   }
 
-  const cursorSpecialEffects = new CursorSpecialEffects()
-  cursorSpecialEffects.init()
+  handleMouseDown(e) {
+    const boom = new Boom({
+      origin: { x: e.clientX, y: e.clientY },
+      context: this.computerContext,
+      area: {
+        width: this.globalWidth,
+        height: this.globalHeight,
+      },
+    });
+    boom.init();
+    this.booms.push(boom);
+    this.running || this.run();
+  }
+
+  handlePageHide() {
+    this.booms = [];
+    this.running = false;
+  }
+
+  init() {
+    const style = this.renderCanvas.style;
+    style.position = "fixed";
+    style.top = style.left = 0;
+    style.zIndex = "99999";
+    style.pointerEvents = "none";
+
+    style.width =
+      this.renderCanvas.width =
+      this.computerCanvas.width =
+        this.globalWidth;
+    style.height =
+      this.renderCanvas.height =
+      this.computerCanvas.height =
+        this.globalHeight;
+
+    document.body.append(this.renderCanvas);
+
+    window.addEventListener("mousedown", this.handleMouseDown.bind(this));
+    window.addEventListener("pagehide", this.handlePageHide.bind(this));
+  }
+
+  run() {
+    this.running = true;
+    if (this.booms.length == 0) {
+      return (this.running = false);
+    }
+
+    requestAnimationFrame(this.run.bind(this));
+
+    this.computerContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
+    this.renderContext.clearRect(0, 0, this.globalWidth, this.globalHeight);
+
+    this.booms.forEach((boom, index) => {
+      if (boom.stop) {
+        return this.booms.splice(index, 1);
+      }
+      boom.move();
+      boom.draw();
+    });
+    this.renderContext.drawImage(
+      this.computerCanvas,
+      0,
+      0,
+      this.globalWidth,
+      this.globalHeight
+    );
+  }
+}
+
+const cursorSpecialEffects = new CursorSpecialEffects();
+cursorSpecialEffects.init();