• 文章介绍
  • 评价建议
  • jQuery带视觉差效果flickity幻灯片插件代码-精品源码插图

    一款基于flickity幻灯片插件来制作,通过切换背景图片层来实现的jQuery幻灯片视觉差效果代码。

    JS代码

    <script src="https://img.x22t.com/file/2020/04/25/4b2b71b7b5bcc0b6414fe91b3a5c96cf4873.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://img.x22t.com/file/2020/04/25/13aa86fc9cc5d72aacde572f84541f691516.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>
    

    1. 本站所有资源来源于用户上传和网络,如有侵权请立即联系右侧的客服!
    2. 分享目的仅供大家学习和交流,请不要用于商业用途!
    3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系客服处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码是 jingpinyuanma.com 或 jinpinyuanma.com,无法解压的请联系客服。
    8.下载的源码无任何问答服务或安装服务,除非有明确标注安装和说明的可找客服。
    9.源码属于可复制的产品,所有购买的源码无任何理由退款!
    精品源码(JinPinYuanMa.com)是一个优秀的分享资源站,本站资源均基于各位友友的分享收集而来,特殊原创会标明如有侵犯版权等可联系客服删除。
    精品源码 » jQuery带视觉差效果flickity幻灯片插件代码-精品源码