CSS make graphics deformation pop-up effect

This article mainly introduces a CSS graphics deformation pop-up effect of the sample sharing, the size of the popup window can be modified using jquery, the need for friends can refer to the next

Pop-up form is a common Web page interactive design, in this focus on interactive animation experience of the era, Web pop-up can also be a bit of new ideas, such as today's shared CSS deformation modal window.

When the user clicks on the button, the button will turn into a full screen, then display the content, the entire presentation process is smooth and friendly, perhaps you can try to your new project.

Demo page: http://codyhouse.co/gem/morphing-modal-window/
When you click on the "Fire Modal Window" button, the button will slowly become larger until the entire screen. Here's a GIF demo:

Using tutorials

This code is compatible with Chrome, Firefox, Safari, Opera, and IE requires 9.0 or later (ie9+)

STEP 1: Create an HTML layout

<section class= "cd-section" ><!--sections content here--><p class= "cd-modal-action" ><a href= "#0" class= "btn" data-type= "Modal-trigger" >fire modal window</a> <!-This is the form button--><span class= "CD-MODAL-BG" ></span></p><p class= "Cd-modal" ><p class= "Cd-modal-content" ><!-this is the form content area--></ P></p><a href= "#0" class= "Cd-modal-close" >Close</a> <!-This is the Close button--></section>

STEP 2: Add CSS Styles

. cd-modal-action {   position:relative;   }   . Cd-modal-action. btn {   width:12.5em;   Height:4em;   Background-color: #123758;   border-radius:5em;   Transition:color 0.2s 0.3s, width 0.3s 0s;   }   . Cd-modal-action. btn.to-circle {   width:4em;   color:transparent;   Transition:color 0.2s 0s, width 0.3s 0.2s;   }   . Cd-modal-action. cd-modal-bg {   position:absolute;   top:0;   left:50%;   Transform:translatex ( -2EM);   Width:4em;   Height:4em;   Background-color: #123758;   border-radius:50%;   opacity:0;   Visibility:hidden;   transition:visibility 0s 0.5s;   }   . Cd-modal-action. cd-modal-bg.is-visible {   opacity:1;   visibility:visible;   }

STEP 3: Add jquery

This code uses jquery, and you can modify the window size by using the following code.

var Btnradius = $ ('. Cd-modal-bg '). Width ()/2, Left   = $ ('. CD-MODAL-BG '). Offset (). Left + Btnradius,   top = $ ('. CD-MODAL-BG '). Offset (). Top + Btnradius-$ (window). scrolltop (), Scale   = Scalevalue (top, left, Btnradius, $ (window). Height (), $ (window). width ());   function Scalevalue (Topvalue, Leftvalue, Radiusvalue, Windoww, windowh) {   var maxdisthor = (Leftvalue > WINDOWW/2 ) ? Leftvalue: (windoww-leftvalue),   Maxdistvert = (Topvalue > Windowh/2)? Topvalue: (Windowh-topvalue);   Return Math.ceil (Math.sqrt (Math.pow (Maxdisthor, 2) + Math.pow (Maxdistvert, 2))/radiusvalue);   }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!