回答編集履歴

調整

2024/09/26 09:51

投稿

yambejp

スコア116724

test CHANGED Viewed

@@ -33,32 +33,27 @@
 </style>
 <script>
 window.addEventListener('DOMContentLoaded', ()=>{
-  let mouseX = window.innerWidth / 2;
+  const mouse={X:window.innerWidth / 2,Y:window.innerHeight};
-  let mouseY = window.innerHeight / 2;
-  let illustrationX = mouseX;
-  let illustrationY = mouseY;
-  const illustration = document.querySelector(".illustration");
+  const illust={X:mouse.X,Y:mouse.Y,elem:document.querySelector(".illustration")};
-  illustration.onload = function () {
-    illustration.setAttribute('hidden',1);
+  illust.elem.setAttribute('hidden',1);
-    illustrationX = mouseX;
+  illust.X = mouse.X;
-    illustrationY = mouseY;
+  illust.Y = mouse.Y;
-    updateIllustration();
-  };
-  function updateIllustration() {
+  const updateIllustration=()=>{
-    let dx = mouseX - illustrationX;
+    let dx = mouse.X - illust.X;
-    let dy = mouseY - illustrationY;
+    let dy = mouse.Y - illust.Y;
     let delayFactor = 0.1;
-    illustrationX += dx * delayFactor;
+    illust.X += dx * delayFactor;
-    illustrationY += dy * delayFactor;
+    illust.Y += dy * delayFactor;
-    illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
+    illust.elem.style.transform = 'translate(' + (illust.X - illust.elem.width / 2) + 'px, ' + (illust.Y - illust.elem.height / 2) + 'px)';
     requestAnimationFrame(updateIllustration);
   }
+  updateIllustration();
-  document.addEventListener('mousemove',function(e) {
+  document.addEventListener('mousemove',e=>{
-    illustration.removeAttribute('hidden');
+    illust.elem.removeAttribute('hidden');
     const orgY = document.body.getBoundingClientRect().top;
     const r = e.target.getBoundingClientRect();
-    mouseX = e.offsetX + r.left;
+    mouse.X = e.offsetX + r.left;
-    mouseY = e.offsetY + r.top - orgY;
+    mouse.Y = e.offsetY + r.top - orgY;
   });
   const maxClicks = 6;
   const randomImages = [
@@ -68,19 +63,19 @@
     'https://via.placeholder.com/100x100/ffff00/ffffff?text=4',
     'https://via.placeholder.com/100x100/00ffff/ffffff?text=5'
     ].map(x=>Object.assign(document.createElement('img'),{src:x,className:'random-image'}));
-  document.addEventListener('click',function(event) {
+  document.addEventListener('click',()=>{
-    const clickCounter=document.querySelectorAll('.random-image').length+1;
+    const clickCounter=document.querySelectorAll('.random-image').length;
-    if (clickCounter < maxClicks) {
+    if (clickCounter < maxClicks-1) {
-      let randomIndex = Math.floor(Math.random() * randomImages.length);
+      const randomIndex = Math.floor(Math.random() * randomImages.length);
       const randomImage = randomImages[randomIndex].cloneNode(true);
-      randomImage.style.left = (mouseX - randomImage.width / 2) + 'px';
+      randomImage.style.left = `${mouse.X - randomImage.width  / 2}px`;
-      randomImage.style.top = (mouseY - randomImage.height / 2) + 'px';
+      randomImage.style.top  = `${mouse.Y - randomImage.height / 2}px`;
       document.body.appendChild(randomImage);
     }else{
-      document.querySelectorAll('.random-image').forEach(function (image) {
+      document.querySelectorAll('.random-image').forEach(image=>{
         image.style.opacity = 0;
-        image.addEventListener('transitionend', function () {
+        image.addEventListener('transitionend',()=>{
-            image.remove();
+          image.remove();
         });
       });
     }
@@ -90,3 +85,4 @@
 <img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
 <div id="hero"></div>
 ```
+※再調整

chousei

2024/09/26 09:09

投稿

yambejp

スコア116724

test CHANGED Viewed

@@ -22,7 +22,6 @@
 will-change: transform;
 z-index: 5;
 }
-.active {display: block;}
 .random-image {
 position: absolute;
 transition: opacity 0.5s linear;
@@ -54,19 +53,13 @@
     illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
     requestAnimationFrame(updateIllustration);
   }
-  document.addEventListener('mousemove',onMouseMove);
+  document.addEventListener('mousemove',function(e) {
-  function onMouseMove(e) {
     illustration.removeAttribute('hidden');
     const orgY = document.body.getBoundingClientRect().top;
     const r = e.target.getBoundingClientRect();
     mouseX = e.offsetX + r.left;
-    mouseY = e.offsetY + r.top-orgY;
+    mouseY = e.offsetY + r.top - orgY;
-  }
+  });
-  hero.addEventListener('mouseover', () => handlerMouseStoker(true));
-  hero.addEventListener('mouseout', () => handlerMouseStoker(false));
-  function handlerMouseStoker(isActive) {
-    illustration.classList.toggle('active', isActive);
-  }
   const maxClicks = 6;
   const randomImages = [
     'https://via.placeholder.com/100x100/ff0000/ffffff?text=1',
@@ -94,9 +87,6 @@
   });
 });
 </script>
-</body>
-</html>
 <img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
 <div id="hero"></div>
 ```

調整

2024/09/26 09:01

投稿

yambejp

スコア116724

test CHANGED Viewed

@@ -1,11 +1,102 @@
-「.illustration 」に設定されている「display: none;」を外してください
+ざっくりリファクタリングしときました
-それとonMouseMoveにはclientではなくoffsetを指定してください
+実際には使ってないソースが残っているかもしれませんが、あしからず
-```javascript
+```html
-        function onMouseMove(event) {
-            //mouseX = event.clientX;
+<style>
+body {
-            //mouseY = event.clientY;
+margin: 0;
-            mouseX = event.offsetX;
+position: relative;
+height: 200vh;
+width: 100%;
-            mouseY = event.offsetY;
+background-color: #e97d7d;
-       }
+}
+#hero {
+width: 100vw;
+height: 120vh;
+background-color: rgb(129, 125, 236);
+margin-top: 0;
+position: absolute;
+}
+.illustration {
+position: absolute;
+pointer-events: none;
+will-change: transform;
+z-index: 5;
+}
+.active {display: block;}
+.random-image {
+position: absolute;
+transition: opacity 0.5s linear;
+opacity: 1;
+}
+* {
+outline: 2px solid red;
+}
+</style>
+<script>
+window.addEventListener('DOMContentLoaded', ()=>{
+  let mouseX = window.innerWidth / 2;
+  let mouseY = window.innerHeight / 2;
+  let illustrationX = mouseX;
+  let illustrationY = mouseY;
+  const illustration = document.querySelector(".illustration");
+  illustration.onload = function () {
+    illustration.setAttribute('hidden',1);
+    illustrationX = mouseX;
+    illustrationY = mouseY;
+    updateIllustration();
+  };
+  function updateIllustration() {
+    let dx = mouseX - illustrationX;
+    let dy = mouseY - illustrationY;
+    let delayFactor = 0.1;
+    illustrationX += dx * delayFactor;
+    illustrationY += dy * delayFactor;
+    illustration.style.transform = 'translate(' + (illustrationX - illustration.width / 2) + 'px, ' + (illustrationY - illustration.height / 2) + 'px)';
+    requestAnimationFrame(updateIllustration);
+  }
+  document.addEventListener('mousemove',onMouseMove);
+  function onMouseMove(e) {
+    illustration.removeAttribute('hidden');
+    const orgY = document.body.getBoundingClientRect().top;
+    const r = e.target.getBoundingClientRect();
+    mouseX = e.offsetX + r.left;
+    mouseY = e.offsetY + r.top-orgY;
+  }
+  hero.addEventListener('mouseover', () => handlerMouseStoker(true));
+  hero.addEventListener('mouseout', () => handlerMouseStoker(false));
+  function handlerMouseStoker(isActive) {
+    illustration.classList.toggle('active', isActive);
+  }
+  const maxClicks = 6;
+  const randomImages = [
+    'https://via.placeholder.com/100x100/ff0000/ffffff?text=1',
+    'https://via.placeholder.com/100x100/00ff00/ffffff?text=2',
+    'https://via.placeholder.com/100x100/0000ff/ffffff?text=3',
+    'https://via.placeholder.com/100x100/ffff00/ffffff?text=4',
+    'https://via.placeholder.com/100x100/00ffff/ffffff?text=5'
+    ].map(x=>Object.assign(document.createElement('img'),{src:x,className:'random-image'}));
+  document.addEventListener('click',function(event) {
+    const clickCounter=document.querySelectorAll('.random-image').length+1;
+    if (clickCounter < maxClicks) {
+      let randomIndex = Math.floor(Math.random() * randomImages.length);
+      const randomImage = randomImages[randomIndex].cloneNode(true);
+      randomImage.style.left = (mouseX - randomImage.width / 2) + 'px';
+      randomImage.style.top = (mouseY - randomImage.height / 2) + 'px';
+      document.body.appendChild(randomImage);
+    }else{
+      document.querySelectorAll('.random-image').forEach(function (image) {
+        image.style.opacity = 0;
+        image.addEventListener('transitionend', function () {
+            image.remove();
+        });
+      });
+    }
+  });
+});
+</script>
+</body>
+</html>
+<img src='https://via.placeholder.com/50x50/000000/ffffff?text=Cursor' alt="" class="illustration">
+<div id="hero"></div>
 ```

調整

2024/09/26 07:34

投稿

yambejp

スコア116724

test CHANGED Viewed

@@ -1 +1,11 @@
 「.illustration 」に設定されている「display: none;」を外してください
+それとonMouseMoveにはclientではなくoffsetを指定してください
+```javascript
+        function onMouseMove(event) {
+            //mouseX = event.clientX;
+            //mouseY = event.clientY;
+            mouseX = event.offsetX;
+            mouseY = event.offsetY;
+       }
+```