From 5bd8591239b7f77b2d3e826c1a916ae7f8279e21 Mon Sep 17 00:00:00 2001 From: nobii Date: Tue, 16 Oct 2018 20:34:09 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E4=BD=8D=E7=BD=AE=E7=A7=BB=E5=8B=95?= =?UTF-8?q?=E3=81=BE=E3=81=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/script.js | 21 ++++++++++++++------- src/pug/page/index.pug | 1 - src/scss/module/_sample-icon.scss | 5 ++++- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/js/script.js b/src/js/script.js index 1ffb648..a543350 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1,10 +1,17 @@ -import { BASE_DIR } from '../constants.yml' -import Sample from '@/lib/Sample'; +const el = document.querySelector('.sample-icon'); -const sample = new Sample({ - name: 'world' -}); +let mousePos; + +function loop () { + if (mousePos) { + el.style.left = `${mousePos[0]}px`; + el.style.top = `${mousePos[1]}px`; + } + requestAnimationFrame(loop); +} -document.querySelector('.wrapper').addEventListener('click', () => { - console.log(`hello, ${sample.name}. Base directory is ${BASE_DIR}.`); +window.addEventListener('mousemove', (e) => { + mousePos = [e.pageX, e.pageY]; }); + +requestAnimationFrame(loop); diff --git a/src/pug/page/index.pug b/src/pug/page/index.pug index 70ee491..532d067 100644 --- a/src/pug/page/index.pug +++ b/src/pug/page/index.pug @@ -9,4 +9,3 @@ prepend config-block block content-block .sample-icon - | hello, world! diff --git a/src/scss/module/_sample-icon.scss b/src/scss/module/_sample-icon.scss index 205a1f5..cc21c40 100644 --- a/src/scss/module/_sample-icon.scss +++ b/src/scss/module/_sample-icon.scss @@ -1,8 +1,11 @@ .sample-icon { $size: 128px; - margin: 10px 0px; width: $size; height: $size; + margin-left: (-$size / 2); background-image: image-url('html5.png'); background-repeat: no-repeat; + position: absolute; + top: 0; + left: 0; } From 0727732e9725efde8f76c8cfd20ce57af448e69a Mon Sep 17 00:00:00 2001 From: nobii Date: Tue, 16 Oct 2018 20:36:03 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E9=81=85=E5=BB=B6=E3=81=A7=E3=81=A4?= =?UTF-8?q?=E3=81=84=E3=81=A6=E3=81=8F=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/script.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/js/script.js b/src/js/script.js index a543350..872be12 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1,11 +1,18 @@ +const SPEED = 0.1; + const el = document.querySelector('.sample-icon'); let mousePos; +let logoPos = [0, 0]; function loop () { if (mousePos) { - el.style.left = `${mousePos[0]}px`; - el.style.top = `${mousePos[1]}px`; + logoPos = [ + logoPos[0] + (mousePos[0] - logoPos[0]) * SPEED, + logoPos[1] + (mousePos[1] - logoPos[1]) * SPEED, + ]; + el.style.left = `${logoPos[0]}px`; + el.style.top = `${logoPos[1]}px`; } requestAnimationFrame(loop); } From 763420d1897c7cc1a98d192660290d46d3fe09e7 Mon Sep 17 00:00:00 2001 From: nobii Date: Tue, 16 Oct 2018 20:39:02 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E5=9B=9E=E8=BB=A2=E3=82=82=E3=81=8B?= =?UTF-8?q?=E3=81=91=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/script.js | 6 ++++++ src/scss/module/_sample-icon.scss | 1 + 2 files changed, 7 insertions(+) diff --git a/src/js/script.js b/src/js/script.js index 872be12..8cc47cf 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -4,6 +4,7 @@ const el = document.querySelector('.sample-icon'); let mousePos; let logoPos = [0, 0]; +let logoRotate = 0; function loop () { if (mousePos) { @@ -11,8 +12,13 @@ function loop () { logoPos[0] + (mousePos[0] - logoPos[0]) * SPEED, logoPos[1] + (mousePos[1] - logoPos[1]) * SPEED, ]; + logoRotate = 360 * Math.atan2( + mousePos[1] - logoPos[1], + mousePos[0] - logoPos[0], + ) / (Math.PI * 2) + 90; el.style.left = `${logoPos[0]}px`; el.style.top = `${logoPos[1]}px`; + el.style.transform = `rotate(${logoRotate}deg)`; } requestAnimationFrame(loop); } diff --git a/src/scss/module/_sample-icon.scss b/src/scss/module/_sample-icon.scss index cc21c40..1c33356 100644 --- a/src/scss/module/_sample-icon.scss +++ b/src/scss/module/_sample-icon.scss @@ -8,4 +8,5 @@ position: absolute; top: 0; left: 0; + transform-origin: 50% 0%; } From bf8deacdbd983ac437156172d667651adaa3d032 Mon Sep 17 00:00:00 2001 From: nobii Date: Tue, 16 Oct 2018 20:40:06 +0900 Subject: [PATCH 4/6] =?UTF-8?q?=E5=88=9D=E6=9C=9F=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E3=82=92=E3=81=8B=E3=81=88=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/js/script.js b/src/js/script.js index 8cc47cf..483ed99 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -3,7 +3,7 @@ const SPEED = 0.1; const el = document.querySelector('.sample-icon'); let mousePos; -let logoPos = [0, 0]; +let logoPos = [window.innerWidth / 2, window.innerHeight / 2]; let logoRotate = 0; function loop () { @@ -16,10 +16,10 @@ function loop () { mousePos[1] - logoPos[1], mousePos[0] - logoPos[0], ) / (Math.PI * 2) + 90; - el.style.left = `${logoPos[0]}px`; - el.style.top = `${logoPos[1]}px`; - el.style.transform = `rotate(${logoRotate}deg)`; } + el.style.left = `${logoPos[0]}px`; + el.style.top = `${logoPos[1]}px`; + el.style.transform = `rotate(${logoRotate}deg)`; requestAnimationFrame(loop); } From 73875c6959b9c69f91ae5fad98568dafab903b0a Mon Sep 17 00:00:00 2001 From: nobii Date: Tue, 16 Oct 2018 20:44:41 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E7=B8=A6=E3=82=82=E3=82=BB=E3=83=B3?= =?UTF-8?q?=E3=82=BF=E3=83=BC=E3=81=AB=E7=BD=AE=E3=81=93=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scss/module/_sample-icon.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/module/_sample-icon.scss b/src/scss/module/_sample-icon.scss index 1c33356..c8126b1 100644 --- a/src/scss/module/_sample-icon.scss +++ b/src/scss/module/_sample-icon.scss @@ -2,11 +2,11 @@ $size: 128px; width: $size; height: $size; + margin-top: (-$size / 2); margin-left: (-$size / 2); background-image: image-url('html5.png'); background-repeat: no-repeat; position: absolute; top: 0; left: 0; - transform-origin: 50% 0%; } From 54273876c0fa60abee5078dc842a08c126308b2e Mon Sep 17 00:00:00 2001 From: nobii Date: Fri, 19 Oct 2018 18:38:53 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E3=82=8A=E3=81=A3=E3=81=B5=E3=81=81?= =?UTF-8?q?=E3=81=8F=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/js/script.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/src/js/script.js b/src/js/script.js index 483ed99..6b5f950 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -6,7 +6,7 @@ let mousePos; let logoPos = [window.innerWidth / 2, window.innerHeight / 2]; let logoRotate = 0; -function loop () { +function update() { if (mousePos) { logoPos = [ logoPos[0] + (mousePos[0] - logoPos[0]) * SPEED, @@ -17,14 +17,22 @@ function loop () { mousePos[0] - logoPos[0], ) / (Math.PI * 2) + 90; } - el.style.left = `${logoPos[0]}px`; - el.style.top = `${logoPos[1]}px`; - el.style.transform = `rotate(${logoRotate}deg)`; +} + +function render() { + el.style.transform = [ + `translate(${logoPos[0]}px, ${logoPos[1]}px)`, + `rotate(${logoRotate}deg)` + ].join(' '); +} + +function loop () { + update(); + render(); requestAnimationFrame(loop); } +requestAnimationFrame(loop); window.addEventListener('mousemove', (e) => { mousePos = [e.pageX, e.pageY]; }); - -requestAnimationFrame(loop);