Passo 1 Script :
Selezionare tutto il codice cliccando in textarea, quindi adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <head> e </head>.

>  <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Animazioni elastiche | Sidebar menu</title> <meta name="description" content="Animazioni elastiche menu'" /> <meta name="keywords" content="svg, morph, snap.svg, effect, animation, css, shape" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="../favicon.ico"> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css" /> <link rel="stylesheet" type="text/css" href="css/sidebar.css" /> <link rel="stylesheet" type="text/css" href="../../carpeweb.css" /> <script src="js/snap.svg-min.js"></script>

Passo 2 Script :
Selezionare tutto il codice cliccando in textarea, quindi adoperate il tasto destro del mouse per l'operazione di copia ed incolla, non rimane che trasferire il tutto nella vostra pagina web, in questo caso fra i tags: <body> e </body>.

<body class="theme-1"> <div class="container"> <nav id="menu" class="menu"> <button class="menu__handle"><span>Menu</span></button> <div class="menu__inner"> <ul> <li><a href="#"><i class="fa fa-fw fa-home"></i><span>Home<span></a></li> <li><a href="#"><i class="fa fa-fw fa-heart"></i><span>Favs<span></a></li> <li><a href="#"><i class="fa fa-fw fa-folder"></i><span>Files<span></a></li> <li><a href="#"><i class="fa fa-fw fa-tachometer"></i><span>Stats<span></a></li> </ul> </div> <div class="morph-shape" data-morph-open="M300-10c0,0,295,164,295,410c0,232-295,410-295,410" data-morph-close="M300-10C300-10,5,154,5,400c0,232,295,410,295,410"> <svg width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="none"> <path fill="none" d="M300-10c0,0,0,164,0,410c0,232,0,410,0,410"/> </svg> </div> </nav> <div class="main"> <header class="codrops-header"> <h1>Elastic SVG Elements <span>Adding elasticity with SVG shape animations</span></h1> <div class="codrops-links"> <a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/DialogEffects/" title="Previous Demo"><span>Previous Demo</span></a> / <a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=21555" title="Back to the article"><span>Back to the Codrops Article</span></a> </div> <nav class="codrops-demos"> <a class="current-demo" href="index.html">Sidebar Menu</a> <a href="pullupmenu.html">Pull-Up Menu</a> <a href="dropdown.html">Drop-down Menu</a> <a href="drag.html">Drag & Drop</a> <a href="collapseexpand.html">Collapse & Expand</a> <a href="hamburger.html">Menu Icon</a> <a href="circlemenu.html">Circular Menu</a> <a href="inputs.html">Inputs</a> <a href="button.html">Buttons</a> </nav> </header>  <section class="related"><br><br><br> <p>If you enjoyed this demo you might also like:</p> <a href="http://tympanus.net/Development/WobblySlideshowEffect/"> <img src="img/related/WobblySlideshowEffect.png" /> <h3>Wobbly Slideshow Effect</h3> </a> <a href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/"> <img src="img/related/ShapeHoverEffect.png" /> <h3>Shape Hover Effect</h3> </a> </section> </div> </div> <script src="js/classie.js"></script> <script> (function() { function SVGMenu( el, options ) { this.el = el; this.init(); } SVGMenu.prototype.init = function() { this.trigger = this.el.querySelector( 'button.menu__handle' ); this.shapeEl = this.el.querySelector( 'div.morph-shape' ); var s = Snap( this.shapeEl.querySelector( 'svg' ) ); this.pathEl = s.select( 'path' ); this.paths = { reset : this.pathEl.attr( 'd' ), open : this.shapeEl.getAttribute( 'data-morph-open' ), close : this.shapeEl.getAttribute( 'data-morph-close' ) }; this.isOpen = false; this.initEvents(); }; SVGMenu.prototype.initEvents = function() { this.trigger.addEventListener( 'click', this.toggle.bind(this) ); }; SVGMenu.prototype.toggle = function() { var self = this; if( this.isOpen ) { classie.remove( self.el, 'menu--anim' ); setTimeout( function() { classie.remove( self.el, 'menu--open' ); }, 250 ); } else { classie.add( self.el, 'menu--anim' ); setTimeout( function() { classie.add( self.el, 'menu--open' ); }, 250 ); } this.pathEl.stop().animate( { 'path' : this.isOpen ? this.paths.close : this.paths.open }, 350, mina.easeout, function() { self.pathEl.stop().animate( { 'path' : self.paths.reset }, 800, mina.elastic ); } ); this.isOpen = !this.isOpen; }; new SVGMenu( document.getElementById( 'menu' ) ); })(); </script>

NOTE SULLO SCRIPT :

ELEMENTI ELASTICI SVG JQUERY CARPEWEB menu bottoni input

LASCIA IL TUO COMMENTO

Fatal error: Uncaught Error: Call to undefined function mysql_connect() in /membri/carpeweb/RACCOLTA_SCRIPT_CARPEWEB/057_effetti_elastici_Jquery_menu_carpeweb.php:327 Stack trace: #0 {main} thrown in /membri/carpeweb/RACCOLTA_SCRIPT_CARPEWEB/057_effetti_elastici_Jquery_menu_carpeweb.php on line 327

RACCOLTA SCRIPT : PHP,HTML,JAVASCRIPT,CSS

Titolo Script:"ELEMENTI ELASTICI SVG JQUERY CARPEWEB menu bottoni input"

Autore : http://www.codrops.com DEMO_SCRIPT>>>

Descrizione Script:"ELEMENTI ELASTICI SVG JQUERY CARPEWEB menu bottoni input"

Download File dello Script:

NOTE SULLO SCRIPT :

LASCIA IL TUO COMMENTO