资讯专栏INFORMATION COLUMN

仿github404页面特效

leiyi / 1710人阅读

摘要:阅读原文偶然看到的页面,没想到的页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。

阅读原文

  偶然看到github404页面,没想到github404页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。
  这个效果看上去是3d的,其实没有用到css3里边的任何一个与3d有关的属性,这个页面应该在很早之前就被做出来了,可能那时的css3兼容性还没现在这么好。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。下边先看下html结构:

This not the web page you are looking for

  图片从网站上下载,就放成这样的结构。现在的图片还是平铺在页面上,我们用position: absolatez-index使得图片放在一个合适的位置,确定它们的前后顺序。

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#field {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 370px;
}
.img_bg {
    position: absolute;
    top: -11px;
    left: -20px;
    width: 120%;
    height: 425px;
}
.img_text {
    position: absolute;
    z-index: 8;
}
.img_cat {
    position: absolute;
    z-index: 7;
}
.img_speeder {
    position: absolute;
    z-index: 6;
}
.img_cat_shadow {
    position: absolute;
    z-index: 5;
}
.img_speeder_shadow {
    position: absolute;
    z-index: 4;
}
.img_building_1 {
    position: absolute;
    z-index: 3;
}
.img_building_2 {
    position: absolute;
    z-index: 2;
}

  背景图片需要拉伸宽于屏幕一些,因为背景图也是随鼠标的移动而左右移动的。下边是图片的数据结构:

window.onload = function() {
    var window_width, window_height,
        field_width, field_height,
        rate_w, rate_h,
        field, text, cat, cat_shadow, speeder, speeder_shadow, buliding_1, building_2;

    window_width = document.body.clientWidth;
    window_height = document.body.clientHeight;

    field = document.getElementById("field");
    field_width = field.offsetWidth;
    field_height = field.offsetHeight;

    rate_w = field_width / window_width;
    rate_h = field_height / window_height;

    var imgArray = {
        bg : { left: -780, top: -200 ,scale: 0.06, isFont: false },
        text : { left: -500, top: -120, scale: 0.03, isFont: true },
        cat : { left: -200, top: -100 ,scale: 0.02, isFont: true },
        cat_shadow : { left: -189, top: 100 ,scale: 0.02, isFont: true },
        speeder : { left: -70, top: -40 ,scale: 0.01, isFont: true },
        speeder_shadow : { left: -70, top: 75 ,scale: 0.01, isFont: true },
        building_1 : { left: 20, top: -111 ,scale: 0.03, isFont: false },
        building_2 : { left: 300, top: -60 ,scale: 0.05, isFont: false },
    };
}

  首先我们先将图片放到起始的位置,即模拟鼠标放在屏幕中心位置的时候。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。

(function() {
    for( i in imgArray ) {
        var theImg = document.getElementsByClassName("img_" + i)[0];
        var offset_w = rate_w * window_width / 2 * imgArray[i].scale;
        var offset_h = rate_h * window_height / 2 * imgArray[i].scale;
        if( imgArray[i].isFont == true ) {
            theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";
        } else {
            theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";
        }
    }
})();

  图片在场景中的位置是按照鼠标在浏览器中的位置来按比例移动的。鼠标移动的时候改变图片的topleft值来使图片移动。离我们近的物体的移动方向和鼠标的滑动方向相同,离我们远的物体移动方向和鼠标滑动方向相反。而且离中间的点的距离越远,移动速度越快,使其具有立体感。
  图片的scale属性就是用来设置图片的移动速度的,即鼠标移动的距离乘以这个比例就是图片移动的距离。isFont属性是图片移动的方向,确定图片与鼠标移向相同或相反。监听鼠标移动事件,每次移动都重新定位图片位置。

var picMove = function(pageX, pageY) {
    for( i in imgArray ) {
        var theImg = document.getElementsByClassName("img_" + i)[0];
        var offset_w = rate_w * pageX * imgArray[i].scale;
        var offset_h = rate_h * pageY * imgArray[i].scale;
        if( imgArray[i].isFont == true ) {
            theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";
        } else {
            theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";
            theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";
        }
    }
}

document.body.onmousemove = function(e) {
    picMove(e.pageX, e.pageY);
};

  到这里这个特效就算做完了,如果你有兴趣,这里是我的博客以及github地址,欢迎来访。

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

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

相关文章

  • 仿github404页面特效

    摘要:阅读原文偶然看到的页面,没想到的页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。 阅读原文   偶然看到github的404页面,没想到github的404页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。   这个效果看上去是3d的,其实没有用到...

    dcr309duan 评论0 收藏0
  • 仿github404页面特效

    摘要:阅读原文偶然看到的页面,没想到的页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。 阅读原文   偶然看到github的404页面,没想到github的404页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。   这个效果看上去是3d的,其实没有用到...

    tuniutech 评论0 收藏0
  • 2017-07-22 前端日报

    摘要:前端日报精选任何网站都可以变成但我们需要做得更好译高性能个新工具加速你的应用在生产环境中使用记录日志手把手教你用开发一个发布中文译继承实例译基于背后的合理化,而非设计掘金实现哪家强中的众成翻译快速入门个人文章一个基于区块链的深网 2017-07-22 前端日报 精选 任何网站都可以变成 PWA —— 但我们需要做得更好[译] 高性能 React:3 个新工具加速你的应用在生产环境中使用...

    endless_road 评论0 收藏0

发表评论

0条评论

leiyi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<