简单动画－让你的背景图动起来!!!

Noodles 发布于2019-08-21 11:16 / 536人阅读

摘要：效果轮询改变背景图动画，让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。

效果：
body{

        margin: 0px;
        height:100%;
        width:100%;
        background-image: url("bg.png");
        background-position-x: 0px;
        background-position-y: 0px;
        background-repeat: repeat;
    }

轮询改变body背景图动画，让世界地图作为背景正向平移。

    var body = $("body");
    var x =0;
    function polling() {
        x += 5;
        body.animate({
            "background-position-x": x+"%",
        }, 400, "linear");
        setTimeout(polling,300)
    }

    polling();
    
效果二：
![图片描述][2]
鼠标移动后背景图根据坐标差计算移动距离。
var last = null;
var body = $("body");
$(document).mousemove(function(event){
    if(last == null){
        last = {
            x: event.pageX,
            y: event.pageY
        };
        return;
    }else{
        offset = {
            x: event.pageX - last.x,
            y: event.pageY - last.y
        };
        var top  = parseInt(body.css("background-position-y"))-offset.y;
        var max = screen.availHeight - 1024;
        if(max >= 0) max = 0;
        if(top > 0) top = 0;
        if(top < max) top = max;
        body.css({
            "background-position-x":(parseInt(body.css("background-position-x"))-offset.x)+"px",
            "background-position-y":top+"px"
        });
        last.x = event.pageX;
        last.y = event.pageY;
    }
});

超融合服务器服务器托管万你的动起来跳起来爬起来

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86490.html

简单动画－让你的背景图动起来!!!

摘要：效果轮询改变背景图动画，让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。效果：showImg(https://segmentfault.com/img/bVG0hf?w=1331&h=665); body{ margin: 0px; height:100%; width:100%; ba...

Neilyo 2019-08-05 10:33 评论0 收藏0
简单动画－让你的背景图动起来!!!

摘要：效果轮询改变背景图动画，让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。效果：showImg(https://segmentfault.com/img/bVG0hf?w=1331&h=665); body{ margin: 0px; height:100%; width:100%; ba...

Acceml 2019-08-01 16:05 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
可能是最全的前端动效库汇总

摘要：非常的庞大，而且它是完全为设计而生的动效库。它运行于纯粹的之上，是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具，它支持大量的浏览器，只要它们支持和特性。可以通过安装吊炸天了，接近现实生活中的物理运动碰撞惯性动画库。收集日期为2019-02-28，★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库，是许多基础动...

afishhhhh 2019-05-23 16:24 评论0 收藏0
Android酷炫动画效果

摘要：高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果，便是其中一种。 Android自定义View：一个精致的打钩小动画一个精致的打钩动画。 Android 自定义水平进度条圆角进度项目中实现进度条进度过程中显示圆角样式 ViewPager系列之仿魅族应用的广告BannerView 前言 Banner广告位是APP ...

scq000 2019-06-25 11:48 评论0 收藏0