Elastic SVG Modal Window with jQuery and Snap.svg
File Size: | 2.54 KB |
---|---|
Views Total: | 4863 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.
<script src="/path/to/jquery-2.1.4.min.js"></script> <script src="/path/to/snap.svg-min.js"></script>
2. Create a SVG modal window with a close button as follow.
<div id="modal" class="modal"> <button id="modal-close" class="modal-close">Close</button> <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 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 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 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 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 L1220.267,723.2"> <svg id="svg" width="100%" height="100%" viewBox="0 0 1280 800" preserveAspectRatio="none"> <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 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 C1220.267,719.519,1220.267,723.2,1220.267,723.2L1220.267,723.2" /> </svg> </div> </div>
3. Create a link to launch the modal window.
<a href="#" class="btn btn-show-overlay">Lauch a modal</a>
4. The core CSS styles.
.svg-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .svg-wrapper svg { width: 100%; height: 100%; overflow: hidden; } path { fill: #2e2e2e; stroke: #2e2e2e; stroke-width: 1px; } .modal { position: relative; margin: 0 auto; width: 250px; height: 105px; -webkit-transition: height 0.6s, width 0.6s; transition: height 0.6s, width 0.6s; } .modal-close { display: none; position: absolute; text-transform: uppercase; top: 65px; right: 85px; color: white; z-index: 10; border: none; background-color: transparent; border-bottom: 2px solid transparent; } .modal-close:hover, .modal-close:focus { border-bottom-color: white; } .modal-active .modal { width: 100%; height: 630px; } .modal-active .btn { display: none; } .modal-active .modal-close { display: block; }
5. The JavaScript to active the modal window.
(function () { var svgModal = { showOverlay: $('.btn-show-overlay'), closeOverlay: $('#modal-close'), modal: $('#modal'), svgWrapper: $('#svg-wrapper'), pathElement: undefined, modalOpen: false, btnHovered: false, paths: { default: $('#svg-path').attr('d'), active: $('#svg-wrapper').data('btn-hovered'), modalOpen: $('#svg-wrapper').data('modal-open') }, init: function () { var s = Snap('#svg'); svgModal.pathElement = s.select('path'); this.events(); }, events: function () { svgModal.showOverlay.on('mouseenter', this.btnHover); svgModal.showOverlay.on('mouseleave', this.btnHover); svgModal.showOverlay.on('click', this.toggleModal); svgModal.closeOverlay.on('click', this.toggleModal); }, btnHover: function (e) { e.preventDefault(); var $this = $(this); if (!svgModal.modalOpen) { svgModal.pathElement.stop().animate({ 'path': svgModal.btnHovered ? svgModal.paths.default : svgModal.paths.active }, 250, mina.easeout); svgModal.btnHovered = !svgModal.btnHovered; } }, toggleModal: function (e) { e.preventDefault(); var $this = $(this); setTimeout(function () { $('body').toggleClass('modal-active'); }, 100); svgModal.pathElement.stop().animate({ 'path': svgModal.paths.modalOpen }, 300, mina.easeout, function () { svgModal.pathElement.stop().animate({ 'path': svgModal.modalOpen ? svgModal.paths.active : svgModal.paths.default }, svgModal.modalOpen ? 800 : 300, svgModal.modalOpen ? mina.elastic : mina.easeout); }); svgModal.btnHovered = false; svgModal.modalOpen = !svgModal.modalOpen; } }; svgModal.init(); }());
This awesome jQuery plugin is developed by allanpope. For more Advanced Usages, please check the demo page or visit the official website.