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

jQuery带视觉差效果flickity幻灯片插件代码-精品资源网
jQuery带视觉差效果flickity幻灯片插件代码
此内容为免费资源,请登录后查看
0
免费资源

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容