HTML rotating photo album (0 basics, learn in 1 minute)

Homepage:Homepage🌎

Series of columns:Front-end web special effects💎

Friends who love front-end and have common interests, let’s communicate together.

becauseThere is a size limit for uploading, so I reduced a lot of frames, which resulted in the displayed special effects not being very good.

You can add photos of your good friends and show them to her

Everyone can experience the specific effects personally.

 

So I specially recorded a video for you:

csdn

Some friends who have no basic knowledge are worried, what should I do if I don’t have programming tools?

This does not require programming tools, just find 30 pictures and change the names.

Non-newbies can skip steps 1-5

1. Create a new folder

2. Create a new img folder and a txt document in the folder

3. Copy the code in this article and paste it into the txt document

4. If there is no txt suffix, set it like this

5. Change the file name to index.html

 

6. Put the pictures in the img folder, approximately 30 pictures are needed

7. Rename the picture to 1.jpg 2.jpg 3.jpg according to this rule. 

Image Source

All code:

<!DOCTYPE html>
<html lang="en" ondragstart="return false">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Atlas</title>
<! -- If I wake up one day -->
<! -- Cascading Style Sheets -->
<style type="text/css">
/*Remove default effect*/
* {
margin: 0;
padding: 0;
}
body {
background: #222;
overflow: hidden;
/* Uncheck*/
user-select: none;
}
@keyframes rotate {
100% {
transform: rotateY(360deg);
}
}
.perspective {
/*Sub-element perspective scene depth*/
perspective: 600px;
}
.wrap {
/* 3d */
width: 135px;
height: 240px;
margin: 100px auto;
position: relative;
/* border: 1px solid red; */
transform: rotateX(-20deg) rotateY(0deg);
transform-style: preserve-3d;
}
.wrap img {
display: block;
/* Absolute positioning */
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(0deg) translateZ(0px);
background: transparent;
box-shadow: 0 0 4px #fff;
border-radius: 5px;
/* webkit */
}
/* Photo base */
.wrap p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
position: absolute;
border-radius: 50%;
left: 50%;
top: 100%;
margin-left: -600px;
margin-top: -600px;
/* Press down along the x-axis*/
transform: rotateX(90deg);
}
</style>
</head>
<body>
<! -- Box Container -->
<div class="perspective">
<div class="wrap" id="imgwrap">
<! -- Introduce the image value page -->
<img class="f1" src="img/12.jpg" />
<img class="f1" src="img/13.jpg" />
<img class="f1" src="img/14.jpg" />
<img class="f1" src="img/15.jpg" />
<img class="f1" src="img/16.jpg" />
<img class="f1" src="img/1.jpg" />
<img class="f1" src="img/2.jpg" />
<img class="f1" src="img/3.jpg" />
<img class="f1" src="img/4.jpg" />
<img class="f1" src="img/5.jpg" />
<img class="f1" src="img/6.jpg" />
<img class="f1" src="img/7.jpg" />
<img class="f1" src="img/5.jpg" />
<img class="f1" src="img/6.jpg" />
<img class="f1" src="img/7.jpg" />
<img class="f1" src="img/8.jpg" />
<img class="f1" src="img/9.jpg" />
<img class="f1" src="img/10.jpg" />
<img class="f1" src="img/11.jpg" />
<img class="f1" src="img/17.jpg" />
<img class="f1" src="img/18.jpg" />
<img class="f1" src="img/19.jpg" />
<img class="f1" src="img/20.jpg" />
<img class="f1" src="img/21.jpg" />
<img class="f1" src="img/22.jpg" />
<img class="f1" src="img/23.jpg" />
<img class="f1" src="img/24.jpg" />
<img class="f1" src="img/25.jpg" />
<img class="f1" src="img/26.jpg" />
<img class="f1" src="img/27.jpg" />
<img class="f1" src="img/28.jpg" />
<img class="f1" src="img/29.jpg" />
<img class="f1" src="img/30.jpg" />
<! -- Introduce the image value page -->
<img class="f2" src="img/1.jpg" />
<img class="f2" src="img/2.jpg" />
<img class="f2" src="img/3.jpg" />
<img class="f2" src="img/4.jpg" />
<img class="f2" src="img/5.jpg" />
<img class="f2" src="img/9.jpg" />
<img class="f2" src="img/10.jpg" />
<img class="f2" src="img/11.jpg" />
<img class="f2" src="img/12.jpg" />
<img class="f2" src="img/25.jpg" />
<img class="f2" src="img/26.jpg" />
<img class="f2" src="img/27.jpg" />
<img class="f2" src="img/28.jpg" />
<img class="f2" src="img/29.jpg" />
<img class="f2" src="img/30.jpg" />
<img class="f2" src="img/13.jpg" />
<img class="f2" src="img/14.jpg" />
<img class="f2" src="img/15.jpg" />
<img class="f2" src="img/16.jpg" />
<img class="f2" src="img/17.jpg" />
<img class="f2" src="img/18.jpg" />
<img class="f2" src="img/19.jpg" />
<img class="f2" src="img/20.jpg" />
<img class="f2" src="img/21.jpg" />
<img class="f2" src="img/22.jpg" />
<img class="f2" src="img/23.jpg" />
<img class="f2" src="img/24.jpg" />
<img class="f2" src="img/6.jpg" />
<img class="f2" src="img/7.jpg" />
<img class="f2" src="img/5.jpg" />
<img class="f2" src="img/6.jpg" />
<img class="f2" src="img/7.jpg" />
<img class="f2" src="img/8.jpg" />
<! -- Introduce the image value page -->
<img class="f3" src="img/1.jpg" />
<img class="f3" src="img/2.jpg" />
<img class="f3" src="img/11.jpg" />
<img class="f3" src="img/12.jpg" />
<img class="f3" src="img/25.jpg" />
<img class="f3" src="img/26.jpg" />
<img class="f3" src="img/27.jpg" />
<img class="f3" src="img/3.jpg" />
<img class="f3" src="img/4.jpg" />
<img class="f3" src="img/5.jpg" />
<img class="f3" src="img/16.jpg" />
<img class="f3" src="img/17.jpg" />
<img class="f3" src="img/18.jpg" />
<img class="f3" src="img/10.jpg" />
<img class="f3" src="img/28.jpg" />
<img class="f3" src="img/29.jpg" />
<img class="f3" src="img/30.jpg" />
<img class="f3" src="img/13.jpg" />
<img class="f3" src="img/19.jpg" />
<img class="f3" src="img/20.jpg" />
<img class="f3" src="img/21.jpg" />
<img class="f3" src="img/22.jpg" />
<img class="f3" src="img/23.jpg" />
<img class="f3" src="img/24.jpg" />
<img class="f3" src="img/9.jpg" />
<img class="f3" src="img/14.jpg" />
<img class="f3" src="img/15.jpg" />
<img class="f3" src="img/6.jpg" />
<img class="f3" src="img/7.jpg" />
<img class="f3" src="img/5.jpg" />
<img class="f3" src="img/6.jpg" />
<img class="f3" src="img/7.jpg" />
<img class="f3" src="img/8.jpg" />
<p></p>
</div>
</div>
<!--  src="JS/photo.js" -->
<script type="text/javascript">
var oImg = document.getElementsByClassName('f1')
var oImg2 = document.getElementsByClassName('f2')
var oImg3 = document.getElementsByClassName('f3')
var len = oImg.length;
console.log(len)
var deg = 360 / len;
var oWrap = document.getElementById("imgwrap");
// var oWrap=document.querySelector('.wrap');
//The code that is executed after the page is loaded
window.onload = function () {
Array.prototype.forEach.call(oImg, function (ele, index, self) {
// Rotate and translate along the Z axis
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
//Transition time 1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
Array.prototype.forEach.call(oImg2, function (ele, index, self) {
// Rotate and translate along the Z axis
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
//Transition time 1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
Array.prototype.forEach.call(oImg3, function (ele, index, self) {
// Rotate and translate along the Z axis
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
//Transition time 1s
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
// Array.prototype.forEach.call(oImg, function (ele, index, self) {
//       // Rotate and translate along the Z axis
//       ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
//       //Transition time 1s
//       ele.style.transition = "1s " + (len - index) * 0.1 + "s";
// });
}
//Flip the 3D photo album
var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
document.onmousedown = function (e) {
// Click to set initial value
lastX = e.clientX;
lastY = e.clientY;
this.onmousemove = function (e) {
newX = e.clientX;
newY = e.clientY;
minusX = newX - lastX;
minusY = newY - lastY;
rotX -= minusY * 0.2;
rotY += minusX * 0.1;
oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
lastX = newX;
lastY = newY;
}
this.onmouseup = function (e) {
//mouse release
this.onmousemove = null;//Clear mouse movement
}
}
</script>
</body>
</html>

Related Posts

“DNS” and “CDN”

Teach you step by step how to make the navigation bar at the bottom of your mobile phone, and your boss will agree after reading it

[Ajax] HTTP related issues-GET-POST-XHR usage-ajax in jQuery-cross-domain-same origin-jsonp-cors

[Mini program development]——Encapsulating custom pop-up components

Front-end knowledge – flex layout of css

Introduction and use of Normalize.css

[Graphic tutorial to solve the problem of Chinese garbled output in vscode terminal]

Introduction to asynchronous request ajax, native ajax, basic use of $.ajax

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*