divをオフスクリーンで表示させる

Question

私は、純粋なjavascriptを使用してdivをブラウザの拡張なしで画面の横から表示させる必要がある場合、この割り当てを行っています。コメントで言われたこと、あなたがあなたのdivを移動したい方向に言うことはありません

function moveImg() { 
 

 
    var div = document.getElementsByTagName('div')[0]; 
 

 
    var pos = 500; 
 

 
    var id = setInterval(Move, 500); 
 

 
    function Move() { 
 
    if (pos <= 0) { 
 
     clearInterval(id); 
 

 
    } else { 
 
     pos++; 
 
     div.style.right = pos + 'px'; 
 
     div.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
moveImg()

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: tomato; 
 
}

<div></div>

Answer 1

のように、またどの位置からそれが必要：これは私がこれまで持っているものです開始。私はトップの開始位置を設定しました

：100を、左：100と1pxによって各秒をtopとleft値を減らすことを：私は、一般的に変換使用したい

function moveImg() { 
 
    var div = document.getElementsByTagName('div')[0]; 
 
    var pos = 100; 
 
    var id = setInterval(Move, 500); 
 

 
function Move() { 
 
    if (pos <= 0) { 
 
    clearInterval(id); 
 
    } else { 
 
    pos--; 
 
    div.style.left = pos + 'px'; 
 
    div.style.top = pos + 'px'; 
 
    } 
 
    } 
 
} 
 

 
moveImg()

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background: tomato; 
 
    position: relative; 
 
    top: 100px; 
 
    left: 100px; 
 
}

<div></div>

Answer 2

。

私はいくつかの数学をやったことがありますが、私はコードにコメントしましたが、助けが必要なことがあればお気軽にお尋ねください。

function moveImg() { 
 
    var div = document.getElementsByTagName('div')[0]; 
 

 
    var posX = document.body.clientWidth - div.offsetWidth; // start position for X 
 
    var posY = document.body.clientHeight - div.offsetHeight; // start position for Y 
 
    var tarX = posX/2; // end position for X 
 
    var tarY = posY/2; // end position for Y 
 
    var time = 5; // how many seconds should the animation take 
 
    var fps = 60; // frames per second, heigher is smoother but requires more power 
 
    var stepX = ((posX - tarX)/(time * fps)); // how far X should move each frame 
 
    var stepY = ((posY - tarY)/(time * fps)); // how far Y should move each frame 
 

 
    var id = setInterval(Move, (1000/fps)); 
 

 
    div.style.transform = "translate(" + posX + "px, " + posY + "px)"; 
 
    div.style.opacity = "1"; 
 

 
    function Move() { 
 
    if (posX <= tarX && posY <= tarY) { 
 
     clearInterval(id); 
 
    } else { 
 
     posX -= stepX; 
 
     posY -= stepY; 
 
     div.style.transform = "translate(" + posX + "px, " + posY + "px)"; 
 
    } 
 
    } 
 
} 
 
moveImg();

body { 
 
    margin: 0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
div { 
 
    display: inline-block; 
 
    color: white; 
 
    padding: 15px 30px; 
 
    background: tomato; 
 
    opacity: 0; 
 
}

<div>Example!</div>