jQuery 插件:Animsition 为页面切换添加动画

知更鸟 2021年4月8日17:32:08
评论
2421

jQuery 插件:Animsition 为页面切换添加动画

Animsition可轻松的为页面切换添加18种不同风格的动画效果,动画特效可以应用到任何网站,也可以使用不同的效果在同一页面上。

官方问站:http://git.blivesta.com/animsition/

Github地址:https://github.com/blivesta/animsition

使用方法:

需要加载插件样式文件animsition.min.css、jquery.js、animsition.min.js

  <link href="../css/animsition.min.css" rel="stylesheet">
 <script src="../jquery.min.js"></script>
  <script src="../js/animsition.min.js" charset="utf-8"></script>

例如上滑动动画,在页面任意位置添加:

<div class="animsition-overlay"></div>

添加调用代码:

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('.animsition-overlay').animsition({
		inClass: 'overlay-slide-in-top',
		outClass: 'overlay-slide-out-top',
		overlay: true,
		overlayClass: 'animsition-overlay-slide',
		overlayParentElement: 'body'
	}).one('animsition.inStart',
	function() {
		$('body').removeClass('bg-init');
		$(this).find('.item').append('<h2 class="target">Callback: Start</h2>');
		console.log('event -> inStart');
	}).one('animsition.inEnd',
	function() {
		$('.target', this).html('Callback: End');
		console.log('event -> inEnd');
	});
});
</script>

效果还是很炫酷,缺点是:只有页面所有元素完全加载完,才能显示动画,有点鸡肋...

文章源自知更鸟 | 崇尚专注 追求极致 分享交流WordPress经验与技巧,关注前端设计与网站制作,打造自己专属的WordPress主题,让你的博客与众不同!
weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
网页特效live2d看板娘 WordPress

网页特效live2d看板娘

如果喜欢给自己的网站加些花花草草,live2d看板娘就是一个不错的特效,人物会跟随你的鼠标动,超级可爱! 看板娘   将下面代码添加到网页适当位置即可。 <script src="ht...
安卓文本无法垂直居中 Web前端

安卓文本无法垂直居中

安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。目前在微信等应用都存在该问题,而在最新的移动端 Chrome 浏览器上无该问题(截止本文编写时间,微信客户端的 chro...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定