青春无言│用技术定格毕业季最美好的回忆
青春无言│用技术定格毕业季最美好的回忆
极客飞兔
已于2022-06-30 18:27:06修改
3066
收藏
53
分类专栏：
《官方征文测评系列》
文章标签：
毕业季
3d
前端
css3
进击的技术er
于2022-06-20 18:44:28首次发布
《官方征文测评系列》
专栏收录该内容
4 篇文章
7 订阅
订阅专栏
✨ 目录
🎈 毕业纪念册🎈 创建画布🎈 图片围圈🎈 图片添加倒影🎈 居中展示🎈 鼠标事件🎈 毕业赠语
🎈 毕业纪念册
山水有来路，早晚复相逢，毕业总是充满了离别和感恩。不要因离别而伤感，告别才能再见。无论暂别或就别，朋友终会再相见。青春总是充满了不舍和留念，那我们就将生活记录成册，待再次相逢，让我们看照片再忆青春吧。当然技术人的毕业有技术人纪念的方式，让我们手写一个毕业纪念册，去纪念那些可爱的人。即使他们不能长留在我们脑海中，那就让他们永远定格在内存里。源码下载地址：精品源码 / 炫酷特效 / 毕业纪念册
🎈 创建画布
我们在做这种 3D 的相册时候首先我们需要考虑到使用 3D 功能，另外，既然 3D 就一定有景深搭建3D效果必须的两个属性：一个变换风格变 3D，一个场景景深
<!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>毕业纪念册</title>
<style type='text/css'>
/* 景深 */
#perspective {
perspective: 800px;
}
#wrap {
width: 120px;
height: 180px;
margin: 0 auto;
position: relative;
/*搭建3D效果必须的两个属性：一个变换风格变3d，一个场景景深800px*/
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(0deg);
}
</style>
</head>
<body>
<div id="perspective">
<div id='wrap'>
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<img src="img/9.jpg" />
<img src="img/10.jpg" />
<img src="img/11.jpg" />
<p></p>
</div>
</div>
</body>
</html>
🎈 图片围圈
我们可以看到这 11 张图片围成了一个大圆圈其实只要将每个图片设置不同的摆放角度即可实现围成圆圈的效果
var oWrap = document.getElementById('wrap');
var oImg = oWrap.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;
// 设置每张图片的角度
for (var i = 0; i < oImgLength; i++) {
oImg[i].style.transform = 'rotateY(' + i * Deg + 'deg) translateZ(350px)';
oImg[i].style.transition = 'transform 1s ' + (oImgLength - 1 - i) * 0.1 + 's';
}
🎈 图片添加倒影
为了给图片更加突出的效果，我们给图片都添加上倒影效果我们可以通过 -webkit-box-reflect 样式给图片添加倒影效果，可以设置倒影的朝向、偏移、遮盖、线性渐变等属性
#wrap img {
width: 100%;
height: 100%;
position: absolute;
border-radius: 1px;
transform: rotateY(0deg) translateZ(0px);
/*倒影：朝向 偏移 遮盖*/
/*线性渐变(从哪里开始,开始时候的颜色,结束时候的颜色)*/
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}
🎈 居中展示
我们需要使得相册在浏览器的正中间展示不然相册的观感会很不理想，使用鼠标操作时很容易被跑出屏幕之外根据当前屏幕的可显示高度，自定义给相册设置上边距
mTop();
window.onresize = mTop;
function mTop() {
var wH = document.documentElement.clientHeight;
oWrap.style.marginTop = wH / 2 - 180 + 'px';
}
🎈 鼠标事件
我们在使用这个相册时候，可以想到有三个事件：鼠标点击时、鼠标移动时、鼠标松开时其实也只有这三个事件，只要写好这三个事件的逻辑，这个毕业纪念册其实也就完成了在鼠标点击时候，我们需要记录鼠标最开始的位置，当鼠标移动结束松开时，要记录鼠标结束时候的位置其实逻辑就是，将这两个鼠标坐标进行求差，然后中间给一些过度的动画，当这个差值减小到某个值时，就清除动画的定时器，即可实现流畅的动画滚动效果
// 鼠标按下时
document.onmousedown = function (ev) {
ev = ev || window.event;
//鼠标按下的时候，给前一点坐标赋值，为了避免第一次相减的时候出错
lastX = ev.clientX;
lastY = ev.clientY;
// 鼠标移动时
this.onmousemove = function (ev) {
ev = ev || window.event;
clearInterval(timer);
nowX = ev.clientX; // clientX 鼠标距离页面左边的距离
nowY = ev.clientY; // clientY ………………………………顶部………………
//当前坐标和前一点坐标差值
minusX = nowX - lastX;
minusY = nowY - lastY;
//更新wrap的旋转角度，拖拽越快-> minus变化大 -> roY变化大 -> 旋转快
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
//前一点的坐标
lastX = nowX;
lastY = nowY;
}
// 鼠标松开时
this.onmouseup = function () {
this.onmousemove = null;
timer = setInterval(function () {
minusX *= 0.95;
minusY *= 0.95;
roY += minusX * 0.2; // roY = roY + minusX*0.2;
roX -= minusY * 0.1;
oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';
// 差值减少到某个值，清除动画
if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
clearInterval(timer);
}
console.log(minusX);
}, 13);
}
return false;
}
🎈 毕业赠语
虽然，在这个阳光热辣的季节里，大家就要别离，为了更好的宴会，更多的热闹。毕业纪念册可以聊表思念之情，但是博主还是觉得好的关系都是靠现实生活中维系的，线下 多联系 才是真理最后祝愿大家，毕业快乐，衣襟带花，岁月风平。愿你成为自己的太阳，活成自己曾经渴望的模样。
活动地址：毕业季·进击的技术er