注册 登录 充值会员 退出
联系客服 毕业设计 java源码 PHP源码
充值

jQuery带视觉差效果flickity幻灯片插件代码

作者/代码整理:  (源码已亲测,有问题联系客服微信:guomanqing1314) 发布日期:2022-07-26
jQuery带视觉差效果flickity幻灯片插件代码
一款基于flickity幻灯片插件来制作,通过切换背景图片层来实现的jQuery幻灯片视觉差效果代码。


JS代码


<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/flickity.pkgd.js"></script>
<script type="text/javascript">
	var flkty = new Flickity('.parallax__carousel');

	var paraBG = document.querySelector('.parallax__layer--bg');
	var paraFG = document.querySelector('.parallax__layer--fg');
	var cellRatio = 1;
	var bgRatio = 0.75;
	var fgRatio = 2;

	flkty.on( 'scroll', function( progress ) {
	  paraBG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * bgRatio ) * 100 + '%';
	  paraFG.style.left = ( 0.5 - ( 0.5 + progress * 4 ) * cellRatio * fgRatio ) * 100 + '%';
	});

	flkty.reposition();
</script>

售后客服微信:guomanqing1314

其他咨询和服务:

邮箱:1915635791@qq.com