Elastic SVG Modal Window with jQuery Snap svg - Download Elastic SVG Modal Window with jQuery and Snap.svg

Download Elastic SVG Modal Window with jQuery and Snap.svg

By Posted on

This time I will share jQuery Plugin and tutorial about Elastic SVG Modal Window with jQuery and Snap.svg, hope it will help you in programming stack.

Elastic SVG Modal Window with jQuery Snap svg - Download Elastic SVG Modal Window with jQuery and Snap.svg
File Size: 2.54 KB
Views Total: 4649
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A fancy elastic morphing modal window with SVG shape animations built on top of jQuery and Snap.svg. Inspired by codrops’ Elastic SVG Elements.

How to use it:

1. Include the necessary jQuery and Snap.SVG javascript libraries on the html page.

view source
1 <script src="/path/to/jquery-2.1.4.min.js"></script>
2 <script src="/path/to/snap.svg-min.js"></script>

2. Create a SVG modal window with a close button as follow.

view source
01 <div id="modal" class="modal">
02     <button id="modal-close" class="modal-close">Close</button>
03     <div id="svg-wrapper" class="svg-wrapper" data-btn-hovered="M1220.267,723.2c0,0-293.547,0-580.267,0c-333.653,0-584.533,0-584.533,0s0-104.783,0-334.854
04   c0-188.981,0-334.846,0-334.846s251.733,0,584.533,0c362.667,0,580.267,0,580.267,0s0,116.7,0,344.803
05   C1220.267,613.127,1220.267,723.2,1220.267,723.2L1220.267,723.2" data-modal-open="M1220.267,723.2c0,0-292.456-47.624-579.176-47.624c-333.653,0-585.624,47.624-585.624,47.624
06   s83.149-104.783,83.149-334.854c0-188.981-83.149-334.846-83.149-334.846s251.324,49.105,584.124,49.105
07   c362.667,0,580.676-49.105,580.676-49.105s-72.201,123.987-72.201,352.09C1148.065,620.414,1220.267,723.2,1220.267,723.2
08   L1220.267,723.2">
09  
10       <svg id="svg" width="100%" height="100%" viewBox="0 0 1280 800"  preserveAspectRatio="none">
11         <path id="svg-path" d="M1220.267,723.2c0,0-293.547,0-580.267,0c-333.653,0-584.533,0-584.533,0s0-3.505,0-11.2
12   c0-6.321,0-11.2,0-11.2s251.733,0,584.533,0c362.667,0,580.267,0,580.267,0s0,3.903,0,11.533
13   C1220.267,719.519,1220.267,723.2,1220.267,723.2L1220.267,723.2" />
14       </svg>
15     </div>
16 </div>

3. Create a link to launch the modal window.

view source
1 <a href="#" class="btn btn-show-overlay">Lauch a modal</a>

4. The core CSS styles.

view source
01 .svg-wrapper {
02   position: absolute;
03   width: 100%;
04   height: 100%;
05   top: 0;
06   left: 0;
07 }
08  
09 .svg-wrapper svg {
10   width: 100%;
11   height: 100%;
12   overflow: hidden;
13 }
14  
15 path {
16   fill: #2e2e2e;
17   stroke: #2e2e2e;
18   stroke-width: 1px;
19 }
20  
21 .modal {
22   position: relative;
23   margin: 0 auto;
24   width: 250px;
25   height: 105px;
26   -webkit-transition: height 0.6s, width 0.6s;
27   transition: height 0.6s, width 0.6s;
28 }
29  
30 .modal-close {
31   display: none;
32   position: absolute;
33   text-transform: uppercase;
34   top: 65px;
35   right: 85px;
36   color: white;
37   z-index: 10;
38   border: none;
39   background-color: transparent;
40   border-bottom: 2px solid transparent;
41 }
42  
43 .modal-close:hover, .modal-close:focus { border-bottom-color: white; }
44  
45 .modal-active .modal {
46   width: 100%;
47   height: 630px;
48 }
49  
50 .modal-active .btn { display: none; }
51  
52 .modal-active .modal-close { display: block; }

5. The JavaScript to active the modal window.

view source
01 (function () {
02   var svg<a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> = {
03       showOverlay: $('.btn-show-overlay'),
04       closeOverlay: $('#modal-close'),
05       modal: $('#modal'),
06       svgWrapper: $('#svg-wrapper'),
07       pathElement: undefined,
08       modalOpen: false,
09       btnHovered: false,
10       paths: {
11           default: $('#svg-path').attr('d'),
12           active: $('#svg-wrapper').data('btn-hovered'),
13           modalOpen: $('#svg-wrapper').data('modal-open')
14       },
15       init: function () {
16           var s = Snap('#svg');
17           svgModal.pathElement = s.select('path');
18           this.events();
19       },
20       events: function () {
21           svgModal.showOverlay.on('mouseenter', this.btnHover);

Share this:

Related posts: