• 青春无言│用技术定格毕业季最美好的回忆

    目录

    一、毕业纪念册

    • 山水有来路，早晚复相逢，毕业总是充满了离别和感恩。
    • 不要因离别而伤感，告别才能再见。无论暂别或就别，朋友终会再相见。
    • 青春总是充满了不舍和留念，那我们就将生活记录成册，待再次相逢，让我们看照片再忆青春吧。
    • 当然技术人的毕业有技术人纪念的方式，让我们手写一个毕业纪念册，去纪念那些可爱的人。
    • 即使他们不能长留在我们脑海中，那就让他们永远定格在内存里。
    • 源码下载地址：精品源码 / 炫酷特效 / 毕业纪念册

    毕业纪念册

    二、创建画布

    • 我们在做这种 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    三、图片围圈

    • 我们可以看到这 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';
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    四、图片添加倒影

    • 为了给图片更加突出的效果，我们给图片都添加上倒影效果
    • 我们可以通过 -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%);
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    五、居中展示

    • 我们需要使得相册在浏览器的正中间展示
    • 不然相册的观感会很不理想，使用鼠标操作时很容易被跑出屏幕之外
    • 根据当前屏幕的可显示高度，自定义给相册设置上边距
    mTop();

window.onresize = mTop;

function mTop() {
	var wH = document.documentElement.clientHeight;
	oWrap.style.marginTop = wH / 2 - 180 + 'px';
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    六、鼠标事件

    • 我们在使用这个相册时候，可以想到有三个事件：鼠标点击时、鼠标移动时、鼠标松开时
    • 其实也只有这三个事件，只要写好这三个事件的逻辑，这个毕业纪念册其实也就完成了
    • 在鼠标点击时候，我们需要记录鼠标最开始的位置，当鼠标移动结束松开时，要记录鼠标结束时候的位置
    • 其实逻辑就是，将这两个鼠标坐标进行求差，然后中间给一些过度的动画，当这个差值减小到某个值时，就清除动画的定时器，即可实现流畅的动画滚动效果
    // 鼠标按下时
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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    七、毕业赠语

    • 虽然，在这个阳光热辣的季节里，大家就要别离，为了更好的宴会，更多的热闹。
    • 毕业纪念册可以聊表思念之情，但是博主还是觉得好的关系都是靠现实生活中维系的，线下 多联系 才是真理
    • 最后祝愿大家，毕业快乐，衣襟带花，岁月风平。愿你成为自己的太阳，活成自己曾经渴望的模样。

    毕业快乐

    活动地址：毕业季·进击的技术er

  • 相关阅读:
    深入理解Spring中的Ioc
    不能说的秘密：加密信件
    Google Earth Engine 教程——影像聚合分析（最大值、最小值、平均值、中位数和高质量合成）
    7年经验之谈 —— Web测试是什么，有何特点？
    如何录制微课？简单，手把手教你：教学微课视频如何录制
    SpringBoot整合task实现定时任务、@EnableScheduling、@Scheduled
    基于docker部署redis多主多从集群
    二手物品交易管理系统
    进入nodejs 利用http模块搭建一个简单的服务器并配合fs模块网客户端传输文件
    【译】.NET 7 中的性能改进（三）
  • 原文地址：https://blog.csdn.net/weixin_41635750/article/details/125377269