diff --git a/src/js/script.js b/src/js/script.js index 1ffb648..6b5f950 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -1,10 +1,38 @@ -import { BASE_DIR } from '../constants.yml' -import Sample from '@/lib/Sample'; +const SPEED = 0.1; -const sample = new Sample({ - name: 'world' -}); +const el = document.querySelector('.sample-icon'); + +let mousePos; +let logoPos = [window.innerWidth / 2, window.innerHeight / 2]; +let logoRotate = 0; + +function update() { + if (mousePos) { + logoPos = [ + 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; + } +} + +function render() { + el.style.transform = [ + `translate(${logoPos[0]}px, ${logoPos[1]}px)`, + `rotate(${logoRotate}deg)` + ].join(' '); +} + +function loop () { + update(); + render(); + requestAnimationFrame(loop); +} +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]; }); 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..c8126b1 100644 --- a/src/scss/module/_sample-icon.scss +++ b/src/scss/module/_sample-icon.scss @@ -1,8 +1,12 @@ .sample-icon { $size: 128px; - margin: 10px 0px; 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; }