Miles Miles - 5 months ago 16
CSS Question

JQuery animate to a position based on vw

I have a title whos position from the top of the page is based on margin-top with a vw value.

.name_slogan {
width: 1000px;
margin: auto;
z-index: 1;
margin-top:7vw;
}


I'd like this title to move in from above and then have the title margin-top behave as a vw normally would. Meaning it grows and shrinks as the window is resized.

So far, I have moved the div off the page on page load:

$('.name_slogan').css({
position: 'relative',
top: '-300px'
});


And then I can bring it back on to a set position:

$('.name_slogan').animate({top: "200px"}, 5000);


But then, of course, vw does not work. So if possible, I'd like something like this non working code:

$('.name_slogan').animate({top: "7vw"}, 5000);

Answer

jQuery can access your viewport dimensions on its own - you should be able to do

$('.name_slogan').animate({top: $(window).width()*0.07}, 5000);