kosmastsk kosmastsk - 3 months ago 10
CSS Question

how to move object to specific coordinates on the screen with js

Is there a way to move an object, such as an image, to specific coordinates on the screen, using JS or jQuery?
I mean not to use percentage or pixels for its position and the distance from top/left.

More specifically, I want by clicking an image to trigger the following event: Some images, that begin from the center of the screen, to animate and move to specific position on the screen, in a way that this position does not change when the width and height of the window changes.

Is there a way, for example, to divide the screen into 100 pieces and make the image be always on the 40th of them?

Or will I have to use SVG animation for that?

Actually I want to make the background image, with the image that animates, fully responsive ..

Below is my code:
html -->

<div class="fullmenu">
<img id="stable" src="menu/stable.svg">
<img id="fr7" src="menu/fr7.svg">
</div>


CSS -->

#fullmenu{
position: relative;
}
#stable{
position: absolute;
}
#fr7{
position: absolute;
width: auto;
top:0;
left:0;
}


jQuery -->

$(document).ready(function(){
$("#stable").one("click", function(){
$("#fr7").animate({
top:"+=220",
left:"+=420"
},2000);
});
});

Pat Pat
Answer
$(document).ready(function(){
    $("#stable").one("click", function(){
        $("#fr7").animate({
          top: "40vh",
          left: "40vw"
        },2000);
    });
});

Using Viewport Sized Typography you can achieve what you are describing.

You could also use % such as top: '40%', left: '40%' however the % are based upon the element's first relative parent's size. So unless #fullmenu is 100% of the screen size (both height and width) it won't work.

Comments