青春无言│用技术定格毕业季最美好的回忆
Posted 极客飞兔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了青春无言│用技术定格毕业季最美好的回忆相关的知识，希望对你有一定的参考价值。
✨ 目录
🎈 毕业纪念册
- 山水有来路，早晚复相逢，
毕业总是充满了离别和感恩。 - 不要因离别而伤感，告别才能再见。无论暂别或就别，朋友终会再相见。
- 青春总是充满了
不舍和留念，那我们就将生活记录成册，待再次相逢，让我们看照片再忆青春吧。 - 当然技术人的毕业有技术人纪念的方式，让我们手写一个
毕业纪念册，去纪念那些可爱的人。 - 即使他们不能长留在我们脑海中，那就让他们永远定格在内存里。
- 源码下载地址：精品源码 / 炫酷特效 / 毕业纪念册
🎈 创建画布
- 我们在做这种
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
以上是关于青春无言│用技术定格毕业季最美好的回忆的主要内容，如果未能解决你的问题，请参考以下文章