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

问题描述

问 题

阿里云页面轮播效果

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

解决方案

就是监听鼠标的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
        });
    });

这篇关于javascript - 阿里云的这个效果是怎么出来的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！