一款基于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>
暂无评论内容