阿里云的这个效果是怎么出来的？

Question

阿里云页面轮播效果

首页轮播里有几帧是鼠标放上去移动，里面的图片也会跟着移动，这样的效果怎么写出来？

Answer 1

就是监听鼠标的move事件，实时获取鼠标xy轴，减去一定的比例值，然后取反数值，设置素材的位置
http://gaoqiang19514.github.i...
链接都给你了，你不能进去看下源码吗？给你贴出来了

    //    视差效果
    $('#header').on('mousemove', function(event){
        var x              = event.pageX;
        var y              = event.pageY;
        var bgCentralityX  = $(window).width() / 2;    //    背景图的中心点
        var bgOffsetX      = (x - bgCentralityX) / 30;
        
        var imgCentralityX = $('.parallax__people').offset().left + ($('.parallax__people').width() / 2);
        var imgCentralityY = $('.header__container').height() / 2;
        
        var imgOffsetX     = (x - imgCentralityX) / 10;
        var imgOffsetY     = (y - imgCentralityY) / 10;

        $('.parallax__bg-img').css('left', -bgOffsetX);
        $('.parallax__layer').css({
            left: -imgOffsetX,
            top: -imgOffsetY
        });
    });

Answer 2

做了一张雪碧图，js控制background-position实现的。
该图链接

Answer 3

放了多张图组合成一张图.然后用transform