Jump to content
megaman

Full screen a DIV

Recommended Posts

I wish to make some DIV's expand and take up the full screen when clicked on.
.
I cant just animate their height and width to 100% because this would only work if they are in the top left of the screen when clicked, if they are anywhere else they will end up partially off screen.

 

Would the following steps achieve the effect I want

 

1) Place the DIV inside a parent DIV (so that I can place absolute positioning on it as default)
2) When clicked

  - change its position to fixed
 - animate its top and left properties to 0
- animate its height and width to 100%

Share this post


Link to post
Share on other sites

I have been experimenting with that and it does not work perfectly.

It only works if the parent DIVs position is top:0 left:0 since this means the child DIVs position does not change when it is given position:fixed
if you add any top or left to the parent DIV when you start the animation the child DIV jumps to a different part of the screen and then starts animating.

I need the child DIV to animate out from its current position (regardless of the parents position) until it fills the screen
and have fixed positioning to that the page cant be scrolled.

Share this post


Link to post
Share on other sites

Here is an example of animating a div at its current position to fill the viewport.

 

See the Pen PNBNmE by jonathan (@jonathan) on CodePen

 

Full screen mode:

 

See the Pen PNBNmE by jonathan (@jonathan) on CodePen

 

The above pen was used to help another user in the forum, but the technique is the same. You can always play with it to adjust it to your needs.

 

But once animated to fill the viewport. Then you should add a class with position:fixed. This way you don't have to deal with animating an element with position fixed, which will greatly increase the chance of jank, due to the nature of position fixed when placed on its own rendering layer. Then when you zoom back in remove the class with position fixed so it goes back to using position absolute.

 

The trick is to position your element with transforms (x and y) and then animate out using vh and vw units, and align the scaled element to x: 0 and y: 0. Which is aligning itself to the parent your absolutely positioned element is relative to. Which is it's parent with position relative! You could also animate scale but it depend it the element your scaling has children you want to be scaled as well.

 

:)

  • Like 2

Share this post


Link to post
Share on other sites

Here's the trick to doing a hero transition. You need to use 3 elements. Not only will this eliminate any positioning problems, but it will allow you to transition to other things. Check out the animated gif. It's using hero transitions during page changes, which would be pretty hard to do using only 1 or 2 elements. You can play with it here…
 
http://blog.scottlogic.com/alee/assets/angular-hero/app/#/view1
 
 
A7sECoa.gif
 
 
Here's how it works. You have 2 anchor elements, which would be the elements it's transitioning from and to. The third element is a clone of the from element, and is used to carry out the morph between the two anchor elements.
 
Before the animation starts, it calculates the position of the two anchor elements, and the from element is cloned. The clone is appended to the body and positioned absolutely on top of the from element. The anchor elements are then hidden, and the animation begins. When the animation ends, the clone is removed and the to element is made visible.
 
It will work with responsive layouts and scroll changes. You can test it out by making your screen really narrow. Check it out. 

 

See the Pen WwgQEV?editors=0010 by osublake (@osublake) on CodePen


 

  • Like 7

Share this post


Link to post
Share on other sites

That's fantastic, Blake!

Share this post


Link to post
Share on other sites

Thanks! If you can remember back a while ago, I came up with a proposal for a style property. The whole idea behind that was to make doing these type of animations easier.

 

Here's the prototype from the proposal. I haven't thought about it much since I posted that, but it's still a pretty cool idea.

See the Pen gbjqbE by osublake (@osublake) on CodePen

  • Like 5

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.