教你使用html三剑客写一个高级的伪3D效果
教大家写一个十分炫酷的伪3d的交互效果
注:图片素材来自于网络若有侵权请联系删除!
demo下载
由于C站上传文件下载的话需要c币所以不推荐下载,看到最后会附上代码和素材
土豪请看这里:demo下载
简介&效果
效果如下
鼠标移动和滑动效果
使用到的技术
- html:主体框架
- css :布局&定位
- JavaScript:交互动态
实现
实现效果的操作分析
首先需要确认目录关系,我这边的是
结构分析&操作层级
结构简化图
主体定位&实现代码
所以主体框架就可以写为:
<div id="box"><!-- 底层主体 --><img src="./duck.webp" alt="" /><!-- 上层图片 --><div id="list"><img src="./hover.png" alt="" /></div>
</div>
我们可以看到上层和下层是都可以移动的,所以css定位就应该是:
CSS代码实现
<style>
* {margin: 0;
}
/* 底层图片 */
#box > img {height: 100vh;position: fixed;left: 0;top: 0;transform: scale(1.2);/* transition: 2s; */
}
/* 上层图片 */
#box > #list > img {height: 100vh;transform: scale(1.2);position: fixed;bottom: 0;/* transition: 2s; */// 最好不要加,要不然让你心态炸裂
}
</style>
补充:为什么要放大图片呢?
如下图
因为如果我就直接放上去的化左右移动的时候他就会图片严重变形上下左右没有内容会导致观感不好所以就要放大一点
JavaScript代码设计&分析实现
好了上面说了基本的一些定位和布局现在我们该来讲一讲JavaScript的交互的设计了
两张图片如何实现伪3d?
当鼠标再页面上移动时:
简化示意图
上下移动也是如此
代码实现
// 当鼠标再页面上移动开始计算坐标
document.getElementById("box").onmousemove = function (event) {// 如果鼠标再页面的元素上否则不生效if (fout == true) {console.log(hover_x - event.screenX);console.log(hover_y - event.screenY);console.log(event.screenX, event.screenY);// 计算底层的偏移值if (event.screenX > 0) {document.querySelector("#box>img").style.left = `${(hover_x - event.screenX) / 10}px`;document.querySelector("#box>img").style.top = `${(hover_y - event.screenY) / 10}px`;}// 计算顶层的偏移值if (event.screenY > 0) {document.querySelector("#box>#list>img").style.top = `${(hover_y + event.screenY) / 10}px`;document.querySelector("#box>#list>img").style.left = `${(hover_x + event.screenX) / 10}px`;}}
};
眼尖的朋友可能会发现我写了
怎么实现偏移
为什么定义hoverx和hovery?
原因鼠标移动到页面上时以他伪定位的基础上开始移动就相当于以他伪基础开始计算鼠标移动的坐标(通过他来计算顶层和底层要移动的大小所以定义hoverx和hovery的代码为)
var fout = 0;
//声明x和y
var hover_x;
var hover_y;
// 当移动到页面上时
document.getElementById("box").onmouseover = function (event) {fout = 1;hover_x = event.screenX;hover_y = event.screenY;console.log(hover_x, hover_y);
};
为什么定义fout&防止过度偏移
相信眼尖的朋友可能又会发现我定义了一个fout
这是为什么呢?
因为当我移动出页面的时候页面需要复位,否则可能就会出现过度偏移的风险
所以失焦复位的代码就是
失焦复位的实现
// 鼠标移出页面就关闭交互
document.getElementById("box").onmouseout = function (event) {// 页面失去焦点就关闭效果fout = false;
};
完整代码
html+css+JavaScript
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;}#box > img {height: 100vh;position: fixed;left: 0;top: 0;transform: scale(1.2);/* transition: 2s; */}#box > #list > img {height: 100vh;transform: scale(1.2);position: fixed;bottom: 0;/* transition: 2s; */}</style></head><body><div id="box"><!-- 底层主体 --><img src="./duck.webp" alt="" /><!-- 上层图片 --><div id="list"><img src="./hover.png" alt="" /></div></div><script>var fout = 0;var hover_x;var hover_y;// 当移动到页面上时document.getElementById("box").onmouseover = function (event) {fout = 1;hover_x = event.screenX;hover_y = event.screenY;console.log(hover_x, hover_y);};// 当鼠标再页面上移动开始计算坐标document.getElementById("box").onmousemove = function (event) {// 如果鼠标再页面的元素上否则不生效if (fout == true) {console.log(hover_x - event.screenX);console.log(hover_y - event.screenY);console.log(event.screenX, event.screenY);// 计算底层的偏移值if (event.screenX > 0) {document.querySelector("#box>img").style.left = `${(hover_x - event.screenX) / 10}px`;document.querySelector("#box>img").style.top = `${(hover_y - event.screenY) / 10}px`;}// 计算顶层的偏移值if (event.screenY > 0) {document.querySelector("#box>#list>img").style.top = `${(hover_y + event.screenY) / 10}px`;document.querySelector("#box>#list>img").style.left = `${(hover_x + event.screenX) / 10}px`;}}};// 鼠标移出页面就关闭交互document.getElementById("box").onmouseout = function (event) {// 页面失去焦点就关闭效果fout = false;};</script></body>
</html>
使用的图片素材
底层图片:
顶层图片:
教你使用html三剑客写一个高级的伪3D效果相关推荐
- 手机版python3h如何自制游戏_教你如何用 Python 写一个小游戏
教你如何用 Python 写一个小游戏 引言 最近 python 语言大火, 除了在科学计算领域 python 有用武之地之外, 在游戏后台等方面, python 也大放异彩, 本篇博文将按照正规的项 ...
- 教大家用按键精灵写一个快手自动抢红包脚本
教大家用按键精灵写一个快手自动抢红包脚本 先设计好界面,为了节省大家的时间,界面方面我们早就设计好了,请看下面 设计好界面后就进入写代码的步骤,这个其实你可以先录制一遍,然后把录制的代码进行二次修改, ...
- [html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码
[html] 写一个类似刮刮卡效果的交互,即鼠标划过时显示号码 <title>Document</title> <style> *{ margin:0; paddi ...
- [css] 使用css写一个红绿灯交替的动画效果
[css] 使用css写一个红绿灯交替的动画效果 <!DOCTYPE html> <html lang="en"><head> <meta ...
- 大神教你如何给脚本写一个守护进程
在我们日常运维中,写脚本监控一个进程是比较常见的操作,比如我要监控mysql进程是否消失,如果消失就重启mysql. 用下面这段代码就可以实现: #!/bin/shDate=` date '+%c'` ...
- 教你用python代码写一个我的世界,绝对好玩
哈哈嗨,我来了~ 今天我教大家怎么用python做一个我的世界, 首先,你得安装依赖库: pip install pyglet 然后,我强调一下,这个游戏只能在python3.8以上运行,否则会报错罒 ...
- vue前端用服务器上路径的图片展示_5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动web服务器),因此本文所要描述的 ...
- python文字小游戏大全_教你如何用Python写一个小游戏
引言 最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏.后台等方面,python也大放异彩,本篇博文将按照正规的项目开发流程,手把手教大家写个python小游戏,来感受下 ...
- 教你用面向对象方法写一个烟花爆炸的特效
由于是面向对象,所以步骤非常重要 ** 一.OOA: ** 1. 创建元素; 2. 元素运动; 3. 烟花爆炸; 4. 随机位置; 5. 随机颜色; 二.OOD: function FireWork( ...
最新文章
- Springboot之YAML语法
- Linq专题之提高编码效率—— 第一篇 Aggregate方法
- 无人再谈CV:计算机视觉公司的困境
- Vivado 自定义VHDL的IP核
- Java为什么会存成undefined,为什么我在Java中获得NoClassDefFoundError?
- 2017年第八届蓝桥杯 - 省赛 - C/C++大学A组 - B. 跳蚱蜢
- ServletContext_功能_获取MIME类型
- Python正则表达式尽可能小的匹配(遇到第一个结束字符串就停止匹配)
- 求最高、最低、平均分
- IDEA实时编译配置流程
- (14) ZYNQ AXI4-Lite总线简介(学无止境)
- iOS内存管理的知识梳理
- 易错点:C 语言 continue while for 循环
- Define a New Server 没有tomcat选项
- ASP.NET连接SQL、Access、Excel数据库(三)——工厂模式
- STM32中大小端转换
- matlab,python 写kml文件(点,线,多边形)
- DiskPart使用方法(ZT)
- HTML实现文件上传和HTML实现打开文件目录
- Python简单实现人脸识别检测, 对照片进行评分
热门文章
- win7 64位下如何安装配置mysql-5.7.17-winx64
- 宸展光电拟与宸鸿科技集团合资;Tableau承诺未来五年培养1000万名数据学员 | 全球TMT...
- Python中calendar,time,datetime模块详情解 -------18
- 一文看尽2019 MWC十大新机
- windows远程连接服务器命令
- 企业如何构建数字化平台战略,加速规模化创新
- 全景图转小行星视角投影原理详解
- 腾讯新闻android2.3,腾讯新闻Android客户端更新 加入投票功能
- 《英雄无敌 V》初次接触!
- 看看英特尔安全(迈克菲)的自适应防御体系