CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jordan H
Jordan H

Reputation: 55715

Animate div presentation - zoom in from center

I would like to display a div after the user presses a button on a web page. I want the div to zoom inwards from the center of the screen. I'd like to achieve an effect similar to that in iCloud for creating a new document. How could such an effect be achieved?

The content of the div will be static and scrollable, it will consist of a toolbar with a button very similar to the element on iCloud.

gif

If possible, a pure JavaScript solution would be awesome, but I'm open to using jQuery.

Upvotes: 2

Views: 202

Answers (2)

Eyal
Eyal

Reputation: 788

This is a Vanilla JS solution as the OP requested. The reason there are no fallbacks is to make the snippet smaller.

document.addEventListener('DOMContentLoaded', function() {

  var toggle = document.getElementById('toggle'),
    window = document.getElementById('window');
  toggle.addEventListener('click', function() {
    window.classList.toggle('opened');
  });

  close.addEventListener('click', function() {
    window.classList.remove('opened');
  });

});
#toggle {cursor: pointer;}
#container {
  width: 95vw;
  height: 95vh;
  background: blue;
  overflow: auto;
}
#window {
  width: 80vw;
  height: 80vh;
  background: red;
  position: fixed;
  top: 10vh;
  left: 10vw;
  opacity: 0;
  z-index: 100;
  overflow: auto;
  transform: scale(0, 0);
  transition-property: opacity, transform;
  transition-duration: 1s;
}
#window.opened {
  display: block;
  transform: scale(1, 1);
  opacity: 1;
}
<div id="container">
  <button id="toggle">Open & Close the window</button>
  <div id="window">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat lorem, consequat eu feugiat ultrices, condimentum scelerisque nulla. Mauris auctor ipsum justo, at blandit lorem pellentesque a. Nunc vel est luctus, vehicula risus id, tempor nulla.
      Aenean laoreet nunc dolor, sed feugiat metus tincidunt at. Quisque elementum suscipit enim, vitae ultrices est aliquam id. Quisque cursus tortor sit amet fringilla dapibus. Aliquam interdum a turpis dictum lacinia. Duis risus massa, feugiat quis
      nibh eget, iaculis cursus purus. Nam ullamcorper in erat quis cursus. Proin nec ornare lectus, at dignissim sem. Sed blandit accumsan dui, a sagittis arcu iaculis a. Maecenas nibh ante, accumsan in enim et, mollis egestas ipsum. Sed convallis vitae
      nibh ut aliquet. Ut ullamcorper ullamcorper enim vitae pulvinar. Donec vitae tincidunt felis. Ut felis lacus, cursus vel rutrum ut, maximus sed metus. Aenean nisl nulla, maximus ut facilisis a, tristique eu quam. Pellentesque venenatis massa quis
      eros luctus tempor. Praesent quis quam non tortor imperdiet auctor nec in nunc. Vivamus odio tellus, placerat porta urna vitae, congue tincidunt urna. Nulla auctor pretium venenatis. Fusce non nisi nunc. Morbi pretium malesuada enim, vitae cursus
      dolor convallis et. Nam nibh eros, sollicitudin sed tristique nec, pulvinar condimentum nunc. Nulla facilisi. Aenean egestas velit dui, vel dignissim enim suscipit euismod. Donec euismod eleifend mi ut pharetra. Sed ac risus quam. Nullam libero
      diam, tempus sit amet convallis ut, bibendum viverra sapien. Aliquam tellus ligula, egestas ac dictum ut, efficitur eget eros. Sed tempus sem erat, eget efficitur magna tempor ac. Curabitur hendrerit molestie orci, at venenatis enim luctus porta.
      Vivamus varius ligula eu dui dictum, ac venenatis libero euismod. Sed consectetur nibh in metus tristique, vitae fringilla mauris eleifend. Aenean et rhoncus nunc. Sed eget eros neque. Donec pretium interdum risus, sed cursus nulla euismod sagittis.
      Nam eu ultricies mi, id auctor leo. Quisque dictum urna eu dictum feugiat. Donec fermentum mi sed diam posuere luctus. In lacinia, leo nec ornare tristique, mauris arcu lobortis elit, sed euismod purus lacus ut nibh. Integer fringilla felis ac augue
      lobortis, ut commodo libero imperdiet. Aenean at metus vel ligula porttitor varius sed sit amet dolor. Aenean sodales nisl nec urna tristique elementum. Maecenas blandit efficitur massa et congue. Mauris nec tortor felis. Ut vulputate maximus massa,
      sed commodo odio laoreet vel. Sed eu laoreet urna. Cras id pellentesque augue. Vestibulum finibus leo non lectus rhoncus vehicula. Mauris dignissim venenatis sem, quis pellentesque risus posuere blandit. Sed lorem enim, pretium vitae felis sed,
      tincidunt semper ipsum. Vivamus non ex tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
  </div>
</div>

Upvotes: 1

SaidbakR
SaidbakR

Reputation: 13544

The following is javascript only solution, without Jquery.

CSS For the centered div for both vertical and horizontal:

<style>
    #panel{
      display:none;
      width: 1%;
    height: 1%;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;

    }

The Javascript:

<script>
    var i = 30;
    function show(){
      panel = document.getElementById('panel');

      panel.style.display = 'block';


      setTimeout(function(){change(panel)}, 10);
    }
    function change(panel){

       panel.style.width = i+"%"
       panel.style.height = i+"%"       
       i++
       if (i < 90) show()
    }
  </script>

The Demo: http://jsbin.com/madaku

Upvotes: 1

Related Questions