mousemove

event methods

offset:イベントターゲットオブジェクトの相対マウス座標位置を返します.

ページ:スクロール画面を含むドキュメント全体に基づいています.スクロール時に値を変更します.

client:ブラウザベースでスクロールは無視されます.

screen:フルディスプレイ画面を基準に、ブラウザを移動するときの値は同じです.
http://megaton111.cafe24.com/2016/11/29/clientx-offsetx-pagex-screenx%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90/

🎨drawing

図面はmousedownアクティビティから開始します.マウスポインタをx、y変数に保存し、isDrawingをtrueに設定します.

mousemove isDrawingがtrueの場合、drawLine関数を呼び出して格納されたx、y変数から現在の位置に描画します.drawLine関数の戻り値を適用し、x、y変数に格納します.

mouseupを使用すると、最後の部分が描画され、x、y変数0が与えられ、isDrawingがfalseに設定されて停止します.

let isDrawing = false;
let x = 0;
let y = 0;

const myPics = document.getElementById('myPics');
const context = myPics.getContext('2d');

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.
myPics.addEventListener('mousedown', e => {
    x = e.offsetX;
    y = e.offsetY;
    isDrawing = true;
});

myPics.addEventListener('mousemove', e => {
    if(isDrawing === true) {
        drawLine(context, x, y, e.offsetX, e.offsetY);
        x = e.offsetX;
        y = e.offsetY;
    }
});

window.addEventListener('mouseup', e => {
    if(isDrawing === true) {
        drawLine(context, x, y, e.offsetX, e.offsetY);
        x = 0;
        y = 0;
        isDrawing = false;
    }
});

function drawLine (context, x1, y1, x2, y2) {
    context.beginPath();
    context.strokeStyle = 'black';
    context.lineWidth = 1;
    context.moveTo(x1, y1);
    context.lineTo(x2, y2);
    context.stroke();
    context.closePath();
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

🏝img

授業中にやってたけど、この効果が好きで面白かった.

.page-container > .2つのpage-back親子関係のdivを作成します.

親divの位置:スクリーンに固定され、子供divの位置:絶対サイズが20%を超える.

の下にmainがあります.js
TransformはGPUを使用しているため、CPUから分離され、marginよりも速度が向上しています.

const pageContainer = document.querySelector('.page-container');
const pageBack = document.querySelector('.page-back');

// 현재 화면(Viewport)의 크기
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

pageContainer.addEventListener('mousemove', function(e){
    // mousemove 이벤트 객체의 pageX, pageY가 좌표값
    // moveX, moveY는 중앙이 기준으로 `+ <-x-> -` 보통의 x,y 좌표의 y축 기준 거울상.
    const moveX = ((windowWidth/2) - e.pageX) * 0.1;
    const moveY = ((windowHeight/2) - e.pageY) * 0.1;

    // pageBack.style.marginLeft = `${moveX}px`;
    // pageBack.style.marginTop = `${moveY}px`;
  
    pageBack.style.transform = `translate(${moveX}px, ${moveY}px)`;
})