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.

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: