Css3+jquery animation pop-up layer effect sharing

Today we share an animated pop-up layer based on CSS3 and jquery implementations. This pop-up layer has a pop-up layer button displayed on the front page. When you click the button, the pop-up layer appears in a very cool animated form. The pop-up layer has a close button, click the Half closed button, and the pop-up layer closes. The effect chart is as follows:

The code that is implemented.

HTML code:

The code is as follows

Copy Code

<div class= "Papersheet" > <!--Action Trigger--> <div class= "Papersheet__trigger" > <!--Icon-->             <svg class= "Papersheet__trigger-icon" viewbox= "0 0 ><g transform=" scale (0.023 0.023) "><path d=" M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-3 3.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0. 006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11 .416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.76 2 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z "></path></g></svg> </div> <!--face 1--> <div class= "Papersheet__face-item animated Fadeinup" > </div> <!--face 2--> <div class= "Papersheet__face-item animated Fadeinup" > </div> <!--face 2--> <div class= "Papersheet__face-item animated Fadeinup" > </div> </div> <script src= ' jquery.js ' ></script> <script> _papersheet = $ ('. Papersheet '); _trigger = $ ('. Papersheet__trigger '); _trigger.click (function () { if (_papersheet.hasclass (' opened ')) { $ (this). Parent ('. Papersheet '). Stop (). Removeclass (' opened '); } else { $ (this). Parent ('. Papersheet '). Stop (). addclass (' opened '); } }); @ sourceurl=pen.js </script>

CSS3 Code:

The code is as follows

Copy Code

@import url ("Http://daneden.github.io/animate.css/animate.min.css"); : Root { width:100%; height:100%; } Body { width:100%; height:100%; Display:-webkit-flex; Display:-ms-flexbox; Display:flex; -webkit-align-items:center; -ms-flex-align:center; Align-items:center; -webkit-justify-content:center; -ms-flex-pack:center; Justify-content:center; Overflow:hidden; Background-color: #263238; } . papersheet { position:relative; Overflow:hidden; Text-align:center; -moz-box-sizing:border-box; Box-sizing:border-box; -webkit-transition:all 200ms; Transition:all 200ms; width:100%; height:100%; max-width:50%; Min-width:50rem; max-height:50%; Min-height:20rem; margin:0 Auto; Display:-webkit-flex; Display:-ms-flexbox; Display:flex; -webkit-align-items:center; -ms-flex-align:center; Align-items:center; -webkit-justify-content:center; -ms-flex-pack:center; Justify-content:center; } . papersheet.opened { -webkit-transition:all 900ms; Transition:all 900ms; box-shadow:0px 5px 20px rgba (0, 0, 0, 0.5); } . Papersheet__trigger { Z-index:1; Display:inline-block; Padding:2rem; border-radius:50%; Position:absolute; Background-color:transparent; top:50%; left:50%; -webkit-transform:translate (-50%,-50%); -ms-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); -webkit-transition:all 800ms Cubic-bezier (0.19, 1, 0.22, 1); Transition:all 800ms Cubic-bezier (0.19, 1, 0.22, 1); Cursor:pointer; } . Opened. Papersheet__trigger { Background-color: #eceff1; top:10%; } . papersheet__trigger:hover { box-shadow:0px 5px 20px rgba (0, 0, 0, 0.5); } . papersheet__trigger:active:before { Background-color: #d5d5d5; } . papersheet__trigger:before { Content: ""; Background-color: #eceff1; Display:block; Position:absolute; border-radius:50%; top:50%; left:50%; bottom:50%; right:50%; Width:6rem; Height:6rem; z-index:0; Pointer-events:none; -webkit-transform:translate (-50%,-50%); -ms-transform:translate (-50%,-50%); Transform:translate (-50%,-50%); -webkit-transition-delay:2s; Transition-delay:2s; -webkit-transition:all 400ms cubic-bezier (0.165, 0.84, 0.44, 1); Transition:all 400ms cubic-bezier (0.165, 0.84, 0.44, 1); } . Opened. Papersheet__trigger:before { width:3000px; height:3000px; -webkit-transition:all 2.5s cubic-bezier (0.165, 0.84, 0.44, 1); Transition:all 2.5s cubic-bezier (0.165, 0.84, 0.44, 1); } . Papersheet__trigger-icon { Fill: #37474f; Vertical-align:bottom; -webkit-transform:rotate (45DEG); -ms-transform:rotate (45DEG); Transform:rotate (45DEG); -webkit-transition:all 800ms Cubic-bezier (0.19, 1, 0.22, 1); Transition:all 800ms Cubic-bezier (0.19, 1, 0.22, 1); -webkit-transition-delay:50ms; transition-delay:50ms; Width:1.8rem; Height:1.8rem; } . Opened. Papersheet__trigger-icon { -webkit-transform:rotate ( -360DEG); -ms-transform:rotate ( -360DEG); Transform:rotate ( -360DEG); } . Papersheet__face-item { border-radius:50%; Margin:0 1.5rem; Z-index:1; Height:6rem; Width:6rem; Display:none; Overflow:hidden; } . Papersheet__face-item:nth-child (2) { -webkit-animation-delay:50ms; animation-delay:50ms; } . Papersheet__face-item:nth-child (3) { -webkit-animation-delay:150ms; animation-delay:150ms; } . Papersheet__face-item:nth-child (4) { -webkit-animation-delay:250ms; animation-delay:250ms; } . Papersheet__face-item img { max-width:100%; } . Opened. Papersheet__face-item { -webkit-transform:translatex (60%); -ms-transform:translatex (60%); Transform:translatex (60%); Display:block; }