当前位置：网站首页>Youth without words │ use technology to frame the best memories of graduation season

Youth without words │ use technology to frame the best memories of graduation season

2022-06-21 23:56:00 【Geek flying rabbit】

Catalog
One 、 Graduation album
Two 、 Create a canvas
3、 ... and 、 Picture circle
Four 、 Add a reflection to the picture
5、 ... and 、 Center display
6、 ... and 、 Mouse events
7、 ... and 、 Graduation speech

One 、 Graduation album

Mountains and rivers have their origins , Meet again sooner or later , graduation Always full of parting and gratitude .
Don't be sad because of parting , Goodbye is goodbye . No matter for the time being or not , Friends will meet again .
Youth is always full of Don't give up and take a souvenir , Then we will Record your life in a book , When we meet again , Let us Look at the photos and recall your youth Well .
Of course, there is a way for technicians to commemorate their graduation , Let's write a Graduation album , To commemorate those lovely people .
Even if they can't stay in our minds , Let them freeze in memory forever .
Source code download address ： Excellent source code / Cool special effects / Graduation album

Graduation album

Two 、 Create a canvas

We are doing this 3D Photo album of
First we need to consider the use of 3D function , in addition , since 3D There must be a depth of field
build 3D The effect must have two properties ： One Change your style 3D, One Scene depth of field

<!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> Graduation album </title>
	<style type='text/css'> /*  The depth of field  */ #perspective {
       perspective: 800px; } #wrap {
       width: 120px; height: 180px; margin: 0 auto; position: relative; /* build 3D The effect must have two properties ： A change of style 3d, A scene depth of field 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>

3、 ... and 、 Picture circle

We can see this 11 The picture forms a big circle
In fact, just set each picture Different placement angles You can achieve the effect of forming a circle

var oWrap = document.getElementById('wrap');
var oImg = oWrap.getElementsByTagName('img');
var oImgLength = oImg.length;
var Deg = 360 / oImgLength;

//  Set the angle of each picture 
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';
}

Four 、 Add a reflection to the picture

In order to give the picture a more prominent effect , We add... To all the pictures inverted reflection in water effect
We can go through -webkit-box-reflect Style to add a reflection effect to the picture , You can set the orientation of the reflection 、 The offset 、 cover 、 Linear gradient and other attributes

#wrap img {
    
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 1px;

	transform: rotateY(0deg) translateZ(0px);
	/* inverted reflection in water ： toward   The offset   cover */
	/* Linear gradient ( Where to start , The color at the beginning , The color at the end )*/
	-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.5) 100%);
}

5、 ... and 、 Center display

We need to make the album in Right in the middle of the browser Exhibition
Otherwise, the look and feel of the album will be very unsatisfactory , It is easy to use the mouse to operate Run out of screen outside
According to the displayable height of the current screen , Customize the top margin for the album

mTop();

window.onresize = mTop;

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

6、 ... and 、 Mouse events

When we use this album , You can think of three events ： On mouse click 、 When the mouse moves 、 When the mouse is released
In fact, there are only three events , Just write the logic of these three events , In fact, this graduation album has been completed
When the mouse clicks , We need to record the mouse At the beginning , When the mouse movement is over and released , To record the mouse The position at the end
In fact, logic is , Compare the two mouse coordinates Subtraction , Then give some in the middle Excessive animation , When the difference decreases to a certain value , Just Clear the timer of the animation , You can achieve a smooth animation scrolling effect

//  When the mouse is pressed 
document.onmousedown = function (ev) {
    
	ev = ev || window.event;

	// When the mouse is pressed , Assign a value to the coordinates of the previous point , To avoid mistakes in the first subtraction 
	lastX = ev.clientX;
	lastY = ev.clientY;

	//  When the mouse moves 
	this.onmousemove = function (ev) {
    
		ev = ev || window.event;

		clearInterval(timer);

		nowX = ev.clientX; // clientX  The distance from the mouse to the left of the page 
		nowY = ev.clientY; // clientY ……………………………… Top ………………

		// The difference between the current coordinate and the previous coordinate 
		minusX = nowX - lastX;
		minusY = nowY - lastY;

		// to update wrap The angle of rotation of , The faster you drag -> minus Great changes  -> roY Great changes  ->  Fast rotation 
		roY += minusX * 0.2; // roY = roY + minusX*0.2;
		roX -= minusY * 0.1;

		oWrap.style.transform = 'rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)';

		// The coordinates of the previous point 
		lastX = nowX;
		lastY = nowY;

	}
	//  When the mouse is released 
	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)';
		
			//  The difference is reduced to a certain value , Clear animation 
			if (Math.abs(minusX) < 0.1 && Math.abs(minusY) < 0.1) {
    
				clearInterval(timer);
			}
			console.log(minusX);
		}, 13);
	}
	return false;
}

7、 ... and 、 Graduation speech

although , In this hot and sunny season , everyone We must say goodbye , For a better party , More excitement .
Graduation album can Talk about missing Love , But bloggers still feel A good relationship Are maintained by real life , Offline Contact more It's the truth
Finally, I wish you all , Happy graduation , The skirt has flowers , The years have passed smoothly . May you be your own sun , Live as you once longed for .

Happy graduation