Miles Miles - 1 year ago 141
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;

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:

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 Source

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

$('.name_slogan').animate({top: $(window).width()*0.07}, 5000); 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download