web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
动画效果
html5各种svg元素炫酷弹性动画特效
分类:
动画效果
日期:
2024-05-14
点击(1)
评论(0)
演 示
免费下载
简介
##### HTML结构 下面是侧边栏弹性动画的demo的html结构: ```html
Menu
Home
Favs
Files
Stats
``` SVG被插入到内部菜单中,我们使用两个data attributes来存储路径信息。 SVG应该被放到菜单里面,并且保证在移动菜单两条边时有足够的空间使线条不被切断。注意:SVG通过设置宽和高100%来使其具有响应性。 ```html .morph-shape { position: absolute; width: 240px; height: 100%; top: 0; right: 0; } .morph-shape svg path { stroke: #5f656f; stroke-width: 5px; } ``` ##### JAVASCRIPT 通过Snap.svg我们可以讲svg从一种形状变为另一种形状: ```html (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' ) ); })(); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告