扒皮下GitHub 404的图片层次轴动特效
今天要克隆的前端特效非常有意思,可以参见GitHub404页面 https://github.com/vajoy/master/index.html
记得之前华为在站酷发布EMUI设计大赛的主页也用了这种特效。说简单点,就是鼠标在页面移动时,banner上的图片呈现有层次的空间轴动特效,效果图如下:
咱们先仿造GitHub 404页面来写一下banner原型——前景有“鱿鱼”和“对话框”,远景有俩小屋子:
代码如下
![](/assets/blank.gif)
![](/assets/blank.gif)
<!doctype html> <html> <head> <style> body,heml{margin:0; padding:0;} .bannerWrap{ position:relative; margin:0 auto;width:1000px; height:350px; background-color:#F0E262; overflow:hidden;} .bannerWrap img{ display:block; position:absolute;} </style> <script src="jq.js"></script> <meta charset="utf-8"> <title>层级图片轴动效果</title> </head><body><div class="bannerWrap" id="bannerWrap"><img src="house2.png" class="small_house" id="small_house" /><img src="house1.png" class="house" id="house" /><img src="fish.png" class="fish" id="fish" /><img src="404.png" class="info" id="info" /> </div><!--bannerWrap结束--> </body> </html>
View Code
接着写脚本前先分析一下,如何做到让鼠标在屏幕上的位置,可以映射为图片在banner上的位置呢?比如鼠标在屏幕最右上角的位置时,前景的图片也在banner里所能移动到的最右上角的位置(远景图片为相反的方位,即左下角)。
又如何让每个图片移动的距离和方位都各不相同?比如远景的两个小屋子图片,最远的屋子移动的速度比近一点的屋子的速度要快。且近景和远景图片所移动的方位是相反的。
⑴ 首先第一个问题,我们可以联想到数位板,一块长方形的数位板可以匹配各种型号的电脑屏幕,无论你的数控笔移动到数位板的哪个位置,它都能控制鼠标移动到对应比例的屏幕位置。是的,我们提到了“比例”这东西,它遵循:
鼠标x坐标 / 屏幕宽度 = 数控笔在数位板上的x坐标 / 数位板宽度 ;
鼠标y坐标 / 屏幕高度 = 数控笔在数位板上的y坐标 / 数位板高度 ;
我们引申到现在的例子来,不外乎是把数控笔换成banner上的图片,把数位板换成banner罢了。我们可以很轻易地获取屏幕宽度、banner宽度、鼠标移动时的x、y坐标,那么自然可以依据上面的公式来反推出图片所应在banner上的x、y坐标,哦,不对,应该说是相对banner而言的left、top偏移。
⑵ 至于第二个问题,我们可以给每张图片设置一个Boolean参数判断其是否前景图片,如果是,则依循鼠标移动位置移动,如果不是则以相反方向移动。
我们也可以给每张图片设置一个scale比例参数,参数越大者则移动的位置越大,从而控制其移动速度。
⑶ 另有一个需要考虑的问题是,在页面刚加载好(假设鼠标还没做任何移动)的时候,各图片所在banner的位置应当是与鼠标移动到屏幕正中点的时候所在位置一致的。这要求我们在初始化各图片的时候,就先模拟出鼠标指针在屏幕正中的效果。
我们可以写出初步的脚本代码:
$(function(){var win_w, win_h,b_w, b_h,small_house, house, fish, info, pToW_w, pToW_h, $img,temp_p_l, temp_p_t;var $banner = $("#bannerWrap");var picArray = "small_house,house,fish,info".split(",");small_house = { l: 800, t: -140, s: 0.09, isFront: false }, //smallhouse的参数house = { l: 130, t: -130, s: 0.05, isFront: false }, //house的参数fish = { l: -100, t: -90, s: 0.02, isFront: true }, //fish的参数info = { l: -350, t: -110, s: 0.03, isFront: true }; //info的参数 win_w = $(window).width(); //初始化获取屏幕宽度win_h = $(window).height(); //初始化获取屏幕高度pToW_w = $banner.width()/win_w; //初始化获取banner宽度和屏幕宽度的比例pToW_h = $banner.height()/win_h; //初始化获取banner高度和屏幕高度的比例 $.each( picArray, function(i ,id){ //初始化各图片的位置(相当于鼠标移到屏幕中间时图片的位置)$img = $("#"+ id);temp_p_l = pToW_w * eval(id+".s") * win_w/2 ; //这里使用win_w/2是为了模拟鼠标移到屏幕水平中点的效果temp_p_t = pToW_h * eval(id+".s") * win_h/2 ; //这里使用win_h/2是为了模拟鼠标移到屏幕垂直中点的效果if(eval(id +".isFront")){$img.css({"left": eval(id +".l") + temp_p_l , "top": eval(id +".t") + temp_p_t }); }else{$img.css({"left": eval(id +".l") - temp_p_l , "top": eval(id +".t") - temp_p_t }); }})var changePst = function( pageX, pageY ){$.each( picArray, function(i ,id){ $img = $("#"+ id);temp_p_l = pToW_w * eval(id +".s") * pageX ; temp_p_t = pToW_h * eval(id +".s") * pageY ; if(eval(id +".isFront")){$img.css({"left": eval(id +".l") + temp_p_l , "top": eval(id +".t") + temp_p_t });}else{$img.css({"left": eval(id +".l") - temp_p_l , "top": eval(id +".t") - temp_p_t });}})}$("body,html").mousemove(function(e){ //鼠标在屏幕移动时触发changePst事件 changePst(e.pageX, e.pageY);})})
每个图片都有 l、t、s、isFront 这四个参数。
其中 l 和 t 表示图片相对banner的初步偏移位置(后面还要再加上或减去temp_p_*来得到最终偏移位置);s表示缩放级别,数值越大则该图片移动的距离越大;isFront则是判断是否前景图片。
虽然上方脚本初步实现我们想要的功能,却没考虑到一个问题,即屏幕被缩放时,图片的位置、应偏移的距离都会出错,因为可能banner的宽度已经不再是原来的宽度(banner宽度为百分比)、屏幕的宽高也不再是原来的宽高(计算图片偏移距离涉及到屏幕宽高)。
所以我们把初始化事件封装起来,供屏幕缩放时调用。同时动态获取banner宽度,而不是生硬地写入到各图片初始化的l参数中:
$(function(){var win_w, win_h,b_w, b_h,small_house, house, fish, info, pToW_w, pToW_h, $img,temp_p_l, temp_p_t;var $banner = $("#bannerWrap");var picArray = "small_house,house,fish,info".split(",");small_house = { l: 200, t: -140, s: 0.09, isFront: false },house = { l: 70, t: -130, s: 0.05, isFront: false }, fish = { l: -160, t: -90, s: 0.02, isFront: true }, info = { l: -410, t: -110, s: 0.03, isFront: true }; var resetImg = function(){ b_w = $banner.width(); //初始化获取banner宽度b_h = $banner.height(); //初始化获取banner高度win_w = $(window).width(); win_h = $(window).height(); pToW_w = $banner.width()/win_w; pToW_h = $banner.height()/win_h; $.each( picArray, function(i ,id){ //初始化各图片的位置(相当于鼠标移到屏幕中间时图片的位置)$img = $("#"+ id);temp_p_l = pToW_w * eval(id+".s") * win_w/2 ; temp_p_t = pToW_h * eval(id+".s") * win_h/2 ; if(eval(id +".isFront")){$img.css({"left": b_w/2 + eval(id +".l") + temp_p_l , "top": b_h/2 + eval(id +".t") + temp_p_t }); //动态加上banner宽高}else{$img.css({"left": b_w/2 + eval(id +".l") - temp_p_l , "top": b_h/2 + eval(id +".t") - temp_p_t }); }})}resetImg();$(window).on("resize",resetImg); //屏幕缩放时重新初始化数据var changePst = function( pageX, pageY ){$.each( picArray, function(i ,id){ $img = $("#"+ id);temp_p_l = pToW_w * eval(id +".s") * pageX ; temp_p_t = pToW_h * eval(id +".s") * pageY ; if(eval(id +".isFront")){$img.css({"left": b_w/2 + eval(id +".l") + temp_p_l , "top": b_h/2 + eval(id +".t") + temp_p_t });}else{$img.css({"left": b_w/2 + eval(id +".l") - temp_p_l , "top": b_h/2 + eval(id +".t") - temp_p_t });}})}$("body,html").mousemove(function(e){changePst(e.pageX, e.pageY);})})
至此我们完成了我们所预期的功能。
眼尖的同学会发现,resetImg事件里的.each方法跟changePst事件里的非常相似。我们可以把它们整合起来提高复用、减少代码量:
![](/assets/blank.gif)
![](/assets/blank.gif)
$(function(){var win_w, win_h,b_w, b_h,small_house, house, fish, info, pToW_w, pToW_h, $img,temp_p_l, temp_p_t;var $banner = $("#bannerWrap");var picArray = "small_house,house,fish,info".split(",");small_house = { l: 200, t: -140, s: 0.09, isFront: false }, //smallhouse的参数house = { l: 70, t: -130, s: 0.05, isFront: false }, //house的参数fish = { l: -160, t: -90, s: 0.02, isFront: true }, //fish的参数info = { l: -410, t: -110, s: 0.03, isFront: true }; //info的参数var setPst = function(x, y){x = x||win_w/2;y = y||win_h/2;$.each( picArray, function(i ,id){ $img = $("#"+ id);temp_p_l = pToW_w * eval(id+".s") * x ; temp_p_t = pToW_h * eval(id+".s") * y ; if(eval(id +".isFront")){ //判断是否前景元素$img.css({"left": b_w/2 + eval(id +".l") + temp_p_l , "top": b_h/2 + eval(id +".t") + temp_p_t }); //这里的b_w/2和b_h/2是为了保证窗口缩放时还能在相对位置}else{$img.css({"left": b_w/2 + eval(id +".l") - temp_p_l , "top": b_h/2 + eval(id +".t") - temp_p_t }); }})}var resetImg = function(){ b_w = $banner.width(); //初始化获取banner宽度b_h = $banner.height(); //初始化获取banner高度win_w = $(window).width(); //初始化获取屏幕宽度win_h = $(window).height(); //初始化获取屏幕高度pToW_w = $banner.width()/win_w; //初始化获取banner宽度和屏幕宽度的比例pToW_h = $banner.height()/win_h; //初始化获取banner高度和屏幕高度的比例 setPst(); }resetImg();$(window).on("resize",resetImg); //屏幕缩放时重新初始化数据 $("body,html").mousemove(function(e){setPst(e.pageX, e.pageY);})})
View Code
最后还是为大家提供本案例的Demo,请到GitHub上下载:https://github.com/VaJoy/BlogDemo/tree/master/140809
祝周末愉快,共勉~
转载于:https://www.cnblogs.com/vajoy/p/3901526.html
扒皮下GitHub 404的图片层次轴动特效相关推荐
- 在GitHub中插入图片
在编写Github的Readme时常常需要添加图片辅助说明. 首先,将需要的图片保存在本地文件夹. 其次,将本地的图片push到GitHub的远程仓库. 然后,在GitHub上打开图片,得到图片的ur ...
- 将README.md中的图片替换为github地址的图片
将README.md中的图片替换为github地址的图片 本项目永久更新地址 https://github.com/zhaoolee/replace_readme_md_image 痛点: Githu ...
- Tapd GitHub集成 详细图片
此为系列博客 阿里云服务器 CentOS7 Tomcat + Jenkins+国内镜像 TAPD关联Jenkins Tapd GitHub集成 详细图片(当前位置) TAPD pytest自动化测试部 ...
- html5 鼠标旋转动画效果,CSS3鼠标滑过图片3D翻转动画特效
这是一款效果非常炫酷的CSS3鼠标滑过图片3D翻转动画特效.该特效基于Bootstrap网格系统来布局,通过简单的CSS3代码,在鼠标滑过图片时对图片进行3D翻转,效果非常的酷. 使用方法 HTML结 ...
- (Java实现)图片合成GIF动图(“复古”Swing界面)
1.项目简介 项目名称:pic2gif 项目实现:将选定的几张图片(支持jpg,png,bmp,gif等) 合成为一张gif图 关键字:图片处理,Java,Swing 2.项目结构 图片处理部分 Sw ...
- html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- HTML5怎么让图片和文字重叠,利用HTML5实现全屏图片文字过渡切换特效
特效描述:利用HTML5实现 全屏图片 文字过渡 切换特效.利用HTML5实现全屏图片文字过渡切换特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Masupitami Wal ...
- html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
- jQuery图片自动轮转动画特效
本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...
最新文章
- AX2009报表打印固定长度Barcode条码
- java实用solr6.6_搜索引擎Solr-6.6.0搭建
- Tomcat容器、JSP和Servlet
- SpringCloud学习笔记(1)- Spring Cloud Netflix
- C#LeetCode刷题之#661-图片平滑器( Image Smoother)
- github private链接访问_Hands-On Design Patterns With C++(十八)访问者模式与多分派(下)...
- 跨境电商系统的一个架构演进
- R语言怎么导入表格画图_立创EDA画图不求人18 | 视频教程 | 原理图横向纵向切换...
- C++实现多级时间轮定时器
- tailf追踪日志文件
- MATLAB 中gcf、gca 以及gco 的区别
- Linux命令任务管理器,如何在:Linux下面启动任务管理器
- SpringSecurity系列之基于数据库认证
- 后台SpringBoot + Mybatis开发遇到的一些坑
- 国产自主内存产能发展迅猛
- 【RT-Thread 开源作品秀】小型蚯蚓养殖监控系统
- GitChat软件中的课程、专栏下载脚本,包含各种格式(pdf、markdown)
- composer的原理和正确使用(最新)
- 穿搭网在线头像试衣间
- 刚安装完成的Jmeter5打开之后没有工作台
热门文章
- 团队作业8——Beta 阶段冲刺7th day
- 河北工业大学数据挖掘实验三 应用 Apriori 算法挖掘频繁项集
- 写个脚本,一键打开软件文档(Windows)
- 推荐Dropbox一个很不错的文件存储和共享服务
- matlab 二维高斯分布绘图,matlab:画二维高斯分布密度函数图
- mov和lea指令的区别
- 大文件下载断点续传后台功能,模仿百度网盘下载功能
- 圣诞节到了,一起来画个圣诞树吧
- ajax poi jsp,Springboot+poi无法使用ajax方法
- div盒子边框圆角_div+css用边框实现圆角矩形(多样式)