CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
castlenibill
castlenibill

Reputation: 464

Animate an element to the size of screen in fixed position

How do I animate a <div> to expand to fit the screen upon clicking. All while staying in fixed position, then revealing the contents of that <div>

Image:

sample

Upvotes: 6

Views: 6081

Answers (2)

Max
Max

Reputation: 496

You can use transform: scale( ) to scale the full screen box proportionally down and up. Scaling also affects the content of the box. The small version of the box then has the same aspect ratio as the full screen box.

Example

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  cursor: pointer;
  background-color: red;
  
  /* make the box full screen */
  width: 100vw; /* IE9+ */
  height:100vh; /* IE9+ */
  top: 0;
  left: 0;

  /* scale it down to 0.1 (10%) initially,
     make an offset from bottom left */
  -ms-transform: translate(50px, -50px) scale(0.1); /* IE9 */
  -ms-transform-origin: left bottom; /* IE9 */
  transform: translate(50px, -50px) scale(0.1);
  transform-origin: left bottom;

  /* smooth transition (IE10+) */
  -webkit-transition: all 0.7s ease;
          transition: all 0.7s ease;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen {
  /* Your override style:
     remove offset, scale it to 1 (100%) */
  -ms-transform: translate(0px, 0px) scale(1); /* IE9 */
  transform: translate(0px, 0px) scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>click the box</div>
<div id="box">your content</div>

Upvotes: 5

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

  1. Set a CSS3 transition to your element.
  2. Create a class that makes your element 100vw and 100vh (viewport width height units)
  3. Add that class on click

$("#box").on("click", function() {
  $(this).toggleClass("fullScreen");
});
html, body{height:100%;margin:0;}

/* YOUR BOX */
#box{
  position: fixed;
  overflow: hidden; /* in order to contain content */
  
  /* The initial styles: */
  border-radius: 25px;
  background: red;
  left:50px; bottom:50px;
  width: 50px;
  height: 50px;
  

  /* TRANSITION TO THE RESCUE */
          transition: 0.7s;
  -webkit-transition: 0.7s;
}

/* ADD THIS CLASS WITH JS */
#box.fullScreen{
  /* Your override styles: */
  border-radius: 0;
  background: gold;
  left:0; bottom:0;
  width: 100vw;
  height:100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">CLICK</div>

Upvotes: 8

Related Questions